멋진 UI를 만드는 7가지 법칙 - 파트 2 (번역본)
UI디자이너가 아름다운 앱과 디자인을 만들기 위해 중요한 7가지 내용들
이 게시물은 Medium, Visual Design채널의 7 Rules for Creating Gorgeous UI 라는 문서를 번역한 게시글입니다. 맥락상 이해가 쉽도록 의역 + 수정했기 때문에 정확하지 못한 표현이 있을 수 있습니다.
원본글 링크
https://medium.com/@erikdkennedy/7-rules-for-creating-gorgeous-ui-part-2-430de537ba96
이 글에서는 굳이 디자인 학교를 다니지않더라도, 깨끗하고 간결한 UI 디자인을 하기위한 규칙을 이야기하고있습니다.
7가지 규칙
1. 빛은 항상 하늘에서, 땅 쪽으로
2. 흑백이 항상 중요하다
3. 여백을 두배로 만들자
4. 이미지 위에 텍스트를 올려놓는 방법을 배우자
5. 텍스트를 강조하거나, 눌러주는 방법 배우기
6. 좋은 폰트만을 사용하자
7. 예술적으로 배우고, 훔쳐내자
(1~3번은 본문엔 포함안됨. 파트 1에서 확인하세요)
멋진 UI를 만드는 7가지 법칙 - 파트 1
https://brunch.co.kr/@clay1987/120
규칙 4. 이미지 위에 텍스트를 올려놓는 방법을 배우자
이미지 위에 텍스트를 안정적으로 올려놓는 방법은 가짓수가 별로 많지 않습니다. 약 다섯가지 정도가 되겠네요. 훌륭한 UI 디자이너가 되려면 이미지와 텍스트를 연결시키는 방법을 꼭 배워야합니다.
규칙 4. 이미지 위에 텍스트를 올려놓는 방법을 배우자
첫번째 방법 : 이미지 자체에 텍스트를 합쳐놓는 방식
이 방법은 그렇게 좋은 방식은 아니지만, 별 장식 없이 이미지 위에 텍스트를 올려놓는것도. 나름대로 좋은 방법이 됩니다.
인스타그램 삘나는 사진, 그러나 배경과 텍스트가 구분이 잘 안되는군요이런 방식의 필요요건을 말해보자면 다음과 같습니다.
1. 배경이 되는 이미지는 글씨에 대비해 어두운 편이 좋습니다.
2. 텍스트는 일반적으로 흰색이거나, 강력하게 대비가되는 색상인 것이 낫습니다.
3. 화면이나 창 크기마다 꼼꼼한 테스트가 필요합니다.
-
다만 이런방식으로 사용할 경우, 텍스트나 이미지를 변경할 경우 - 여러번의 재점검이 필요해집니다. 일반적으로 이런식으로 - 아무 편집이ㅏ나, 장치 없이 텍스트를 바로 올려놓는건, 위험부담이 큽니다. 그러니 사용시에는 꼭 주의하세요!
텍스트와 배경에 별도의 편집이 필요하지 않은 사례규칙 4. 이미지 위에 텍스트를 올려놓는 방법을 배우자
두번째 방법 : 전체 이미지에 배경 깔기
일반적으로 가장 편리한 방식은, 이미지 상단에 어둡게 배경을 까는 겁니다. 원본이미지가 충분히 어둡지 않은 경우, 투명도를 먹인 배경을 깔아주는게 좋죠. 여기 그 예시가 있습니다.
35%의 어두운 배경을 깔아둔 upstart 웹페이지의 사례해당 사이트에서 개발자도구를 통해 어두운 배경을 제거한다면, 원본 이미지가 너무 밝다는걸 알 수 있습니다. 그러나 어두운 배경을 올려놓는다면, 크게 문제는 없죠. 이런 방식은 썸네일이나 작은 이미지들에도 사용할 수 있는 방식입니다.
또한 이런 배경이 언제나 어두운 검은색이어야할 필요는 없습니다. 자체적인 색채를 갖고있는 색상을 사용하더라도 좋은 결과가 만들어집니다.
규칙 4. 이미지 위에 텍스트를 올려놓는 방법을 배우자
세번째 방법 : 텍스트 영역에만 배경깔기
이 방식은 매우 단순하고, 편리하게 사용됩니다. 아주 미세한 투명도를 갖고있는 검은 사각형을 텍스트의 배경으로 사용하는 것이죠. 투명도만 적당하다면, 텍스트 아래의 이미지는 무엇이 되더라도 크게 상관이 없습니다. 매우 안정적인 방식이죠.
검은색상 외에도 색상을 사용하는 방식도 있습니다. 하지만, 색상 사용시에는 주의가 필요합니다.
규칙 4. 이미지 위에 텍스트를 올려놓는 방법을 배우자
네번째 방법 : 배경을 흐림처리 (블러) 하기
이 방식은 배경과 텍스트를 조화롭게만드는 매우 좋은 방식 중 하나입니다. (다만 블러처리 외에도 어둡게 처리해주는 효과가 함꼐 들어가야 더 효과적입니다)
애플사 역시도 이런 블러처리를 통한 스타일링을 사용했고, 윈도우즈 역시도 이런 방식을 사용한 바 있습니다.
이미지 전체를 블러처리하는 방식 외에도, 사진 자체의 아웃포커스를 통해 블러처리를 할수도 있습니다. 하지만 이런 방식은 해상도 변화나 레이아웃 변경시 - 완전한 해결책이 되어주진 못합니다. 그러니 항상 텍스트가 블러처리된, 흐릿한 배경 위에 올라갈 수 있게 꼭 확인이 필요합니다.
이런 방식이 만들어낼 수 있는 좋지않은 케이스는, 아래 구글 월렛 이미지의 사례에서 잘 드러납니다.
텍스트 타이틀 뿐 아니라 하단의 설명글 역시도, 대비가 확실치 않기 때문에 잘 보이질 않습니다. 이런 상황이 벌어지지않게 주의하세요!
규칙 4. 이미지 위에 텍스트를 올려놓는 방법을 배우자
다섯번째 방법 : 그라데이션을 통해, 끄트머리 어둡게 만들기
이 방식은 바닥쪽으로부터 점차 올라올수록, 투명해지는 배경이 배치되어있습니다. 그리고 그 위에 텍스트가 쓰여있는 형태죠. 이 방식 역시도 매우 효과적인 방식입니다.
이건 미디엄 채널의 기본 갤러리 스타일을 가져온것인데요. 아무것도 없는것 같아 보여도, 자세히보면 0% ~20% 정도 되는 그라디언트가 하단에 배치되어있는 것을 알 수 있습니다. 또한 자세히들여다보면, 미디엄의 텍스트 스타일링에는 약간의 텍스트 자체 그림자 효과가 들어가있다는 것도 알 수 있습니다. 이역시 시인성을 높이는 좋은 방법이죠.
추가로 말하자면, 규칙 1에서 이야기했듯. 빛은 하늘에서 땅 쪽으로 비춥니다. 그렇기에 아랫 부분이 어두운건, 이런 현실의 반영을 잘 응용한 결과이기도 한것이죠.
여기에 한번 더 나아가자면, 흐림효과에 그라디언트와, 마스크 영역을 적용한 응용 버전이 존재합니다. (+ 배경의 어둡게 처리한 효과 포함)
규칙 4. 이미지 위에 텍스트를 올려놓는 방법을 배우자
추가적인 방법 : 이미지 가장자리를 어둡게 처리하기 (비네팅 효과)
Elastica 블로그의 이미지 몇개를 가져와봤습니다. 여기에 쓰인 포스트 제목들은 항상 좋은 가독성을 보여줍니다. 그러나 배경이미지가 딱히 어두운 것도 아니고, 콘트라스트가 그렇게 강한것도 아니죠.
사진 도구중, 반사판은 사진의 빛을 살짝 부드럽게 만들어주는 역할을 합니다. 이 역시도 시각디자인 기술로서 활용될 수 있는 좋은 방식이죠. 이 블로그를 줌아웃해보면, 여기에 어떤 효과가 적용되었는지를 확실하게 알 수 있습니다.
박스주변에 어두운 그림자 처리가 된것이 보이시나요? 헤드라인쪽 말고도 상단의 메뉴 부분에도 어두운 그림자 처리가 되어있군요. 이런 방식은 자세히 들여다보지않으면 알아채기 힘든 경우가 많습니다. 그러니 꼭 알아두세요!
(사실 이 방식은 반사판이라기보다는 사진의 비네팅 기술에 더 가까운 방식입니다. 저자가 사진에 정통하지 않은건지, 다른 의미로 쓴건지는 확실치 않지만. 실제로도 비네팅이 맥락상 더 내용에 맞는듯 합니다)
규칙 5. 텍스트를 강조하거나, 눌러주는 방법 배우기
텍스트에 스타일을 적절히 부여하면, 텍스트들간의 대비를 확실하게 만들수 있습니다. 예를 들어서, 크기는 키우더라도, 더 얇은 텍스트 스타일같은게 그 좋은 예죠. 다만 텍스트의 스타일링은 UI 디자인에서 가장 어려운 부분 중 하나입니다. 특히나 텍스트 자체의 여러 속성에 대해 잘 알지 못하는 사람이라면 더욱더 그럴겁니다.
- 크기 (크거나, 작은 폰트크기)
- 색상 (색상대비가 크거나, 작음)
- 폰트 굵기 (굵거나, 얇음)
- 대문자, 소문자 차이
- 이탈릭 문자표기 여부
- 자간 (넓거나 좁게)
- 단어간 간격 (넓거나, 좁게)
일반적으론 색상을 단순하게 사용하고, 대 소문자를 구분하고, 간격만 잘 잡아줘도 충분합니다.
이외에도 추가적으로 텍스트를 위한 몇가지 옵션들이 있습니다.
- 텍스트에 밑줄표기 (텍스트 에디터의 밑줄, 그거 맞습니다)
- 텍스트 배경색상 부여하기 ( 자주 사용되는 방식은 아닙니다)
- 텍스트 중심부에 선긋기 ( 나무위키에서 자주쓰이는 삭제선 같은 그거 맞습니다.)
사실 텍스트 스타일링에서는 정확하게 '이게 가장 좋은 방식이다'라고 말할만한 것들이 많진 않습니다. 다만 '상대적으로' 이런 방식이 더 자주사용될 수 있다는 정도로 이야기를 해두겠습니다.
규칙 5. 텍스트를 강조하거나, 눌러주는 방법 배우기
텍스트 강조하기 / 눌러주기
이런 방식은 크게 두가지 타입으로 나눌 수 있습니다.
- 텍스트의 가시성을 더 증가시키는 방식 : 크고, 굵고, 대문자인 방식 등등
- 텍스트의 가시성을 떨어뜨리는 방식 : 작고, 대비가 적고, 자간이 적은 방식 등
마테리얼 디자인이라는 타이틀을 보면, '크기가 크고, 배경과 대비가 크며, 굉장히 두껍다는걸' 알 수 있죠.
푸터 부분의 아이템들을 보면, 상대적으로 H 로고에 비해 더 눌려있다는걸 알 수 있습니다. 텍스트들이 작고, 대비가 적으며, 더 얇은 굵기를 갖고있죠.
페이지 타이틀을 제외하고는 모두 상대적으로 눌려져있는 것이 낫습니다.
언제나 주인공은 한명이어야하니까요.
각 사이트들의 요소들은 서로 확실한 대비와 강조가 필요합니다. 이렇게 강조된 방식과, 눌러주는 두가지 방식을 함께 사용하면, 대부분의 문제는 해결할 수 있습니다. 그러나 꼭 필요한 경우가 있다면 - 그 두가지방법 외에도 다른 스타일이나, 요소를 추가하더라도 괜찮습니다.
bluehomes의 사이트를 보면, 커다란 타이틀을 갖고있지만. better 라는 텍스트는 소문자에, 이탤릭체가 적용된걸 알 수 있습니다. 그러나 이런 강조가 지나치면, 자칫 잘못해선 균형을 깨버릴 수도 있으니 주의해야합니다.
위의 시안에서는 텍스트의 크기와 색상, 그리고 배치를 통해 텍스트들을 구분해두었습니다. 그러나 숫자들을 잘 살펴보면, 굉장히 얇은 폰트를 사용해 눌려져있고, 심지어 낮은 대비를 가진 색상으로, 상단의 텍스트보다 덜 눈에 띤다는걸 알 수 있습니다.
게다가 숫자 하단의 작은 라벨들은 회색조에, 더 작고, 대신 대문자에 - 굵은 글씨로 사용되었죠. 이런 사용은 말 그대로 균형잡기의 문제입니다.
컨텐츠 매거진 사이트의 사례가 좋은 예시가 되겠군요.
- 가장 상단에 있는 타이틀 영역은 기본적으로 이탤릭체가 적용되어있지 않은 상태입니다. 게다가 굵은 본문과 함께 겹쳐져서, 더욱더 텍스트의 시인성이 낮아졌네요.
- by charlie Layd라는 저자명과, by 부분은 각각 다른 굵기가 사용되었습니다. 다만 눈에 거의 띠지도 않고, 오히려 복잡해 보일 뿐이죠.
- 게다가 하단에 쓰인 already out 이라는 텍스트는 모두 대문자인데다. 넉넉한 자간. 그리고 단어 간격까지 사용해서, 오히려 가장 눈에 띱니다.
규칙 5. 텍스트를 강조하거나, 눌러주는 방법 배우기
선택시 스타일 / 호버 스타일
선택된 요소들이나, 호버시의 효과에대한 스타일링은 비슷하면서도 좀더 어렵습니다. 일반적으로 폰트나 대소문자 변경, 굵기 변경은 - 해당 영역이 얼마나 넓고, 많은 텍스트를 갖고있는가에 따라 선택여부가 달라집니다.
- 텍스트 색상
- 배경색상
- 그림자효과
- 밑줄
- 미세한 애니메이션
확실한 방법을 하나 이야기해드리자면. 다른 색상이었던 요소를 하얀색으로 처리해주세요. 그리고 배경은 기존 색상보다 어둡게 처리하면, 매우 효과적인 대비가 됩니다.
텍스트 스타일링은 원래 쉬운 작업이 아닙니다. 그렇기때문에 지속적으로 시행착오를 겪을 수 밖에 없는 부분이죠. 그러니 뭔가가 이상해보인다면, 계속 수정을 통해 나아지게 만들어보세요.
규칙 6. 좋은 폰트만을 사용하자
좋은 폰트만 골라서 사용하세요. 이 부분에서는 사실 별다른 전략적인 내용이 없습니다. 그저 '쓸만한 폰트'들에 대해 이야기하고, 소개해드릴 뿐이에요. 필자인 저는 원래 좀 확고한 성격인지라, 깔끔하고, 단순한걸 좋아합니다. 장식적이지않고, 가독성이 좋은 픈트들을 쓰는것도 이런 이유에서죠. 또한 여기서 소개할 폰트들은 오로지 상업용으로 사용이 가능한 무료폰트들 뿐입니다. 그러니 걱정하지 마세요.
(이후의 내용은 텍스트들에 대한 특성을 좀 설명합니다마는. 크게 중요하지 않아서, 폰트의 목록과, 링크를 집중적으로 정리하였습니다.)
- Work Sans
얇은 폰트에서부터, 굵은 폰트까지, 범위가 꽤 넓은 폰트입니다.
실제 적용사례
폰트 다운로드 링크
https://fonts.google.com/specimen/Work+Sans
- Roboto
로보토체는 무료인데다, 여러 목적으로 사용하기에 좋은 폰트입니다. 게다가 여러 굵기를 지원합니다.
실제 적용사례
폰트 다운로드 링크
https://fonts.google.com/specimen/Roboto
- Montserrat
이탤릭체를 포함하지않고, 약간 기묘한 곡률을 갖고있는 폰트입니다. 게다가 약간 두꺼운 편입니다. 다만 유료 폰트인 Proxima Nova 폰트와 가장 비슷한 폰트로 - 대체가 가능하다고 소개하고있네요.
폰트 다운로드 링크
https://fonts.google.com/specimen/Montserrat
- Source Sans Pro
Oepnsans나 Lato 체를 대체할만한 폰트라고 소개합니다. 이 두 폰트들과 거의 비슷한 느낌이라고하는군요.
폰트 다운로드 링크
https://fonts.google.com/specimen/Source+Sans+Pro
- IBM Plex Sans
IBM이 발표한 자체 폰트입니다. Plex체라네요. Plex Serif와 Plex Mono와도 함께 사용될수있다고합니다.
https://fonts.google.com/specimen/IBM+Plex+Sans
- Feather Icons (페더 아이콘)
자주 사용되는 아이콘들을 폰트형태로 처리한 형식입니다. 유료 서비스인 폰트 어썸 (font Awesome)과 비슷하지만, 더 둥글게 처리되어있고, 무료라는점이 좀 차이가 있군요. 다만 가짓수는 더 적은 편인듯 합니다.
다운로드 링크
이외에도 추가적으로 몇개의 자료를 소개해두었습니다.
구글 웹폰트
http://hellohappy.org/beautiful-web-type/
폰트사이트인 폰트 스퀴럴
어도비 폰트 사이트
규칙 7. 예술적으로 배우고, 훔쳐내자
결국 좋은 자료를 봐야 좋은 결과물이 나오게됩니다. 그러니 좋은 자료를 찾을만한 출처가 필요하겠죠.
- 드리블
(위의 글에서는 필자 본인의 드리블도 추천하지만, 사실 이 저자는 디자인 실력이 별로 좋은 사람이 아니어서 제외합니다. 이외에 추가로 오픈해둔 다른 유명 작가들의 자료만을 첨부하겠습니다.)
https://dribbble.com/jamiesyke
https://dribbble.com/BalkanBrothers
https://dribbble.com/elegantseagulls
- Flat UI Pinboard
핀터레스트의 플랫 UI 핀보드네요. 자료수준은 그리 높아보이진 않는군요.
https://www.pinterest.co.kr/warmarc/flat-ui-design/
- Pttrns
앱 스크린샷들을 UI 명칭, 요소별로 모아둔 사이트입니다.
모든 디자이너들은 충분히 자신의 실력을 늘리기 전까지는 다른 것들을 보고 베끼는 작업을 게속해서 해나가게됩니다. 그러니 최선의 시안들을 따라만들고, 보고 배우기를 멈추지마세요.
결론
이 글이 UX 디자이너인 여러분들과, 개발자분들에게 도움이 되기를 바랍니다. 와이어프레임과 스케치를 통해 멋진 모작을 해보세요. 그리고 프로젝트를 더 나은 모습으로 만들어보세요. UI 디자인은 결코 이해하기 어려운 것들로 이루어져있지 않습니다. 그러니 관찰하고, 따라해보고, 반복을 통해 더 나은 결과를 만들어보세요. 이게 제가 UI 디자인을 배운 방식이고, 여전히 저는 초심자의 마음을 갖고 배워나가고있답니다.
-
(이후 저자는 자신의 UI 디자인 강의를 선전하는데... 글쎄요. 이 부분은 그냥 삭제하기로 하겠습니다. 이 저자가 디자이너로서 수준이 그리 높지 않은 사람이다보니, 저 역시도 추천하기가 꺼려지네요.)
역자의 말
해당 글은 기존에 색상 팔레트를 만드는 방법을 위해 번역했던 글의 저자입니다. 초심자들에게는 꽤 중요한 이야기를 쉽게쉽게해준다 했는데, 나중에 가서는 결국엔 '관찰'이야기를 꺼내네요. 핵심적인 UI의 단위나 시각단위 자체에 대한 분석까지는 진행하지 못하는듯 합니다. 그래도 초심자들에게는 꽤 도움이 되는 내용같네요.
이 내용은 UI 디자인 연구소 - 단톡방에 올려진 자료를 정리하여 만들어진 컨텐츠입니다.
저희 단톡방은 잡담이 불가능한 방입니다. 단톡방에 들어오시려는 분은 - 이용안내문을 꼭 확인해주세요!
단톡방 이용안내
https://brunch.co.kr/@clay1987/113
