사이드 프로젝트 개발자분들께 (제가 아무것도 안한게 아니라 열심히 삽질했다는 것을..) 알려드리는 글입니다.
정돈되지 않은 주저리 주저리라 이해가 안되실수도 있다는 점 양해 부탁드립니다..
유지보수와 디자인 작업을 최소화하기위해 iOS, AOS의 기본 컴포넌트를 최대한 활용하는 디자인시스템을 연구하고 적용하고 있는데요. 바야흐로 20년도의 머터리얼은 봤었는데, 애플 HIG를 처음 접해서 연구하고 삽질하느라 시간이 좀 걸리고 있습니다…! (곧 머터리얼 M3도 볼 예정이에요) 열심히 하고 있다는 것을.. 증빙하기 위해.. 제가 거친 고민들을 공유드려봅니다.
왜 기본 컴포넌트를 사용하려고 하나요?
한 땀 한 땀 디자인을 하고 싶지 않았어요..
웹 작업할 때 쓰던 디자인입니다.
이렇게 접근하면 기능과 화면이 늘어날 수록
모든 케이스에 대응해야하는 장인정신이 요구됩니다.
유지보수도 줄이고
디자인도 덜하고 (과연 결말이 그렇게 될까 아직은 불확실합니다)
HIG 공부도 할 겸 기본컴포넌트를 최대한 활용한 디자인을 해보고 싶었습니다.
이렇게 접근 하는 기업은 거의 없을거에요. 컴포넌트의 개성이 곧 브랜딩과도 연결되니까요!
저희 데브이벤트는 개발자들에게 행사정보를 제공하는게 주 목적이기 때문에 브랜딩을 덜어내고, 개발-디자인 상호 효율을 극대화하고 싶었습니다.
깃허브 iOS 앱 디자인 방식이 제 눈엔 너무 좋아보이더라구요.
iOS, AOS 두 벌 작업을 안 할 수는 없을까?
기본 컴포넌트를 사용하기 위해서는 불가능하다는 결론입니다. 한 벌만 작업하는 건 공통의 컴포넌트를 전부 다 디자인하는 기존의 방법을 택할 수 밖에 없습니다..
결론 : 폰트와 컬러 시스템은 동일하게 사용하되, 기본 컴포넌트는 각각의 것을 사용해서 두 벌 작업하는 방향을 생각하고 있습니다. 없는건 만들고요. 그게 오히려 더 유지보수가 원활할 것 같아요!
폰트시스템 고민
첫번째 접근. 애플 컴포넌트를 사용하려면 애플이 세팅해 둔 폰트시스템을 사용해야하는 거 아닐까?
일단 애플이 어떤식으로 폰트를 사용하고 있나. HIG + 스케치 파일을 뜯어봤어요.
피그마도 따로 파서 .. 애플 시스템을 그대로 저희 기존 디자인에 적용해보려는 시도.
그런데 line height가 %가 아닌 수치로 되어있는 점이 제게 잘 와닿지 않았고,
본문(150%)과 제목(120%) 별 행간 적용을 위해서는 머터리얼의 체계가 더 수월하다는 판단을 내렸습니다.
머터리얼, 기존 제가 만든거, 애플꺼인데요.
기존에 쓰던 폰트시스템은 웹까지 섞여있어서 혼란스럽더라구요.(그땐 모바일웹이라 반응형으로 웹앱 한번에 다 처리하면 좋겠다고 생각했었습니다.) 네이티브 하는 김에, 앱 시스템으로 따로 분리하는게 낫다고 생각했어요. iOS, AOS 기본 컴포넌트 사용가능한 하나의 시스템으로 합치게 되었습니다.
짜잔 결과물입니다.. 얜 적용해주시면 돼요!
뭔가 제가 놓친 부분이 있다 싶으면 말씀해주시구요!
컬러시스템 고민
애플에서 제공하는 디자인 리소스 스케치 파일 뜯어봤어요. HIG 문서도 보면서요. 컬러시스템에 세팅된 애들이 컴포넌트에 어떤식으로 적용됐나 이해하는 과정..
피그마로 옮겨놓은 커뮤니티 파일 찾아서 더 잘 이해할 수 있었어요. (애플이 제공하는 스케치파일 피그마로 import 할 수 있긴 한데 디자인 시스템이 완벽하게 안 옮겨지더라구요)
다크모드까지 대응하면서 우리 앱에서 필요한 부분만 골라올려면 어떻게 해야할지 연구했어요. Ex. System gray랑 fill color, system background가 대체 어떻게 다르게 쓰인거지. Style Organizer 플러그인으로 각 컬러스타일이 어디 컴포넌트에 쓰였나 찾기 수월했습니다. 그래서 난 뭘 취해와야하는거지. 알파값 있는 색상은 어떻게 왜 쓰이고 있는것인가..
진행중..
애플은 Label, Background, Fill, SystemGray의 컬러를 따로 관리하는데, 아마 저는 Label만 가져와서 쓸거같아요.
그리고 애플에서 버튼 state(pressed, selected 등)에 컬러랑 알파값을 어떻게 쓰고 있는지 hig에서 못찾겠더라구요. sketch, Figma 파일에도 없어요. (아마 hig 업데이트 되면서 수정된듯합니다.) 그래서 material에서는 state layer를 둬서 버튼 위에 투명한 흰색 등을 까는 등의 방식을 사용하는데, 저도 그걸 적용하려고 합니다.
color contrast 플러그인으로 색상 대비율이 괜찮은지도 점검할 예정이에요.
저희 팀 개발자 분들과
애플 아카데미 K, A께 무한한 감사인사를 드립니다.
HIG 한글 번역해주신 1기 분도요!
