이번 시간에는 어떻게 하면 디자이너가 만든 앱처럼 예쁘게 만들 수 있는지 알아보는 시간입니다. 앱 디자인 관련 강의는 따로 포스팅하도록 하겠습니다. 여러분의 앱 디자인 퀄리티를 높여줄 몇 가지 요소만 간단하게 짚고 넘어가도록 하죠.
여러분은 곧 플러터로 UI를 만들게 될텐데요. UI는 유저 인터페이스(User Interface)의 약어입니다. 쉽게 말하면 사용자가 앱과 상호작용하는 글, 그림, 버튼 등 화면에 그려진 모든 것을 의미하죠. 그리고 여러분이 자주 들으셨던 UX는 사용자 경험(User eXperience)의 약어입니다. 여러분은 UI와 UX의 차이를 아시나요?
쉽게 말해 UI가 포장도로라면 UX는 비포장도로입니다. 우리는 리스트가 있으면 세로로 스크롤하는 걸 당연하게 여기고 화면을 아래로 스크롤 합니다. 근데 만약 여러분이 가로로 스크롤 하는 화면을 만들었다면? 그래도 사람들은 한 번쯤 세로로 스크롤을 시도했을 겁니다. 그게 일반적인 경험이었기 때문이죠. 기껏 포장된 길을 만들어놨더니 사용자들은 원래 다니던 풀숲길을 이용했다는 겁니다! 그럼 그 포장도로는 사실 사용자들에게 친숙하고 편한 길이 아니었던 겁니다. UX를 잘못 설계했다는 말이죠. 우리가 UX를 설계할 필요는 없습니다. 이미 만들어진, 우리가 오랜 세월에 걸쳐 이용하던 풀숲이 있고, 우리는 그 풀숲길을 예쁘게 포장만 하면 됩니다.
웹 디자인은 예술 작품으로 만드는 경우가 종종 있습니다만, 앱은 24시간 휴대폰을 손에 들고 다니며 자신에게 필요한 기능만 모아둔 앱들을 사용하기 때문에 상호작용하기에 적합한 디자인을 하기 마련입니다. 그리고 디자인에는 규칙이 있습니다. 애플 로고가 황금비율을 참고하여 제작되었다는 이야기를 한 번쯤은 들어보셨죠?
황금비율 말고도 퀄리티를 올려줄 규칙들을 지켜서 디자인을 하면 예쁜 디자인이 나올 수밖에 없습니다. 디자인 퀄리티를 높여줄 5가지 요소를 소개합니다.
1. 폰트
글의 가독성과 판독성을 좌우합니다. 우리가 지금부터 만들 앱들은 영어로만 작업할 겁니다. 왜냐하면 영문 폰트는 디자인을 잘하지 않아도 있어보이기 때문입니다. 그리고 나중에 여러분이 만든 앱을 스토어에 올릴텐데요. 그때 공용어인 영어로 만들어져 있어야 전세계에서 이용할 수 있겠죠? 사용자 유입수와 광고수익 금액이 국내에만 앱을 배포할 때와는 다를 겁니다. 디자이너들의 포트폴리오 중에서 예뻐 보이는 작업물의 대부분 영어가 써 있죠. 폰트는 영문으로 제목용과 본문용 딱 2개만 사용합니다.
- 판독성: 글과 낱말, 줄글을 쉽게 구별할 수 있는 정도
- 가독성: 판독된 글과 그림들이 쉽게 이해되는 정도
제목과 본문의 글자 크기도 황금비율에 따라 정합니다. 황금비율은 1:1.618인데요. 만약 본문의 크기가 16이라면 제목의 크기는 16에 1.618을 곱한 약 26을 사용하면 됩니다.
아래는 구글 폰트 사이트인데요. 여기에 있는 폰트를 여러분의 플러터 앱에 사용할 수 있습니다. 여러분이 기획한 앱에 어울리는 폰트를 2개만 골라보세요!
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
필터는 아래 사진과 같이 Serif와 Sans-Serif 2개만 체크되어있어야 합니다!
2. 컬러
앱의 분위기를 나타냅니다. 빨간색은 따뜻하다, 정열적이다. 파란색은 차갑다, 믿음이 간다 등등 컬러가 연상시키는 느낌들이 있습니다. 이런 컬러들을 본인이 마음에 든다고 막 쓰게 되면 사용자들에게 혼란을 주기 십상입니다. 빨간색이 경고의 느낌을 주는데, 경고 메시지를 초록색으로 해버리면 사람들은 그게 경고인지 모릅니다.
컬러도 폰트처럼 많이 쓰면 안 됩니다. 컬러의 느낌이 혼합되는데다가, 만약 앱이 유튜브 같은 앱이어서 콘텐츠의 썸네일을 보여줘야 하는 경우 모든 컬러들이 섞여버려서 대혼돈의 어플리케이션이 될 수 있습니다. 컬러는 포인트 컬러 1개만 고르고 톤온톤으로 진행해봅시다. 톤온톤은 1가지 색으로 깔맞춤했다고 생각하시면 됩니다.
여러분이 기획한 앱의 컬러를 고르는 쉬운 방법이 있습니다. 바로 잡지를 이용하는 방법인데요. 구글에 여러분이 기획한 앱의 키워드 하나를 잡지라는 키워드와 함께 검색해보세요. 저는 커피앱이니까 커피 잡지로 검색해보겠습니다.
잡지에 사용된 컬러들은 이미 전문 디자이너들이 보정까지 끝마친 컬러들이기 때문에 이 잡지 안에 사용된 컬러들을 그냥 스포이드로 찍어서 사용하면 됩니다. 가장 포인트가 될 컬러를 여러분의 포인트 컬러로 지정하고, 톤온톤으로 만들어 보시죠.
3. 여백
사용자에게 화면을 보는 스트레스를 줄여줍니다. 너무 빽빽하게 글과 사진이 붙어있으면 거부감이 들지 않나요? 두꺼운 백과사전을 정독하라고 한다면 나오는 반응과 같습니다. 사람들은 읽는 걸 귀찮아하기 때문에 적절한 여백을 넣어서 한 번에 많은 내용을 보여주지 않고 숨쉴 틈을 줄 필요가 있습니다. 여백은 8의 배수로 주는 겁니다. 8 > 16 > 24 > 32 ...처럼요. 8의 배수인 이유는 글이나 이미지 사이에 8과 16정도의 여백을 줄 때 사람이 느끼기에 적절한 여백이 되기 때문입니다.
4. 통일성
아이돌이 칼군무를 추듯 일관성을 유지하여 사용자에게 편안함을 줍니다. 사람들은 예상되는 것들에서 편안함을 느낍니다. 디테일에 집중하라는 말 들어보셨죠? 일관성 하나로 사용자에게 프로페셔널한 느낌을 줄 수 있습니다. 만약 앱 디자인에서 굳이 튀어야 한다면 매출과 직결되는 구매하기 버튼이 되겠습니다. 사용자가 여러분의 제품을 구매하길 원한다면 가장 눈에 띠는 곳에 눈에 띠게 있어야 하겠죠? 눈에 띠려면 나머지는 모두 일관성을 유지한 상태여야 합니다. 모두가 YES라고 할 때, 단 한 명만이 NO라고 하는 것 처럼요.
5. 대비
배경으로부터 글자, 그림의 구분이 분명해서 콘텐츠가 잘 보이도록 합니다. 굳이 색맹이 아니더라도 배경색과 글자색이 너무 가까우면 읽기 힘듭니다. 다시 한 번 강조하지만 사람들은 읽기 귀찮아 합니다. 배경과 내용의 대비를 명도, 채도를 통해 확실하게 구분지어야 불편하지 않습니다.
디자인이 예쁘게 나오는 또 한 가지 팁은 인스타그램에 있는 ui, ux 디자이너와 관련 피드들을 팔로우하고 계속 보는 겁니다. 계속 보다보면 예쁜 디자인들의 공통점을 발견하게 되는데요.
1. 그림자가 있다.
2. 모서리가 둥글다.
3. 이미지를 사용한다.
4. 이미지가 박스를 벗어난다.
5. 그라데이션을 사용한다.
그대로 따라하시면 됩니다. 이 부분은 코딩할 때 알려드릴게요!
단, 여러분이 앱 개발자로서 알아둬야 할 점이 있습니다.
예쁘긴 하지만 이미지의 모서리를 둥글게 자르는 것, 그라데이션과 그림자 효과는 앱의 성능에 많은 영향을 줍니다. 쉽게 말해 앱이 느려지는 가장 큰 요인이죠. 여러분이 미래에 협업할 디자이너들이 이미지를 동그랗게 잘라달라던가, 여기저기 그림자와 그라데이션 범벅을 요구한다면 여러분은 이렇게 이야기하실 줄 알아야 합니다.
"이 효과들은 앱이 느려지는 가장 큰 요인들입니다. 디자인이 예쁜 것도 중요하지만 앱이 느리면 사람들이 안 쓰게 됩니다. 그러면 앱을 만드는 이유가 없어집니다. 일단 이 효과들을 구현해보겠지만 앱이 느려지는 경우 이 효과들을 하나씩 빼야함을 알아주세요."
우리가 함께 만들 앱은 많은 기능이나 많은 페이지가 만들어질 것이 아니기 때문에 예쁜 디자인을 그대로 따라합시다.
귀에 딱지가 붙게 들어서 아시겠지만, 잘하는 방법은 그냥 많이 보고, 많이 따라해보는 게 답입니다. 아래는 링크는 제 동영상 디자인 강의인데요. 폰트, 컬러, 여백, 통일성에 대해 조금 더 자세하게 설명했습니다. 유료라서 무조건 들으실 필요는 없고, 위에서 다룬 내용을 말로 듣고 싶다 하시는 분들만 들으시면 됩니다.
세상의 모든 클래스, 클래스101
NO.1 온라인 클래스 플랫폼 - 대한민국 1등 온라인 클래스 플랫폼 준비물까지 챙겨주는 클래스101과 취미부터 부업, 새로운 적성까지 찾아보세요!
class101.net
다음 강의에서는 이번에 여러분이 모아둔 디자인 재료들로 앱 디자인을 해봅시다. 아래 링크를 눌러주세요!
Flutter 앱 만들기 3단계 : 앱 디자인하기
로고부터 디자인을 해볼 건데요. 로고는 키워드만 넣으면 자동으로 만들어주는 곳이 있습니다. 아래 링크를 누르고 들어가서 여러분의 앱 키워드만 검색하면 알맞는 로고들을 추천해줍니다. *
mingzan.dev
'비전공자를 위한 Flutter > 앱 개발 강의보기' 카테고리의 다른 글
| Flutter 앱 만들기 4단계 : 플러터 코딩 계수기 앱 만들기 (0) | 2022.05.16 |
|---|---|
| Flutter 앱 만들기 3단계 : 5분만에 앱 디자인하기 (0) | 2022.05.12 |
| Flutter 앱 만들기 1단계 : 기획하기 (0) | 2022.05.03 |
| Flutter 첫 프로젝트 - my_app 코드 간단 설명 (2/2) (0) | 2022.04.29 |
| Flutter 첫 프로젝트 - my_app 코드 간단 설명 (1/2) (0) | 2022.04.28 |
댓글