UI 디자인 : 레이아웃 / 컬러 / 아이콘 / 서체 / 그래픽 / UGC

 

UI 디자인:  UI 디자이너가 알아야 할 공통 개념

 

- 레이아웃: 화면 크기, 텍스트, 이미지, 여백 등의 요소를 고려하여 앱 내 정보를 시각적으로 배치.

- 컬러: 색상과 관련된 디자인 원칙.

- 아이콘: 시각적 상징을 통해 정보를 전달하는 그래픽 요소.

- 타이포그래피: 글꼴과 글자의 배치와 스타일.

- 그래픽: 이미지와 시각적 요소.

- 썸존, 터치타깃: 사용자의 손가락 크기와 터치 범위를 고려한 디자인.

- 제스처: 사용자의 손동작을 이용한 인터페이스 조작.

- 네비게이션: 사용자가 앱 내에서 이동하는 경로와 방식.

- 상태: 앱의 다양한 상태 (로딩, 에러 등)에 대한 시각적 표시.

 Layout

- 화면 크기, 텍스트, 이미지, 여백 등을 고려하여 정보를 배치.

- Grid System: 요소를 질서 있게 배치하기 위한 그리드 규칙. 시각적 통일성을 제공.

  - 반응형 웹: 다양한 기기와 해상도에 맞춘 레이아웃. 12단 그리드.

  - 모바일 앱: 작은 화면에 맞춘 단조로운 레이아웃. 4단, 6단 그리드.

 

그리드 시스템을 사용하는 이유

- 일관된 배치: 시각적으로 일관된 화면을 제공.

- 작업 시간 단축: 예측 가능한 화면 구성으로 작업 효율성 증가.

- 예측 가능한 화면 구성: 사용자가 익숙해질 수 있는 디자인.

 

그리드 시스템 구성 요소

- Column: 4단 또는 6단 컬럼 (기본은 4단 추천, 다양한 레이아웃은 6단).

- Gutter: 컬럼 사이의 간격 (권장: 16).

- Margin: 외부 여백 (16 또는 20).

 

레이아웃 설계

- 다양한 해상도에서도 컬럼 수, 거터, 마진은 유지.

- 좁은 화면에서는 가로 스크롤 사용.

- 특이하고 복잡한 레이아웃도 예외적으로 적용 가능.

 

복잡한 UX/UI 디자인

- 레거시 파악: 쉽게 바꿀 수 없는 것들에 대한 이해.

- 정성적, 정량적 데이터를 통한 인사이트 도출.

- 비즈니스 전략에 따른 기능적 우선순위 고려.

 

기능과 콘텐츠, 에셋이 부족한 상황에서의 디자인

- 시장 반응 파악: 빠르게 대응.

- 기본적인 디자인 에셋 제작: 아이콘, 그래픽.

- 유지보수를 위한 시스템 구축.

 

우선순위를 고려한 레이아웃 디자인

- 사용자 변화 저항: 사용자 수가 많을수록 핵심 기능을 변경할 때 신중하게 접근.

 

 

UI 디자인 작업시 컬러가 중요한 이유.

1. 우선순위에 따른 컬러 표현 가능
2. 상황에 따른 컬러 사용(성공, 경고, 에러)
3. 유효성 검사 충족된 컬러 사용(접근성)

 

마법을 부리는 어울림의 비율 :

좋은 컬러를 사용하는 것보다 어떤 비율로 컬러를 사용하는지가 더 중요하다.

 

스타벅스 매장에 초록색은 얼마나 사용됐을까?

: 5%밖에 사용되지 않았다.

 

 

컬러 황금 비율

70:25:5 (기본색상:보조색상:주제색상)

- 컬러를 많이 사용할수록 지루해하고 뇌리에 기억시키기 어렵다.

- 이마트에 사용된 노랑도 5%내외다.

- 주제 색상의 사용 비율이 낮아도 사람들은 인식한다.

- 온라인에도 비슷한 사용자 경험.

 

*앱 UI내에서도 강조해야 할 곳에만 사용해서 이목을 끌 수 있다.

 

색의역할

- 브랜드 아이덴티티 각인

- 마케팅관점에서 클릭을 유도(할인정보)

- 방향을 제시 (구매하기 버튼)

 

 

UI 디자인에서의 컬러구성

Primary Color 주색

: UI 내에서 가장 메인으로 사용되는 색상으로 화면 내 클릭을 유도하는 버튼에 많이 사용. 주로 브랜드의 고유한 아이덴티티 색상을 사용함.

 

Secondary Color 보조색

: 메인 컬러보다 덜 중요한 요소에 사용되며, UI 콘텐츠에 사용함. 일반적으로 브랜드마다 1~5개 정도의 보조 색상이 있는데, UI 내에서는 너무 다양한 컬러를 사용하지 않도록 할 것.

 

Neutrals 중성색 >> 70이 이부분에 해당. 

: 흰색부터 검은색까지 회색 음영을 포함. 배경, 텍스트, 색상 등에 사용되며 UI 대부분에 사용됨. 텍스트에 활용될 때는 대비를 통한 접근성을 고려하여 사용할것.

 

Semantic Colors 시멘틱 컬러 (시스템 컬러)

: 목적을 전달하는 색상

: 성공, 경고, 에러, 정보의 상황에 따른 4가지 색상으로 구성.

 

Expended Palettes 확장 팔레트

: 다양한 사용사례를 충족하기 위한 확장형 색상 팔레트이며 Accessible Colors라고도 함

: Primary Color와 Secondary Color에 톤을 추가 및 결합해서 사용하는 방식

 

*Material Guide 보면서 공부할것(:

 

Material Design

 

 

Dynamic Color

: 앨범 이미지의 컬러를 불러와서 UI에 적용하는 다이나믹 컬러도 있다.

: 콘텐츠 기반 앱 서비스에서 충분히 고려할만한 요소다.

 

<컬러 사용시 주의할 점>

1. 인터렉션(터치) 가능한 요소인지
2. 불필요한 꾸밈 요소는 없는지 (꾸밈 요소 : 테두리 etc)
3. 버튼의 위계 구조에 맞게 사용했는지
4. 콘텐츠의 집중도를 떨어트리고 있지 않은지

 

- 콘텐츠 중심인 화면에서는 컬러가 대장이 되면 안 된다. 

- 사용자 입장에서는 콘텐츠에 몰입할 수 있는 환경이 주어지는게 중요하다.

- 컬러때문에 이탈을 한다면, 해당 비즈니스에 큰 도움이 되지 않을 것.

- 목적이 분명한 상황에선, 한 화면에 하나의 Primary 컬러만 사용할 것.

 

체크리스트
> 컬러 시스템이 잘 갖춰져 있는가?
> 컬러를 목적에 맞게 잘 사용했나?
> 컬러의 황금비율(70:25:5)을 감안했는지?
> 한 화면에 Primary Color를 한 곳에만 사용했나?
> 클릭이 안되는 요소에 컬러가 들어갔나?

 

 

아이콘

- 아이콘은 기호의 일종으로 하나의 이미졸 정보 전달에 유용한 시각 커뮤니케이션 방식 중 하나다.

 

아이콘은 언어다 - 스티븐 헬러

 

 

 

아이콘 핵심

1. 직관적인 아이콘
2. 통일된 스타일 아이콘
3. 단순한 아이콘
4. 아이콘 규격 및 시각보정

- 지나치게 단순화하거나 디자이너 본인만 아는 아이콘은 절대 사용 X

- 통일된 스타일로 아이콘 제작할 것.

(굵기, 라운드 통일 etc)

 

<다양한 스타일 아이콘>

Outline / Solid / Filled Line / Flat / Glassmorphism

 

- UI적으로 사용되는 UI 아이콘은 Outline과 Solid 권장.

- 두께에 따라 느낌도 달라짐.

1px / 1.5px / 2px

- 아이콘을 단순화하는 것도 중요.

- 어디에 어떻게 사용되는지를 고민하는게 중요.

- 작은 크기에서도 파악할 수 있는 형태에서 최소한으로 작업되어야 함.

 

아이콘 사이즈

아이콘 규격 : 24 x 24
안전한 영역 : 20 x 20

 

- 부피에 따른 느낌도 고려해야함*

- 면적으로 비슷하게 보이려면 약 112%

- 시각보정 적용된 Keyline

- 정육면체 / 원형 / 직육면체 가이드 참고할것.

키라인에 맞춘 아이콘사이즈

정육면체 : 18x18
원형 : 20x20
직육면체 : 20x16 (16x20)

 

체크리스트
> 아이콘이 직관적인가?
> 24사이즈에서도 잘 읽히는 형태인가?
> 전체적으로 스타일은 통일되어 보이나?
> 규격은 잘 맞춰 제작했나?

 

 

 

타이포그라피

 

 

Typography란?

: Type(활자) + Graphy(-술) 활자의 서체나 글자 배치 등의 구성 및 표현

 

타이포그래피 요소

> 서체종류(제목용&본문용, 고딕, 명조, 손글씨)

> 서체 크기와 두께

> 텍스트 컬러

 

서체에 따른 느낌 ex.
 
브런치 : 명조체 활용
Medium : Sans-serif 활용
네이버 : 고딕체 활용

 

 

 

OS별 전용 서체

iOS	Android
SF Pro	Roboto
New York	Noto Sans

 

 

 

앱 UI 디자인 작업 시 타이포그래피가 중요한 이유

1. 위계 구조 표현 (크기, 행간, 컬러)
2. 정보전달을 위한 가독성
3. 유효성 검사 충족된 크기, 대비 활용(접근성)

 

 

행간

- 제목에 대한 행간 : 125~150% 사이가 적당.

- 본문에 대한 행간 : 긴 근줄은 180~200% 적당.

 

 

가독성과 접근성

	AA등급	AAA등급
큰 텍스트 기준	3 : 1	4.5 : 1
본문 기준	4.5 : 1	7 : 1

 

 

최소 폰트 사이즈 12

- 단, 12는 큰 비중을 두지 않는 정보일때만 쓰기.

- 본문에선 14~16을 권장. iOS에서 기본값으로 제공하는 본문크기는 17. 

 

**UI 내 정보전달이 잘 되는지 우선순위에 따른 강약이 잘 조절되는지 확인할것.

이게 핵심이다(:

 

 

가독성

: 누구에게나 잘 읽히도록 UI 디자인할것.

 

체크리스트
> 25~30cm 떨어진 거리에서도 글이 충분히 잘 읽히는지
> 콘텐츠 내 정보의 위계 구조가 쉽게 읽히는지
> 서체 종류를 너무 다양하게 사용하진 않았는지
> 폰트 컬러와 배경과의 대비가 충분한지(최소#767676이상)
> 읽어야 할 글 주변에 시선을 빼앗는 요소는 없는지
> 움직임 여부, 주변광 조건 등 다양한 상황에도 충분히 읽히는지

 

 

다국어 지원

- 다국어 지원하는 앱 UI 작업시 다양한 국가의 문화를 이해해야 함.

- 국문과 다르게 번역시 긴 경우가 있어 레이아웃이 틀어질 수 있음 

- 다국어 작업시엔 폭자체를 타이트하게 작업하면 안 됨. 가장 긴 언어를 기준으로 작업할것!(:

 

ex. 아랍어의 경우 우측에서 좌측으로 읽고 사용

: 뒤로가기, 글줄 배치, 스와이프 위치 이런것들이 완전히 정반대다. 

 

각 나라별 표준이라 불리는 서체가 있음

: 우리 눈엔 이뻐보이지만 그들 눈에는 별로인 서체가 있을 것..ㅎㅎ. 외국인이 보기에 굴림체가 예쁠 수 있어도 우린 선호하지 않을 수 있음. 하하하ㅏ 이런것들 체크할 것.

 

UI 내 그래픽

 

- 그래픽은 단순 꾸밈 요소가 아니라 문맥을 더 이해하기 쉽게 도와준다.

 

그래픽 사용 여부의 차이 

> 시선유도(클릭유도)

> 위계구조 및 그룹핑

> 보조설명

 

UI내 정보를 어떤 형식으로 표현할지

 

섹션에 따른 그래픽 차이

배너 / 카테고리 / 콘텐츠

 

 

UI 내 그래픽 종류

 

1. 사진 이미지 

: 라이프 스타일, 스튜디오 촬영, 배경제거(누끼)

 

2. 2D그래픽 / 3D그래픽

: 2D는 주로 시스템 아이콘에 쓰이며, 직관적인 설명을 위해 문구와 함께 사용됨. 

: 3D는 상황 설명에 유리한 오브젝트를 통해 UI 완성도를 높일 때 사용됨. 주로 온보딩, Empty State, 프로모션, 배너 등에 활용.

 

3. 영상

: 촬영 영상, 3d 영상, 모션 그래픽, 움짤(gif)

: 요즘엔 영상을 많이 사용

: 단, 영상 활용 시 용량에 대한 최적화가 필요!

: 멋있다고 그냥 다 넣어버리면 앱이 과부화 걸리고 로딩속도 늘어날 것..ㅎㅎ

 

**플랫폼의 경우 UI 내에서 이미지가 큰 비중을 차지.

 

회사에서 직접 만드는 방식 

: 전문적인 촬영(제작) / 후보정 및 편집 / 고화질

 

유저가 직접 올리는 방식

: 일반인 촬영 / 무보정 / 저화질

 

플랫폼의 성향에 따라서 다르겠지만 일반적 플랫폼을 디자인할땐 이런 것들도 모두 고려해야 한다는 것!

 

 

UGC

: User-generated Contents

 

- 사용자가 직접 만드는 콘텐츠로, 앱 내에 본인이 찍은 사진, 글, 동영상 등을 말함.

- 플랫폼 성향에 따라 사용자가 직접 올리는 콘텐츠의 이미지 퀄이 다를 수 있다.

- 주제가 다양하고 올리는 사람의 연령층이 넓어 이미지의 퀄리티 보장이 어렵다면? > UI 내 이미지 영역을 좁게 가져가는 전략도 있다(:

 

ex. <콘텐츠 완성도를 위한 전략(에어비엔비)>

숙소 사진에 신경 쓴 Airbnb
: 초기에 일반 가정집에 잠자고 싶게 만들기 위해 전문 포토그래퍼를 고용해서 찍음.

“숙소 등록을 시도한 분들 중 40%정도가 사진을 올리는 단계에서 등록을 포기합니다. 오랫동안 성공적으로 호스팅을 해온 분들도 사진 퀄리티를 높이고 싶다고 이야기하곤 합니다.” - airbnb 블로그 

 

 

이미지 자체 제작

- UGC와 다르게 직접 운영하는 경우

 

장점:

> 높은 퀄리티 보장

> 통일화된 콘텐츠

 

단점:

> 콘텐츠 썸네일 제작 기간, 비용 높음

> UI 변경시 유지 보수 비용 높음

 

UI변경시 콘텐츠 운영 관점에서도 같이 고려해야한다.

 

 

스탠다드

: 가장 인기있고, 유저가 많은 앱 서비스 기준화.

 

다 비슷한 비율의 썸네일을 가지고 있다. 영화 포스터 같은 느낌. 특정 서비스만 갑자기 가로로 길게 바꿔버리면 그 용으로 맞게 또 컨텐츠를 제작해야함. 하지만 넷플릭스, 웨이브, 쿠팡플레이 동시에 업로드하는 컨텐츠 제작사의 경우 컨텐츠를 운영할 때마다 두번씩 만들어야 하는 단점이 있을 것. 여기서 가장 중요한 것은, 가장 인기있고, 유저가 많은 앱 서비스가 기준이 된다는 것이다. 따라서 어떤 서비스를 디자인할 때 해당 서비스의 1,2위가 되는 앱을 항상 살펴볼것!