iOS Design Themes

 

 

 

 

 

 

 

 

---

 

 

 

 

 

안녕하세요. iOS 개발자 에이든입니다!👦🏻

 

 

 

제 목표가 🧞‍♂️실생활에 도움되는 ✨예쁜 앱✨들을 많이 만드는 것인데

그러려면 디자인 공부도 조금 해야 할 것 같아서 이런 글들을 올리기로 했습니당ㅎㅎ

 

디자인 공부...아 나 감 없.. 막막하지만 다행히도 Apple에서는 앱 디자인에 대한 가이드라인을 제시해주고 있어요.

어떤 앱이 사용자에게 좀 더 직관적이고 좋은 디자인인지 매년 업데이트하며 그 기준들을 가르쳐주고 있답니다!

 

한 목차씩 읽고 공부하다 보면 분명 UI/UX 적으로 좋은 앱들을 만들 수 있을 것 같아요ㅋㅋ

 

이번 시간에는 첫 시간이니만큼 iOS 앱의 전체적인 테마를 한번 훑어보도록 하죠!

자 그럼 레쓰고~

 

 

 

---

 

 

Human Interface Guidelines의 iOS 파트를 가보면 가장 첫 문장이 우리를 반깁니다(?)

 

As an app designer, you have the opportunity to deliver an extraordinary product that rises to the top of the App Store charts. To do so, you'll need to meet high expectations for quality and functionality.
(앱 디자이너는 App Store 차트 상위에 오르는 특별한 제품을 제공할 기회가 있습니다. 그렇게 하려면 품질과 기능에 대한 높은 기대치를 충족해야 합니다.)

 

제가 예전의 iOS 앱과 안드로이드 쪽은 잘 모르지만 확실히 Apple에서 앱 검수를 타이트하게 하는 것 같긴 합니다.

예전에 앱을 출시할 때 앱 스토어에 올라가는 이미지에서 설명하는 기능이 제 앱에는 없지만

고객의 입장에서는 되는 것처럼 보일 수 있다며 리젝 시키더라구요😂 그것두 영어로 메일이 와서 당황..

 

잠시 옆길로 셌네요ㅎㅎ 다시 이어서 가보죠

---

그다음 읽어보게 되면 iOS를 다른 플랫폼과 차별화하는 세 가지 기본 테마에 대해 말해줍니다.

그 세 가지는 Clarity(명확성), Deference(존중), Depth(깊이)입니다.

 

Clarity

Throughout the system, text is legible at every size, icons are precise and lucid, adornments are subtle and appropriate, and a sharpened focus on functionality motivates the design. Negative space, color, fonts, graphics, and interface elements subtly highlight important content and convey interactivity.
(시스템 전체에서 텍스트는 모든 크기에서 읽을 수 있고 아이콘은 정확하고 명확하며 장식은 은은하고 적절하며 기능에 대한 날카로운 초점은 디자인에 동기를 부여합니다. 네거티브 공간, 색상, 글꼴, 그래픽 및 인터페이스 요소는 중요한 내용을 은은하게 강조하고 상호 작용을 전달합니다.)

 

1. 텍스트는 모든 크기에서 읽을 수 있어야 한다.

사용자에게 불필요한 스크롤을 많이 하지 않도록 하되, 텍스트를 너무 작게 하지는 말라는 의미로 보입니다.

 

2. 아이콘은 정확하고 명확해야 한다.

아이콘만으로 이 앱이 어떤 콘텐츠를 가지고 있는지 알 수 있게 하는 게 가장 좋다고 하네요

 

3. 장식은 은은하고 적당해야 한다.

이쁜 것은 좋지만 너무 화려해서 콘텐츠가 꾸미는 요소들에게 시선을 뺏기지 않도록 해야 합니다.

 

4. 네거티브 공간(콘텐츠가 없는 공간), 색상, 글꼴, 그래픽 및 인터페이스 요소는 중요한 내용(콘텐츠가 들어있는 내용)을 은은하게 강조하고 상호작용을 전달합니다.

1,2,3을 종합해서 말해주는 것 같아요. 결론은 콘텐츠가 잘 보이도록 깔끔하고 은은하게~

 

---

Deference

Fluid motion and a crisp, beautiful interface help people understand and interact with content while never competing with it. Content typically fills the entire screen, while translucency and blurring often hint at more. Minimal use of bezels, gradients, and drop shadows keep the interface light and airy, while ensuring that content is paramount.
(부드러운 동작과 선명하고 아름다운 인터페이스는 사람들이 콘텐츠를 이해하고 상호 작용하는 데 도움이 되며 결코 경쟁하지 않습니다. 콘텐츠는 일반적으로 전체 화면을 채우지만 투명도와 흐림 효과는 종종 더 많은 것을 암시합니다. 베젤, 그라디언트 및 그림자를 최소한으로 사용하여 인터페이스를 밝고 경쾌하게 유지하면서 콘텐츠가 가장 중요함을 보장합니다.)

 

여기서 의미하는 바는 "뭐니 뭐니 해도 콘텐츠가 무조건 1등이야! 다른 요소들과는 경쟁상대가 아냐~"인 것 같네요. 이펙트와 효과들은 콘텐츠를 위한 보조적인 장치로써 다음에 올 콘텐츠를 암시하여 콘텐츠에 대한 힌트를 주는 그런 식의 존재여야 합니다.

---

Depth

Distinct visual layers and realistic motion convey hierarchy, impart vitality, and facilitate understanding. Touch and discoverability heighten delight and enable access to functionality and additional content without losing context. Transitions provide a sense of depth as you navigate through content.
(뚜렷한 시각적 레이어와 사실적인 모션은 계층을 전달하고 활력을 부여하며 이해를 촉진합니다. 터치 및 검색은 즐거움을 높이고 컨텍스트를 잃지 않고 기능 및 추가 콘텐츠에 액세스 할 수 있도록 합니다. 전환은 콘텐츠를 탐색할 때 깊이감을 제공합니다.)

 

이 부분은 예시를 보면 이해가 더 쉬울 것 같아요.

 

 

 제가 출시했던 앱을 예시로 가져와봤어요ㅎㅎ 당장 떠오르는 게 얘뿐이더라고요ㅋㅋㅋ

 

위를 보시면 앞에 Modal View가 띄워지면서 원래 있던 View가 뒤로 가죠? 이를 통해 해당 부분에서 콘텐츠 사용이 끝나면 원래 화면으로 돌아갈 수 있다는 암시를 해주고 있어요! 이러한 방법 역시 콘텐츠를 최대한 방해하지 않으면서 시각적으로 사용자에게 어떻게 사용할 수 있는지를 알려주는 것이죠!

 

 

 

---

Design Principles

말 그대로 설계 원칙입니다. 총 6가지가 있어요!

 

1. Aesthetic Integrity(미적 무결성)

앱의 모양과 동작이 기능과 잘 어우러져야 합니다. 
 예를 들어, 진지한 작업을 해야 하는 앱은 은은하고 눈에 거슬리지 않는 그래픽, 정형화되어있는 컨트롤 방식 및 예측 가능한 동작을 사용하여 사용자가 좀 더 집중할 수 있게 만들어 줘야 합니다. 반면에 게임과 같은 엔터테인먼트 앱은 보는 것만으로 재미를 느낄 수 있도록 화려하고 매혹적인 UI들로 좀 더 보는 재미를 선사해야 하죠

 

2. Consistency(일관성)

인터페이스 요소, 아이콘, 텍스트 스타일, 용어들이 일관되어야 합니다. 그래야 사용자가 앱을 사용하면서 결과를 쉽게 예측하고, 앱을 동작시킬 수 있는 것이죠.

 

3.Direct Manipulation(직접 조작)

사용자가 직접적으로 조작할 수 있게 해야 합니다.
 사용자가 장치를 회전시키서나 제스처를 사용하여 콘텐츠에 영향을 주게 함으로써 앱을 내가 조작하고 있구나를 느끼게 해주는 거예요. 만약 앱을 켜자마자 앱이 스스로 회전되고 콘텐츠가 켜진다면 사용자는 콘텐츠 사용에 제한이 있다고 느낄 거예요.
이때 또 하나 유의해야 할 점은 사용자가 조작하는 것에 대한 결과는 예측 가능하고 즉각적이어야 합니다. 이 행동에 대한 결과를 예측하고 조작시키게 하는 것이죠!

 

4. Feedback(피드백)

피드백은 말 그대로 동작에 대한 결과를 보여주는 거예요. 골라야 하는 여러 객체 중에 하나를 탭 하면 해당 객체의 색이 바뀐다던지 프로세스바는 진행상황이 어느 정도 진행되는지 보여주는 것처럼요. Apple에서는 애니메이션과 사운드가 피드백을 명확하게 보여주는데 도움이 된다고 말하네요!

 

5. Metaphors(은유)

앱의 객체와 동작이 현실 세계와 유사하면 사람들은 앱 사용법을 빨리 배우게 됩니다.
쉽게 말해 iOS 앱에서 기사나 잡지를 볼 때 다음 페이지로 넘기고 싶으면 오른쪽에서 왼쪽으로 스와이프 동작을 하죠? 이 부분이 현실에서 우리가 책을 볼 때의 행동과 유사합니다. 이처럼 친숙한 경험들을 바탕으로 앱의 동작과 피드백을 기획하는 것이죠

 

6. User Control(사용자 컨트롤)

 앱은 객체들을 친숙하고 예측 가능하게 하고, 이미 진행 중인 작업을 쉽게 취소할 수 있도록 하여 사람들이 통제하고 있다는 느낌을 줘야 합니다. 엡은 행동 방침을 제안하거나 위험한 결과에 대해 경고할 수는 있지만 일반적으로 앱이 의사결정을 대신하면 안 된다는 것이죠.

 

---

 

이렇게 오늘은 H.I.G의 맨 첫 장을 한번 읽어봤습니다.

어찌 보면 너무나 당연한 소리들인 것 같으면서 어렵기도 하네요ㅋㅋㅋㅋㅋ

 

이걸 읽다 보니 왜 iOS 앱들은 동작방법이 비슷한지 알 것 같아요!

덕분에 새로운 앱을 깔아도 사용하기 쉽다는 게 iOS의 큰 장점 아닐까요?ㅎㅎ

 

그럼 여기서 마치겠습니다!

혹시라도 부족하거나 잘못된 부분 그리고 질문 있으시면 언제든 댓글 부탁드려요! 감사합니다!👦🏻👋🏻