멋진 UI를 만드는 7가지 법칙 - 파트 1 (번역본)
UI디자이너가 아름다운 앱과 디자인을 만들기 위해 중요한 7가지 내용들
이 게시물은 Medium, Visual Design채널의 7 Rules for Creating Gorgeous UI 라는 문서를 번역한 게시글입니다. 맥락상 이해가 쉽도록 의역 + 수정했기 때문에 정확하지 못한 표현이 있을 수 있습니다.
원본글 링크
https://medium.com/@erikdkennedy/7-rules-for-creating-gorgeous-ui-part-1-559d4e805cda
시작하는 글
이 글은 다음과 같은 사람들에게 유용합니다.
- 더 나은 UI 디자인을 하고싶은 개발자.
- 실무를 하고있는 UI 디자이너들
과거에 저는 형편없는 UI 디자이너였습니다. 포트폴리오는 형편없어 보였고, 내 작업과 사고 과정을 제대로 반영하지 못 했었죠. 물론, 나름대로 변명거린 있었습니다. 저는 공학을 전공했거든요. 그러니 어쩔 수 없다고 생각했었죠.
"저는 공학을 전공했어요!"
이 말은, 제가 디자인들을 끔찍하게 만들어낼 수 있다는 보증수표같은 거였죠
저는 감각적으로 뛰어난 사람이 아니었기 때문에, 앱의 미학적 내용들을 분석적 방식으로 배워나가기 시작했습니다. 무수한 모작을 진행했고, 거기에서 수치심을 느낄 필요조차 없었죠. 저는 UI프로젝트에서 90%는 그저 격렬히 배우기 위해 디자인을 해야했고, 그중 10%만이 돈을 벌기 위한 작업이었습니다. 오로지 모작을 위해 구글과 핀터레스트, 드리블 등을 샅샅이 뒤졌었죠. 이 규칙들은 그 시간들로부터 배운 교훈이기도 합니다.
제가 UI 디자인을 잘 할 수 있는 이유는 간단합니다. 저는 분석이나, 아름다움, 균형들에 대한 이해를 기반으로 디자인을 했기 때문이 아니라. 실제상황에 응용할 수 있는 것들을 찾아나섰기 때문입니다. 이론이나, 어려운 관념적 이야기에 대해서는 논하지 않겠습니다. 오로지 직접 공부하면서 - 실전을 통해 배우게된 것들만을 이야기하려합니다.
(이후 크라브마가라는, 이스라엘 특유의 실전 무술의 예를 드는데, 이 부분은 쓸모가 없는 표현이라 삭제했습니다.)
7가지 규칙
1. 빛은 항상 하늘에서, 땅 쪽으로
2. 흑백이 항상 중요하다
3. 여백을 두배로 만들자
4. 이미지 위에 텍스트를 올려놓는 방법을 배우자
5. 텍스트를 강조하거나, 눌러주는 방법
6. 좋은 폰트만을 사용하자
7. 예술적으로 배우고, 훔쳐내자
(4~7번은 본문엔 포함안됨. 파트 2가 따로 있습니다)
규칙 1. 빛은 항상 하늘에서, 땅 쪽으로
그림자는 현실 뿐 아니라, UI 디자인에 있어서도 매우 중요한 단서가 됩니다. 당연한 이야기지만, 빛은 하늘에서 옵니다. 빛은 하늘에서 땅 쪽으로 방향이 고정되어있기 때문에, 빛이 반대방향으로 나타나는건, 결코 일반적이지 않죠.
귀신인가...?하늘에서 빛이 나오면, 그것은 사물의 꼭대기를 비추고 그 아래에 그림자를 드리우게 됩니다.상단은 더 밝고, 하단은 더 어두울 수 밖에 없습니다. UI 디자인 역시 현실의 사물이나, 인간의 고정관념을 따르게 됩니다. 그렇기에, UI디자인에 있어서도 이러한 내용은 동일하게 적용됩니다.
간단한 버튼 이미지이지만, 이 부분을 잘 들여다보면 디테일한 부분들이 여럿 있습니다.
1. 눌리지않은 최상단 버튼은, 하단이 어둡습니다.
2. 눌리지않은 버튼은 상단 부분이 미세하게 더 밝습니다.이건 사실상 살짝 둥근 표면을 표현하게되죠.
3. 눌리지않은 버튼은 약간의 그림자를 만들어냅니다.
4. 눌린 버튼은 기존보다 전반적으로 어둡습니다. 이건 마치 스크린 안에 파묻힌것 처럼 보이게되죠
이 버튼에서 나온 네가지 내용들을, 다른 곳에서도 그대로 응용해볼 수 있습니다.
과거에 사용되었던 iOS 6의 화면입니다이 화면은 애플의 iOS 6에서 '방해금지' 화면과, 알림 화면을 보여줍니다. 여기에서도 여러 빛 효과를 확인할 수 있습니다.
1. 제어판의 하얀색 패널 상단에 살짝 그림자가 그려져있습니다.
2. ON 버튼 슬라이더 내에도 약간의 그림자가 있네요
3. ON 버튼 슬라이더의 하단에는 빛의 반사가 들어가있습니다.
4. 아이콘들의 테두리 부분이 더 밝고, 상단 역시 더 밝은걸 알 수 있습니다. 이건 빛이 하늘쪽으로부터 오는 현실을 반영한 것입니다.
5. 디바이더 (구분선)은 자세히 보면 상단이 어둡고, 하단에는 빛이 표현되어있습니다.
디바이더 (구분선)을 좀더 확대해서 바라보는 경우안쪽으로 파고들어간 것 처럼 보이게되는 경우 (안쪽에 그림자를 드리우게되는 경우 )
- 텍스트 입력창
- 눌려있는 버튼
- 슬라이더트랙
- 라디오버튼 (선택안됨)
- 체크박스
밖으로 튀어나온듯이 보이는 경우 (바깥쪽에 그림자를 드리우는 경우)
- 눌리지않은 버튼
- 슬라이더 버튼
- 드롭다운 컨트롤
- 카드 영역
- 라디오버튼의 선택된 요소영역
- 팝업들
자, 이제 우리는 모든걸 알게됐으니. 모든 곳에서 확인이 가능하겠죠?
규칙 1. 빛은 항상 하늘에서, 땅 쪽으로
플랫 디자인의 경우
우리는 약 5년 동안 플랫디자인의 유행을 타고있습니다. 플랫 디자인은 위의 사례처럼, 가상의 라이트라던가, 3D적인 돌출같은걸 최대한 배제한 시각스타일입니다. 그저 선과 면적을 가진 도형들로만 이루어져있죠.
저 역시 깔끔하고, 단순한 것을 좋아하지만, 이런 트렌드가 계속해서 이어질거라고는 생각하지 않습니다. 인터페이스에서 3-D의 미묘한 시뮬레이션은 완전히 포기하기에는 여러 장점이 있거든요.
- 스큐어모픽 디자인 : 텍스쳐와 그림자, 그라디언트를 모두 사용한 경우
- 플랫디자인 스러운 디자인 : 플랫디자인스럽지만 여전히 미세한 시각적 표현들이 남아있음
- 플랫디자인 : 오로지 선과 색, 그림자뿐
우리는 놀라운 시대에 살고 있습니다. 스큐어모픽 디자인을 택하자니, 사용성이 떨어지니, 플랫디자인을 더 채용하는 추세죠. 플랫 디자인은 깔끔하고, 매우 단순합니다. 그러나 그 안에도 분명 빛에 대한 묘사가 존재합니다. 특히 그림자에 대한 묘사가 확실하게 남아있죠. (탭, 슬라이드, 클릭시)
OS X 요세미트 - 이 경우도 완벽한 플랫 디자인이 아닙니다.구글의 마테리얼 디자인 역시도, 완벽한 플랫 디자인이라고 말할순 없습니다. 분명히 그림자가 존재하거든요.
UI 디자인은 정보를 전달하기위해 항상 현실을 모방하는 경향이 있습니다. 그리고 그건 하루이틀의 일이 아니죠. 2006년도의 웹디자인 역시도, 텍스쳐도 없고그라디언트는 순수하게 장식을 위해 사용됐었죠. 완벽한 플랫 디자인은 우리의 미래가 될 순 없습니다. 오히려 '플랫디자인 스러운' 것이 더 현실적이죠.
(약간 말장난같지만, 완벽한 플랫디자인에는 선과 색, 면적만이 존재하므로 - 완벽한 플랫디자인은 디자인의 미래가될 수 없다는 이야기입니다. 그림자나, 현실에대한 모방이 들어간 요소들이 여전히 남아있을 거라는 이야기죠.)
규칙 2. 흑백이 항상 중요하다
색상을 추가하기 전에 흑백 색상으로 설계를 진행해보세요. 복잡한 시각 디자인 요소들을 단순화해서, 간격을 확실하게 잡는게 가장 중요합니다.
요즘의 UX디자이너들은 모바일 퍼스트 디자인에 관심이 많습니다. 고해상도의 PC보다, 작은 모바일 해상도를 우선시해야하보니, 많은 제약이 발생하게되죠. 이런 제한과 제약은 모바일을 위해, 다른 부분들을 생각하거나, 고민할 필요가 없게 만듭니다.
이 방법 역시 마찬가지입니다. 흑백으로 디자인을 해보세요. 색상보다 면적, 간격에 대한 부분을 확실하게 하는겁니다. 색은 맨마지막에, 정말 필요한 경우에만 추가해보세요.
와이어프레임 작업 예시흑백을 통한 디자인은 - 앱을 " 깨끗하고" 간단하게"유지할 수 있는 가장 쉬운 방법입니다. 너무 많은 색을 너무 많이 가지고 있는 것만큼 끔찍한 일도 없죠. 흑백 디자인은오로지 공간, 크기, 배치와 같은 것들에 먼저 초점을 맞추게 만듭니다. 그리고 이런 요소들이야말로 깔끔하고, 심플한 디자인의 핵심입니다.
물론, 그레이스케일을 통한 디자인이 불가능하거나, 유용하지 않을 때도 있습니다. 예를 들어 '스포티'하다던가, 밝고 명랑한 느낌 등을 내려면- 어쩔 수 없이 색상을 사용해야하죠. 하지만 대부분의 앱들은 그런 특정한 목적이나 이유 없이 색상을 사용합니다. 이런 선택들은 디자인의 완성도를 떨어뜨리거나, 완성시키기 어렵게 만들게되죠.
규칙 2. 흑백이 항상 중요하다
색상을 추가하는 방법
그레이 스케일에 색상을 추가하는 경우, 하나의 색만을 추가하는게. 가장 효과적입니다.
물론 그레이스케일에 두개의 색상을 추가할수도 있을거고. 단일 색상의 여러 변형을 사용할 수도 있을겁니다.
Hue, 색채란 무엇인가요?
웹은 대부분 RGB의 16진수 코드로 색상을 표현합니다. 그러나 이 부분보다는 HSB 색상표를 사용하는 것이 더 유용합니다. HSB 색상체계가 - 우리가 현실에서 바라보는 방식과유사한 형태를 갖고있기 때문입니다.
RGB의 경우 빛의 삼원색이기 때문에, 빛이 색상에 실제 어떤 영향을 끼칠지를 팔레트를 통해서 확인할 수가 없습니다. 그러나 HSB의 경우는 이것을 자연스럽게 확인할 수 있죠.
여기 연관된 게시글이 있습니다 (추후 번역 예정)
https://learnui.design/blog/the-hsb-color-system-practicioners-primer.html
(이건 RGB 이외의 체계나, 색상, 빛에 대한 이해가 충분하지 않으신 분들에겐 좀 어려운 이야기가 될 수 있습니다. 다만, 간단히 말하자면, RGB에서 빛에 의한 색상변화라는걸 - 팔레트에서 바로 체크하는건 결코 쉽지가 않습니다. 상대적으로 덜 익숙하지만, HSB라는 색상체계가 - 실제 색상의 변화에 더 연관이 깊다. 라고만 알아두시면 될 것 같습니다. )
스매싱 매거진의 색상테마를, 금색 버전으로 만든 경우
스매싱 매거진의 색상테마를, 푸른 버전으로 만든 경우동일한 색채(Hue)에서, 채도와 명도를 수정하면 여러 색상들을 만들어낼 수 있습니다. 어둡거나, 밝거나, 배경이나, 강조색 등을 만들어낼 수 있죠. 하지만 이런 경우는 대비가 확실하게 느껴지질 않죠. 그렇기에 여러 색상을 동시에 사용하는 경우에는 그 색채 *hue)를 다르게하는 편이 - 더 확실하고 안정적인 방법입니다.
제 경험상, UI 디자인에 적합하도록 색상을 조절하는건, 색상 사용시 가장 중요한 스킬중 하나입니다. 여기에 관련된 내용은 다음 링크를 참조하세요.
(실제, 해당 저자의 글을 번역한 글입니다)
https://brunch.co.kr/@clay1987/105
규칙 2. 흑백이 항상 중요하다
색상을 사용할 때 중요한 몇가지 내용들
색상은 시각 디자인에서 가장 복잡한 영역입니다. 색깔에 관한 많은 내용들이 있으니, 다음 내용들을 좀 확인해보시면 도움이 될 것 같네요.
절대 완전한 검은색을 사용하지 마세요 (추후 번역 예정)
https://ianstormtaylor.com/design-tip-never-use-black/
Adobe 컬러 CC (팔레트)
Dribbble의 색상 기반 검색
https://dribbble.com/colors/BADA55
(사실상 색에대한 부분은 확실히 이게좋다,라고 말하기가 어려운 부분입니다. 그래서 이 저자도 완벽한 대안을 이야기하기보다는, 자료를 참고하라는 쪽으로 이야기를 돌리는군요)
규칙 3. 여백을 두배로 늘리자
UI의 완성도를 높이려면, 빈 여백이 많이 필요합니다. 두번째 규칙에 대해 이야기할 때, 흑백 디자인을 통해 여백과 간격, 비례에 집중하라고 이야기했었죠. 이번에는 여백과 레이아웃에 좀더 집중된 이야기를 진행할겁니다.
위 시안을 보면, 웹페이지의 CSS규격이 모두 적용되어있지 않은 상태입니다. 각 폰트는 너무 작고, 줄 간격 역시 너무 좁죠. 물론 긴 문장마다 약간의 간격이 띄워져있긴 하지만, 충분해보이진 않습니다. 게다가 좌우여백은 너무 페이지 끝까지 늘어서있고. 페이지가 커지던 말던, 끝부분에 찰싹 달라붙어있겠죠.
UI 디자인에 있어서 여백이 중요한 이유도 여기에있습니다. 제대로된 간격과 배치, 레이아웃은 디자인을 더 좋게 보이도록 만듭니다. 때로는 이 여백을, 어이가 없을 정도로 많이 주어야하죠.
공백과 여백, HTML과 CSS
CSS를 써서 포맷을 짜는데 익숙한 사람들은 - 기본적으로 흰 여백을 다루는데 익숙합니다. 기본적으로는 아무런 여백이라는 것이 존재하질 않으니까요. 실제로 스타일이 하나도 적용되지않은 HTML 시안이나, 개별 요소들로부터 여백, 간격 작업을 시작해보세요. 오로지 간격을 떼고, 여백을 만드는데에 집중해보는 겁니다.
음악 플레이어에 대한 시안좌측 메뉴를 좀 살펴보죠
메뉴들간의 상하 사이즈들은 텍스트들의 2배정도의 간격입니다. 예를 들어 12px 폰트를 사용한다면, 적어도 24px 정도의 간격이 텍스트 사이에 배치된다는거죠.
이번엔 목록의 타이틀 영역을 한번 볼게요. 15px정도 되어보이는 Playlist 라는 표기와, 그 하단의 구분선이 있군요. Sound track이라는 텍스트와 play list 간의 간격을 보세요. 타이틀 텍스트의 크기보다 매우 넓은 면적이 벌어져있죠?
좌측의 사이드바가 글씨끼리의 줄간격의 사례를 확인할 수 있었습니다. 이번에는 우측 상단영역을 좀 보죠. 네비게이션바 쪽의 검색창. 'Search all music' 쪽을 보게되면, 전체 bar의 높이의 20%정도 되는 크기로, 텍스트 크기를 정해두었습니다. 아이콘 역시도 비슷하네요.
(역자 : 이 부분에 대해서는 좀 의문이가는게. 과연 저 규격이 시각적으로 완성도가 높은 규격인가. 에대해서 의문이 듭니다. 상단 검색창에 비해서 상하단 간격이 너무 넓어보입니다. 게다가 상단의 사진 영역이나, 좌우의 탭을 두개씩 나눠둔 구조같은건. 별로 직관적이어보이지는 않거든요.)
여백을 충분히 활용한 경우, 인터페이스를 훨씬 깔끔하고, 아름다벡 보이도록 만들 수 있습니다. 예를 들어 포럼 사이트같은 것들이 있겠군요.
포럼 사이트 컨셉
위키피디아 컨셉 디자인위키피디아가 필수적인 요소만을 남겨뒀다는 말은에 동의는 합니다만. 실제 그 사이트가 충분히 편리하고, 아름답다고 말하기엔 부족하겠죠. 위의 시안처럼 깔끔하게 정리가되었다면, 훨씬 더 사용하기가 편할겁니다.
그러니 개별 선과, 텍스트들 사이에는 충분한 여백을 주세요. UI 요소나, UI 그룹의 경우에도 마찬가지입니다. 그리고 어떤 것들이 가장 효과적인지를 분석해보세요.
다음 내용은 파트 2에서 이어집니다. (번역완료)
https://brunch.co.kr/@clay1987/129
(이후에 해당 저자는 자신이 제작한 레슨들을 소개하고, 광고를 진행합니다. 다만 별로 중요한 내용들이 아니기떄문에 제거했습니다.)
역자의 말
해당 글은 기존에 색상 팔레트를 만드는 방법을 위해 번역했던 글의 저자입니다. 다만 원글을 보시면 아시겠지만, 쓸데없는 표현이나, 미사여구가 많은데다. 이야기식으로 풀어가는 표현들이 많아, 이해에 도움이 되지않을 내용들이 많은 편입니다. 그래서 과감하게 내용을 삭제하거나, 맥락에 맞는 내용으로 바꿔버린 곳들이 많습니다.
이 내용은 UI 디자인 연구소 - 단톡방에 올려진 자료를 정리하여 만들어진 컨텐츠입니다.
저희 단톡방은 잡담이 불가능한 방입니다. 단톡방에 들어오시려는 분은 - 이용안내문을 꼭 확인해주세요!
단톡방 이용안내
https://brunch.co.kr/@clay1987/113
