[UX]디자인을 좋게 만드는 방법 > 디자이너팁

디자이너팁

디자인과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.

[UX]디자인을 좋게 만드는 방법 정보

[UX]디자인을 좋게 만드는 방법

본문

디자인을 좋게 만드는 방법

 

요약: 시각적이며 미적인 디자인은 일관된 타이포그래피를 사용하고, 명확한 계층을 정하고, 정교한 색상 팔레트를 활용하고, 그리드에 맞춰 정렬합니다.

 

사라 기본스, 켈리 고든 작성. 2021년 3월 7일

주제: 시각 디자인

 

글꼴, 색상, 정렬과 같은 시각적 세부사항은 편리한 경험을 만들고 브랜드 특성 (예: 친근감과 신뢰성) 을 표현합니다.

 

디자인을 살펴보고 좋은지 알아채는 것은 쉽습니다. 하지만 디자인이 왜 좋아 보이는지 정확히 알아내는 것은 훨씬 더 어렵습니다. 이 기사에서는 세가지 사용자 인터페이스 디자인을 분석하고, 매력적으로 만드는 시각 디자인 원리에 대해 설명합니다.

 

예제 1: 타이포그래피와 간격

 

첫번째 예제 사이트는 Medium.com 입니다. 이 디자인은 그리드, 공백, 타이포그래픽 시스템을 활용해서, 편안하면서도 멋진 독서 환경을 제공합니다.

 

1982461156_1624438081.986.png

 

[picture1.png]

 

미디엄의 디자인은 단순하지만, 매력적입니다. 신중한 타이포그래피 시스템, 간격과 일관된 왼쪽 정렬을 통해 사용자가 쉽게 읽을 수 있으며, 추가적인 정보는 시각적으로 결합해 사이드바에 표시됩니다.

 

1982461156_1624438092.6431.png

 

[picture2.png]

 

이 디자인에는 3열 그리드가 사용됩니다. 각 텍스트 요소는 그리드 선에 맞춰 정렬됩니다. 왼쪽 사이드바의 아이콘 사이에는 일정한 패딩 단위 (수직 공백을 구분하는 요소) 가 사용되며, 그룹을 구분하는 데 동일한 단위를 두 번 사용했습니다. 작은 대문자는 WRITED BY 헤드라인을 구분하며, 공간이 넉넉한 리딩은 디자인을 널찍하고 읽기 쉽게 해줍니다.

 

 

그리드 정렬. 먼저, 열 그리드 (위 이미지에 있는 분홍색 선) 가 있습니다. 열 그리드는 객체를 정렬하는 수직 고정선을 제공합니다. 사이드바 내용이 맨 왼쪽 그리드 선에 맞춰져 있기 때문에, 디자인이 선명해 보이고 사이드바 내용을 쉽게 검색할 수 있습니다. 이 기사의 텍스트도 열 그리드 선에 맞춰 왼쪽 정렬이 되었습니다.

 

디자인에서 열 그리드를 설정하고, 여러 페이지와 요소에 일관되게 정렬을 유지했습니다. 일관성 없는 정렬은 목적이 있습니다. 명확한 규칙을 정의하여 사용자를 안내하세요 (왼쪽 정렬은 스캔 가능성을 지원한다는 것을 명심하세요).

 

타이포그래피 조정. 미디엄은 동일한 글꼴 집합에서 다양한 유형 스타일 (작은 대문자, 굵게, 기울임, 밑줄) 과 약간의 색상 변경 (검은색 대 회색) 을 사용하여 다양한 컨텐츠 종류를 구별합니다. 너무 다양하면 일관성이 떨어지고 디자인이 무질서적으로 보일 수 있지만, 미디엄의 변형 글꼴은 일관되고 목적에 따라 적용됩니다. 예를 들어, WRITTEN BY의 작은 대문자는 섹션 제목을 나타냅니다. 이러한 변형은 디자인이 평평하게 느껴지지 않게 하지만, 여전히 나머지 텍스트와 일관되게 느껴집니다. 경험으로 봐서, 타이포그래피 시스템을 정하고 디자인에서 폰트를 1-2개로 제한했을 겁니다. 항상 동일한 종류의 변형 (기울임, 굵게, 작은 소문자)을 동일한 용도로 사용하세요 (웹페이지나 인터페이스의 영역에서도 마찬가지).

 

텍스트 행 사이에 추가 공간을 둡니다. 리딩은 문단에 있는 각 줄의 기준선 사이의 거리로, 기본 자간 (일반적으로 폰트 크기보다 2px 더 큼) 보다 약간 늘어납니다. 이 경우에 리딩은 글꼴 크기보다 4~6px 더 커서, 넓고 열려있는 텍스트 블록을 만드는데 도움이 됩니다. 표준 줄 간격을 줄이면 어센더와 디센더 사이의 충돌로 불편해지고 읽기가 힘들 정도로 빽뺵해집니다. 시각적으로 좁고 무겁게 느껴지는 텍스트 단락이 여러개 있으면, 리딩 기본값을 2px 이상 늘리는 것이 좋습니다.

 

커닝과 트래킹 조정. 디자이너는 특정한 모양의 결과로 글씨체 사이에 어색한 간격이 생기는 것을 고려해야 합니다. 커닝과 트래킹은 일반적으로 헤드라인처럼 공간이 더 분명한 큰 유형에 적용됩니다. 공백은 일반적으로 W, Y, V, T 처럼 각도를 이루는 문자 주위에 발생합니다. 예를 들어, 'What Exercise Looks Like in Japan'이라는 제목에서 문자 'W'와 'h' 사이의 간격을 약간 좁혔습니다. 글꼴 집합 대부분은 자동으로 커닝을 조정하지만 (유형 스타일에 기본 제공됨), 글자 사이의 공백이 눈에 띄는 큰 헤드라인이나 로고에 대한 커닝을 수동으로 조정하는 것을 고려해 보세요.

 

전체적으로, 이러한 디자인 세부사항은 디자인을 아름답게 하고, 웹페이지의 주요 목적을 달성해서 읽기 쉽게 합니다.

 

예제 2: 계층과 색상

 

두번째 예는 비타민 회사 Ritual.com 입니다. 이 디자인은 계층, 색상 및 이미지를 사용하여 매력적인 시각적 환경을 제공합니다.

 

1982461156_1624438101.9017.png

 

[picture3.png]

 

리추얼의 디자인은 페이지 계층을 만들기 위해 범위와 색상을 활용했습니다.

 

1982461156_1624438109.9568.png

 

[picture4.png]

 

이 디자인은 3개의 앵커라인을 중심으로 콘텐츠를 제작했습니다. 각 제품의 제목, 이미지, 설명과 버튼은 한 줄을 중심으로 배치됩니다. 색상 팔레트는 기본적인 파란색과 노란색으로 제한되어 있습니다. 이러한 유형의 팔레트는 내용(파란색)과 실행(노란색)을 분명하게 구별합니다.

 

 

색상 팔레트 개선. 색상 팔레트는 두가지 기본 색상인 파란색과 노란색으로 제한되며, 고전적인 상호보완 색상으로 구분됩니다. 선택된 특정 파란색과 노란색은 디자인의 매력에 기여합니다. 노란색은 너무 밝지 않고, 파란색은 흰색 배경에서 읽을 수 있을 만큼 어둡습니다. 노란색과 파란색이 기본 CMYK 색상 (청록색과 형광 노란색) 이었다면, 디자인이 정교하게 보이지 않았을 것입니다 (90년대 초반의 웹사이트 디자인과 비슷함). 디자인에 사용할 색조를 선택할 때, 색상 팔레트를 만들고 다양한 컬러들을 넣고 빼면서 수정을 반복하세요. 그러면 서로 잘 어울리는 색상을 확인할 수 있습니다. 형광색과 너무 비슷한 색은 피하세요. 원색에서 약간만 색상을 조정하면 색상 선택이 구체화됩니다. 예를 들어, 위의 스크린샷에서 기본 색상을 사용할 경우 디자인이 어떻게 보일지 보여주기 위해 아래처럼 변경했습니다.

 

1982461156_1624438118.7278.png

 

[picture5.png]

 

이렇게 변경된 이미지는 원래보다 채도가 높은 색상 팔레트 대신 주요 색상 팔레트를 사용할 경우, 디자인이 어떻게 보이는지 보여줍니다. 디자인이 세련되지 않고, 노란색 버튼도 읽기 어렵습니다.

 

 

저는 색상 팔레트 영감을 얻기 위해 어도비 컬러를 사용합니다. 다른 웹 사이트의 색상이 마음에 든다면, 그 이유를 정확히 짚어보세요. 색상 조합, 톤이나 채도 수준 중 어느 것인가요? 색상표를 몇가지 색으로 제한하면, 고려할 요소가 거의 없기 때문에 (따라서 산만함도 적어짐) 디자인에 초점을 맞출 수 있습니다. 그 디자인은 더 강하게 브랜드를 표현할 것입니다.

 

시각적 계층을 분명하게 정합니다. 시각적 계층 구조는 시선을 끌고 중요한 페이지 요소에 신호를 보냅니다. 예제에서는 먼저 가장 큰 타이포그래픽 요소인 "Essential for Women"에 시선을 집중시켜 사용자가 페이지 내용을 빠르고 간결하게 볼 수 있도록 합니다. 이제 저의 관심은 노란색 이미지와 Add to Cart 버튼으로 옮겨갑니다.

 

"Essential for Women"이라는 제목의 혼합된 타이포그래피에 주목하세요. 이 내용은 아마도 제품의 중요성과 여성 맞춤형이라는 사실을 강조하기 위해 노력하는 것 같습니다.

 

여러분의 디자인에서 유형 처리를 섞을 때는 다음 사항을 확인하세요:

 

1. 한 헤드라인에서 서로 다른 글꼴 처리는 최대 두 개까지만 사용합니다. (글꼴 처리란 각각 기울임 변형이 있는 일반, 기울임, 여러가지 무게의 굵기를 의미함). 가장 중요한 단어에는 굵기나 밑줄을 사용하고 보조 단어에는 기울임을 사용합니다. 적을수록 좋습니다. 예를 들어, "Women"에도 밑줄이 있다면 디자인이 조잡해 보일 수 있습니다. 굵게 처리를 한"Essential"과 경쟁하고 읽기를 방해할 것입니다.

 

2. 페이지들에서 스타일을 일관적으로 유지합니다. "Essential"은 이 제목에서 굵게 표시되므로, "Essentials for Men" 카테고리 랜딩 페이지에서 굵게 표시되어야 합니다.

 

제목을 읽은 후에, 대형 제품 이미지와 노란색 Add to Cart 버튼으로 시선이 옮겨갔습니다.

 

고화질 이미지를 사용하세요. 이미지에는 제품 설명에 중요한 정보를 추가할 수 있습니다. 제품으로 가는 주의를 분산시킬 수 있는 별도의 잡다한 것이 없는, 사진의 직접적인 스타일은 전체적인 시각적 디자인에도 영향을 미칩니다. 이미지 배경은 표시되는 제품 카드의 배경과 매끄럽게 조화를 이루며 페이지를 복잡하게 합니다. 디자인에 있는 사진은 장식용이 아니며 사용자가 제품이나 컨셉을 시각적으로 이해하는 데 도움을 줍니다. 디자인을 개선하려면, 배경색을 주변 공간의 배경색과 일치시켜 나머지 디자인과 이미지가 혼합되게 합니다.

 

예제 3: 일관성

 

세번째 예제는 스포티파이 모바일 앱입니다. 이 디자인은 시각적으로 일관성을 유지하며 앱 전체에서 응집력 있는 청취 경험을 줍니다.

 

1982461156_1624438126.8596.png

 

[picture6.png]

 

스포티파이 앱은 사용자 지정 아트웍, 색상 및 간격을 일관성 있게 사용해서, 앱의 여러 영역에서 명확성을 유지합니다.

 

1982461156_1624438133.4779.png

 

[picture7.png]

 

시각적인 일관성은 스포티파이의 세련된 모습에 가장 큰 영향을 미칩니다. 장르 아트웍 뿐만 아니라 정렬, 타이포그래피, 패딩에도 일관성이 있습니다. 이 일관성을 위반한 한가지 예외는 인기 재생목록과 아래 타일 사이의 간격(중앙 화면)입니다. 이 간격은 클래식 록과 아래 타일 사이의 간격(오른쪽 화면)과 일치하지 않습니다. 두 장소에도 간격이 일관적인게 이상적입니다. 간격은 명확하게 그룹을 형성하지만, 장르에 따라 색상이 다릅니다.

 

 

일관적인 시각적 처리. 시각적 요소가 일관되지 않거나 돌발적으로 사용될 경우, 디자인은 비전문적으로 보이고 세련되지 않습니다. 스포트파이에서는 많은 시각적 요소가 앱의 다양한 영역에서 일관성을 유지합니다. 첫째, 모든 앱 화면에서 열 사이 간격(왼쪽과 오른쪽 거터)이 모두 동일합니다. 장르 안에서 상위 그리드 라인(화면 상단의 헤더 정렬과 배치)과 타이포그래픽 처리는 일관성을 유지합니다. 장르마다 그라데이션 색상이 달라지지만, 일관된 색조와 채도를 유지합니다.

 

둘째, 각 카테고리에는 사용자가 지정한 아트웍 타일이 있습니다. 각 카테고리에는 특정 색상과 그래픽이 있지만, 타일은 레이아웃과 계층 구조에서 일관성이 있습니다. 예를 들어, 각 카테고리 이름(예: 검색 화면의 팝, 락, 교육)은 각 타일에서 동일한 위치에 있습니다. 타일 안의 이미지(예: 앨범 표지)는 오른쪽에 일관되게 있으며, 타일에서 빠져나왔습니다. 이런 세부사항들은 전체적인 디자인이 응집력과 세련됨을 느끼도록 합니다.

 

여러분의 디자인에서는 시각적 시스템을 만들고 다양한 경험 영역에서 지켜야 합니다. 예를 들어, 웹페이지 주변의 요소 간격을 같거나 여러 개의 같은 단위로 설정합니다 (예: 제목과 본문 사이의 기본 간격이 5px인 경우, 두개의 기본 간격 단위를 사용하여 서로 다른 섹션을 분리할 수 있습니다).

 

그룹을 정할 공간을 둡니다. 근접성이나 요소 주변 간격은 그룹을 정하는 데 도움이 됩니다. 이 예제에서, 상위 장르(팝과 락)에 있는 콘텐츠 타일 사이의 최소 공간은 이들이 함께 속해 있음을 나타내며, 반면 교육 과 트루 크라임은 인기 팟캐스트 카테고리에 속합니다. 디자인에서 그룹화를 정할 때는, 헤더와 컨텐츠 사이의 공간과 그룹 간의 공간을 더 적게 줄입니다.

 

 

결론

 

디자인은 우연히 좋아 보이지 않습니다. 디자인의 각 결정은 의도적으로 이루어져야 하며, 시각 디자인 시스템으로 지원하는게 이상적입니다. 디자인이 좋아 보이는지 아닌지를 설명하는 것은, 단 한가지뿐이지만, 몇가지 원칙을 따르면 훌륭한 디자인이 될 가능성을 높입니다.

 

- 타이포그래피 (기타 그래픽 요소)를 그리드에 정렬합니다. 각 요소를 그리드 시스템 선에 고정합니다.

 

- 계층 구조와 색상 팔레트를 분명하게 정합니다. 디자인에 가장 중요한 것이 무엇인지 결정하고, 사용자가 먼저 볼 수 있도록 특정 시각적 처리(크기, 색상, 배치)를 계획적으로 적용합니다.

 

- 일관성을 유지합니다. 시각적 규칙을 분명하게 정하고 디자인 전반에 걸쳐 일관되게 적용합니다.

 

이런 디자인 원칙들을 적용해서, 디자인을 아름답게 하고 사용 가능한 경험에 기여하세요.

 

출처: 닐슨 노먼 그룹

추천
6

댓글 6개

전체 352
디자이너팁 내용 검색

회원로그인

진행중 포인트경매

  1. 참여11 회 시작21.10.21 13:00 종료21.10.28 13:00
(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIR SOFT