애플워치 개발을 시작하기 전에
확인할 3가지
티몬 애플워치 앱 목업 제작기
사람들의 이목을 집중시켰던 애플워치가 출시된 지도 1년이 지났습니다. 저희 티몬도 애플워치용 앱을 제작하게 되었는데요! 선행으로 티몬의 애플워치앱의 목업을 제작하는 과정에서 경험했던 몇몇 제약들을 토대로 디자이너와 개발자가 알아두면 좋을 팁을 공유하려고 합니다.
블로그나 워드에서 볼 법한
텍스트 스타일
애플워치는 SF체가 적용되며, Headline, Subhead, Body 등의 독특한 텍스트 스타일이 있습니다. 보통 텍스트 스타일이라면 Bold, Italic, Semibold 등을 떠올리게 되는데요. 애플워치는 블로그나 워드에서 볼 수 있는 독특한 네이밍으로 구성되어 있습니다. 이는애플워치의 작은 화면에 텍스트를 잘 표현하기 위한 것으로, 전용 서체인 SF체를 활용하여 다음과 같은 스타일들로 제공하는 것으로 확인할 수 있습니다.
애플워치 앱 전용 텍스트 스타일하지만, 위의 이미지처럼 애플워치 전용 텍스트 스타일은 크기나 두께가 일정치 못하여 티몬 앱에 적용시키기에는 무리가 있습니다. 티몬 앱은 비슷한 사이즈(주로 텍스트 13~15.00point 사용)안에서 텍스트 스타일(regular, medium, semibold 등)을 다르게 적용시키기 때문입니다. 그래서 저희는 기존에 아이폰 티몬 앱의 폰트 가이드를 동일하게 적용시키기로 하였습니다.
티몬 ios 텍스트 가이드(좌), 애플워치 시스템 폰트 적용(우)텍스트 스타일을 선택할 때는 그 앱의 디자인 스타일에 맞춰서 사용하면 되는데요. 크고 작은 명확한 텍스트 사용이 많다면 애플워치 앱 전용 텍스트 스타일을, 유사한 텍스트 사이즈를 사용하고 여러 사람들이 디자인한다면 수치로 적용되는 시스템 폰트로 사용하는 것이 디자인 통일성을 위해서도 효과적입니다.
배경색은
최대한 어둡게
애플워치의 네이티브앱들을 살펴보면, 대부분의 배경색이 어두운 것을 알 수 있습니다.
애플워치 네이티브 앱애플워치는 밝은 화면을 지양해야 되는데요. 그 이유는 애플워치가 OLED 디스플레이를 사용하고 있기 때문입니다. OLED 디스플레이는 높은 해상도를 작은 사이즈에 구성할 수 있다는 점에서 스마트 워치에 최적화된 디스플레이이지만, 화면이 밝을수록 전력 소모가 급격히 높아지기 때문에 디자인 시 밝은 계열의 배경색에 유의해야 됩니다.
디자인의 즐거움은 결국 주어진 제약을 기회로 반전시키는것 아니겠어요? 애플워치 앱을 디자인할 때는 어두운 화면에서 멋지게 보일 수 있도록 디자인 하시면 됩니다!
넘나 까다로운
레이아웃
작은 화면과 낮은 성능을 가진 애플워치의 특성상 애플이 제공하는 가이드라인은 엄격합니다. 이번에 목업 작업 하면서 가장 어려움을 겪었던 부분입니다.
레이어 배열은 문자로 해주세요.
보통 iOS 앱의 뷰를 짤 때는 상단에서부터 몇 pixel 떨어지는지를 수치로 입력했었는데요. 애플워치는 이와 다르게 문자로 뷰를 배열합니다. 가로는 [left / center / right]로 세로는 [top / center / bottom]로 선택할 수 있습니다. 개발자들에겐 너무나 간편한 방법이지만, 디자이너에겐 신경이 거슬리는(?) 화면이 나올 수 있으니 작업 후 디자인이 정확하게 표현되는지 확인해보는 게 좋을 것 같습니다.
애플워치 티몬 앱 목업 작업 : 레이어 배열8px의 여백의 미를 존중합시다.
애플워치는 UI 엘리먼트 간에 8px의 패딩이 자동으로 생성됩니다. 프로그램에서 자동적으로 만들어지는 패딩이기 때문에 컨트롤할 수 없으며 애플에서는 본 패딩을 워치 내 가장 자연스러운 여백이라고 주장하고 있습니다.
디자이너가 자주하는 “간격 1px로 붙여주세요~” 이런 요청은 허용되지 않으니 참고하세요!
애플워치 티몬 앱 목업 작업 : 엘리먼트 간 8px 패딩겹치는 뷰는 사양합니다.
애플워치는 뷰 위에 버튼이나 이미지 등이 겹쳐지는 구조가 불가능합니다. 딜위에 장바구니 담기 버튼이 올라오거나 서버에서 불러오는 딜 이미지 위에 투명도 있는 BG가 올라는 것도 적용이 안 됩니다.
애플워치는 사전에 화면 기획할 때부터 많은 고민이 필요할 것 같습니다.
애플워치 티몬 앱 목업 작업 : 적용 불가능한 뷰이 글을 마치며
애플워치 티몬 앱의 목업을 제작해보면서 애플워치 앱을 만들 때는 최대한 가볍고, 심플하게 만들어야 된다는 것을 느꼈습니다. 작은 화면에 낮은 성능으로 스마트폰처럼 다양한 기능을 부여하기에는 제약이 너무 많이 때문인데요, 기획/설계단계에서 기존 앱에서 어떠한 기능을 최소화 하여 워치에 보여줄 지를 정하는 단계가 사실 가장 중요한 단계입니다. 이단계에서 센스있게 기능및 각종 요소들을 덜어내지 못하면 디자인과 구현단계에서 큰 난관을 맞게 됩니다.
UI를 디자인 할 때에도 섬세하게 신경써야 합니다. 포토샵에서 디자인한 결과물과 다른 뷰가 나올 수 있으니, 애플워치 앱을 처음 제작한다면 애플워치 UI 인터페이스 가이드라인을 정확하게 파악하고, 개발 환경에 실제로 적용되는 UI 요소들을 이해하는 것이 도움이 될 것입니다.
감사합니다!
