TIL_5W3D_UI 디자인 핵심 원리
사용자 이해하기
디자인의 목적은 사용자 경험 향상과 참여를 유도하는 것임
참여 유도를 위해서는 지속적 제품에 대한 긍정적 인상과 신뢰감
사용자가 원하는 정보를 쉽게 탐색할 수 있어야 하며, 제품이나 서비스 사용 시 어려움이 없어야 함
긍정적 경험들이 쌓여야 비로소 사용자는 우리 서비스가 좋은 디자인이라고 느끼기 시작함
모든 의사결정은 사용자 니즈와 기대를 중심으로 이루어져야 함
직관적인 디자인
1) 사용자의 행동 유도
버튼은 사용자 행동을 유도할 수 있는 중요한 인터페이스 요소임
배경색 혹은 콘텐츠와 대비 컬러를 사용해 버튼 강조
흐름에 맞게 필요한 위치에 배치해 쉽게 사용할 수 있어야 함
링크는 더 자세한 정보를 확인할 수 있도록 연결하는 중요한 요소
일반적으로 웹에서 파란색 링크를 나타냄
링크된 텍스트에 밑줄을 넣어 클릭이 가능함을 전달
2) 정보를 시각적으로 표현
픽토그램
사용자가 정보를 더 쉽고 빠르게 이해를 위해 시각적 디자인 할 수 있음
텍스트로 되어있는 정보를 픽토그램이나 아이콘을 활용해 사용자 이해를 돕고 핵심 정보 강조하여 빠르게 전달할 수 있음
아이콘
문화적, 언어적 차이를 넘어 사용자가 즉각적으로 이해할 수 있음
의미와 기능을 즉시 이해하고 수행할 수 있음
3) 직관적인 디자인 핵심 요소
대비 높은 색상 조합
배경과 텍스트 색상 대비하여 강조
간단한 레이아웃
정보 구성과 디자인 요소 적절히 배치해 사용자가 이해하기 쉬운 레이아웃 구조를 만듦
유연한 인터페이스
사용자가 원하는 요구사항을 편하게 설정할 수 있도록 설정 기능 제공
아이콘 및 픽토그램 이미지 사용
누구나 이해하기 쉬운 아이콘과 이미지는 사용자의 상호작용을 쉽게 도와줌
일관된 디자인
제품 사용 시 예측을 가능하게 하며, 일관된 상호작용 경험으로 사용자의 불확실성을 줄이고 신뢰감 전달
이러한 경험은 새로운 인터페이스를 사용 시 빠르게 적응하고 이해할 수 있도록 도와줌
일관된 사용자 경험
신뢰성 향상
제품의 인터페이스를 숙지, 지속적으로 긍정적 경험을 하게 되면 제품을 신뢰하게 됨
사용자가 원하는 정보를 탐색하고 과업을 수행 시 만족도를 향상시킬 수 있음
업무 효율성 증대
일관된 경험을 통해 업무 시간 단축 및 빠른 결과물을 만들어 낼 수 있음
새로운 기능 업데이트되어도 익숙한 상호작용으로 빠르게 이해하고 적응할 수 있음
일관된 디자인 핵심 요소
디자인 시스템 구축
컬러, 타이포그래피, 아이콘, 버튼 등 시작적 요소와 레이아웃, 그리드, UX 라이팅, 인터랙션, 브랜드 메세지 등 요소의 기준을 명확히 하여 일관된 디자인을 할 수 있음
사용자 피드백
사용자로부터 지속적 피드백을 받아 분석 후 이를 디자인에 적용해 사용자에게 친숙하고 일관된 경험 전달할 수 있음
가독성을 고려한 디자인
여백 활용
화이트 스페이스라고도 하며, 화면에서 비어있는 공간을 의미
여백을 적절히 활용 시 가독성을 높일 수 있음
깔끔하고 정돈된 느낌을 줄 수 있으며, 중요 요소를 더 돋보이게 강조할 수 있음
너무 많은 요소로 여백을 채우려고 X, 여백도 디자인 요소 중 하나
콘텐츠 그룹화
상대적으로 가까이 있는 요소들은 하나의 그룹처럼 보임
비슷한 의미, 주제를 갖고 있는 콘텐츠를 그룹화하여, 사용자의 편의성을 높일 수 있음
크기와 비율
요소의 중요도에 따라 크기를 조절해 배치하면 자연스럽게 시선을 끌 수 있음
중요도에 따라 요소 크기와 비율 조정해 콘텐츠 계층을 구성할 수 있음
모든 요소 중요도는 같지 않은데 더 중요한 요소는 강조해 눈에 띄게 표시해 중요도에 따라 정보를 확인할 수 있어야 함
계층 구조
사용자가 중요한 정보를 빠르고 쉽게 확인할 수 있도록 시각적 계층 구조를 설정
이를 위해 텍스트 크기, 컬러, 위치를 활용할 수 있음
명확한 피드백 제공
즉각적인 반응 제공
사용자의 행동에 따라 시각적 또는 청각적 피드백을 제공해 사용자가 다음 행동을 쉽게 결정할 수 있도록 도와줌
파일 업로드 후 진행사항 즉시 전달해 사용자 불안을 줄이고 이해를 높임
시각적 변화
입력 필드에 정보를 모두 입력했거나 필요 조건이 충족 되었을 때 시각적 변화를 주어 사용자가 인지할 수 있도록 함
접근성을 고려한 디자인
모든 사용자가 디자인에 접근할 수 있도록 하여 정보의 평등한 사용 보장
다양한 사용자층이 제품 이용할 수 있게 되므로 비즈니스 기회 확장
텍스트 + 아이콘
택스트와 아이콘 함께 사용 시 명확한 정보 전달 할 수 있음
입력필드
입력필드에서 오류 상태 표현 시 텍스트로 정보 전달할 수 있음
텍스트 콘텐츠
텍스트 콘텐츠 안에 링크나 버튼을 분리해 작업해야 스크린 리더가 위치 파악하기 쉬워짐
텍스트 + 라인(Bar)
테두리 또는 라인을 활용해 형태적 차이를 표현할 수 있음
명도 대비
명도 대비는 색상과 색상 간의 차이를 나타냄
요소 사이의 색상 대비가 충분해야 저시력자도 원활히 서비스를 이용할 수 있음
저시력자, 고령자도 쉽게 인식할 수 있도록 텍스트와 배경의 명도 대비는 4.5:1 이상이어야 함
텍스트와 배경색의 명도 대비는 WCAG 권장 사항에 따라 다음과 같음
접근성을 위한 디자인 전략
명확한 텍스트와 디자인 요소 : 텍스트, 버튼, 링크는 명확하게 구분하기 쉬워야 함
명도 대비 : 텍스트와 배경 색상 간의 충분한 대비를 제공해 시각적 접근성을 높여야 함
키보드 내비게이션 : 사용자가 마우스 없이 키보드만으로 웹사이트 모든 기능을 사용할 수 있게 설계
스크린 리더 : 스크린 리더가 올바르게 읽힐 수 있도록 설계
사용자가 경험을 향상 시키는 방법
직관적인 네비게이션
명확한 메뉴 구조
예상 가능한 카테고리
사용자가 모든 페이지를 방문하지 않아도 어디에 어떤 정보가 있는지 예측할 수 있게 하는 것은 중요함
일관된 메뉴 구조
모든 페이지에 동일한 메뉴 구조를 유지해야 사용자가 방향을 잃지 않고 쉽게 찾을 수 있음
메뉴 depth 최소화
사용자가 3번 이상 클릭하지 않고도 원하는 페이지에 도달할 수 있어야 함
비주얼 요소 활용
픽토그램, 아이콘 사용
명확한 의미를 가진 픽토그램, 아이콘 활용해 사용자에게 빠르게 정보 전달할 수 있음
활성화 효과
시용중인 메뉴를 강조해 사용자에게 현재 위치를 알려줄 수 있어야 함
다양한 디바이스 지원
반응형 디자인
디바이스 최적화
desktop, tablet, mobile 다양한 디바이스에 최적화된 디자인을 제공해야 함
그리드 시스템
다양한 해상도에 최적화된 레이아웃을 구현하기 위해 그리드 시스템을 적용해 관련된 디자인을 제공할 수 있음
터치 스크린 최적화
손가락으로 쉽게 누를 수 있도록 터치 영역 확보, 요소 간 적절한 간격을 유지하는 것이 중요
버튼, 아이콘 요소의 최소 사이즈를 확인하고 적용해 주시는 것이 좋음
사용자의 피드백 반영
사용자의 피드백을 정기적으로 수집하고 검토해 사용자 경험을 개선하기 위해 노력해야 함
피드백 수집 방법
사용자 VOC 분석
사용자의 VOC를 통해 반복적으로 발생하는 사용자 문제를 발견하고 해결할 수 있음
VOC는 Voice of Customer의 약자로 고객의 소리
사용자 설문 조사
사용자의 만족도나 서비스에 대한 경험을 빠르게 수집해 데이터화할 수 있음
사용자 인터뷰
사용자의 생각과 행동을 직접 확인하면서 사용자가 느끼는 불편함과 니즈가 무엇인지 파악할 수 있음
HW. 숙제
Vigloo
사용자 행동 유도
Vigloo는 영상 콘텐츠 위주의 앱인데 유료 결제 즉, 충전이 중요하며
배경색과 대비됨으로 충전을 유도함
정보를 시각적으로 표현
픽토그램으로 사용자 이해와 정보를 강조하여 출첵을 하면 포인트를 준다는 점과, 어떻게 하면 포인트를 얻기 쉬운지에 대해 한눈에 파악이 가능함
간단한 레이아웃
추천하고 싶은 영상과 인기 급상승으로 나누어 이쪽 레이아웃은 이러한 정보가 구성되어 있구나 하며 사용자가 이해하기 쉬운 레이아웃 구조를 지니고 있음
쿠팡플레이
다양한 디바이스 간의 일관성
쿠팡플레이는 핸드폰으로 이용하든 desktop으로 이용하든 티비로 연결해서 보든 다양한 디바이스를 자유롭게 이동해도 일괄적인 디자인으로 서비스 이용 시 편리한 경험을 할 수 있음
디자인 시스템 구축
쿠팡플레이는 모든 디바이스에서 일관된 형태의 레이아웃과 디자인을 유지하고 있음
시몬스
여백 활용 & 계층 구조
화이트 스페이스를 중간에 줌으로써 중요한 요소인 침대 이미지를 더 돋보이게 강조함
많은 요소를 넣지 않고 화이트 스페이스를 줌으로 써 시선의 흐름을 위에서 아래로 자연스럽게 유도해 침대 정보를 읽게 만듦
디자인 카타
오늘의 토픽 - PC에서 상세 정보 보기, 어떤 방식이 다량의 정보를 탐색할 때 편하신가요?
선택 B안
B안의 경우 카드 앞의 내용도 함께 확인할 수 있으며, 자주 쓰이는 익숙한 방식이라 고르게 됨
PC에서 카드 뒤집기 방식이 보편화되지 않았고 카드를 뒤집으면 앞면을 다시 확인하려면 뒤집어야 하는 불편함이 발생할 수 있음
또한 사용자들은 제이콥의 법칙 사용자는 새로운 제품 사용시에도 자신이 이미 알고 있는 익숙한 제품과 같은 방식으로 작동하길 원한다는 점
컬러는 사람이 어떤 사물이나 물체를 볼 때 가장 먼저 인지하는 요소이자 가장 오래 기억에 남는 요소
브랜드 컬러는 사용자에게 브랜드 이미지를 지속적 전달해 기억하고 인지할 수 있는 중요한 역할을 함
컬러의 역할
중요한 정보 강조
계층 구조
요소의 중요도에 따라 계층구조로 표현할 수 있으며 타이포그래피와 함께 표현하면 더 효과적으로 표현할 수 있음
강조
채도, 명조를 적용해 특정 정보를 강조할 수 있음
강조 영역은 화면에 최소화해 사용해야, 강조 영역을 더 강조할 수 있음
많은 영역 강조 시 시각적으로 복잡해 보여 사용성을 저하시킴
사용자의 행동 유도
컬러를 넣어 사용자가 누르고 싶게 만듦
강조하고 싶은 주 요소에 브랜드 컬러 적용해 사용자 행동 유도
보조 요소에 채도가 낮은 그레이 컬러 사용해 상대적으로 중요도를 낮춤
컬러를 넣어 의미를 전달
녹색은 시작, 출발을 빨간색은 종료, 도착을 의미
상태
텍스트 필드 입력
버튼의 활성화와 비활성화
토글
탭
브랜드 아이덴티티
브랜드 이미지를 떠오르게 하는 강력한 시각적 전달 요소
브랜드 컬러는 브랜드가 가지고 있는 이미지, 가치관, 성향을 담을 수 있는 대표 컬러로 선정
지속적으로 사용자에게 전달하여 브랜드에 대한 이미지를 만들어 감
브랜드를 대표하는 컬러
넷플릭스 당근 카카오 네이버 삼성 마켓컬리
넷플릭스 자극적인 매력적 유혹적 퇴폐적
당근 친근한 단순한 활기찬
카카오톡 친근한 상냥한 밝은
네이버 신뢰 중립적인 자연친화적인
삼성 신뢰 정직한 차분한
마켓컬리 차분한 조용한 고급진
넷플릭스 우리의 열정은 끝없이 계속될 거야
당근 친구같이 편안하게 다가갈게
카카오 너도 나도 알고 싶을 걸 그만큼 활기차
네이버 자연친화적으로 일상에 스며들 걸
삼성 정직하고 차분해
마켓컬리 고급스러운 것 같지 않아?
브랜드가 전달하고자 하는 메세지
넷플릭스 영화관의 안락의자를 연상시키며, 에너지, 힘, 열정적인 이미지 전달
당근 당신 근처의 줄인 말인 ‘당근’이란 키워드에서 주황색을 선정하여 친근하고 포근한 이미지 전달
카카오 밝고 경쾌함을 의미하는 노란색으로 커뮤니케이션이 주는 즐거움을 전달
네이버 녹색을 사용하여 신뢰와 중립의 이미지를 전달
삼성 정직의 대명사 파란색을 사용하여 강하고 신뢰할 수 있는 이미지 전달
마켓컬리 자신감과 고급스러움을 의미하는 보라색을 사용하여 업계와 차별화된 프리미엄 서비스를 만들겠다라는 강한 메세지를 전달
컬러 비율
5%는 주색(브랜드 컬러), 25% 보조색, 70% 배경색으로 사용
반드시 5:25:70의 비율을 맞춰야 하는 것은 아님
디자인 목적, 레이아웃, 범위에 따라 주색, 보조색, 배경색의 배색 비율을 정할 수 있음
비율에 따라 디자인 느낌이 달라질 수 있기 때문에 제품이나 서비스 성격, 컨셉에 따라 적절한 비율을 찾아야 함
UI 컬러 구성
Primary color 주색이라고 부르며, UI에서 가장 강조해야 하는 영역, 사용자의 행동을 유도할 때 사용
강조와 사용자 행동 유도
CTA 버튼 강조하여 행동 유도할 때
로그인, 회원가입 유도할 때
중요한 정보를 강조할 때
Secondary color 보조색이라고도 부르며, Primary color를 보완해 주면서 조화를 이루는 역할
Neutral color 중립의 컬러로 UI 디자인에서 지원 역할을 함, 보통 텍스트와 배경에 사용
흰색에서 검은색까지 회색의 음영을 포함
UI 디자인에서 70%를 차지할 만큼 가장 많은 영역에 사용
Semantic color 시스템 컬러, UI 디자인에서 현재 시스템의 상태를 사용자에게 알려주며 상호작용하고 있다는 것을 보여주는 역할
시스템 컬러는 UNESCO 도로 표지판 기준으로 표준화된 컬러를 도입해 사용하고 있음
빨강, 노랑, 녹색은 세계적으로 일관된 의미로 사용하며, 공공시설 교통 관련 신호등에도 동일하게 적용되어 사용됨
이러한 색 표준은 UI 디자인에도 동일하게 활용해 시스템 상태를 알려줌
배경과 컬러
다크/라이트 모드에 따라 배경색이 전환되므로, 각 모드에 맞는 컬러를 사용해야 함
형태와 컬러
면적이 넓은 배경과 면적이 좁은 텍스트와 같이 형태에 따라 컬러는 영향
배경에 사용된 경우 면적이 넓기 때문에 가독성이 높은데, 텍스트는 상대적으로 면적이 좁아 가독성이 낮음
형태에 따라 색상 코드값을 알맞게 적용해 가독성을 높여야 함
과도한 컬러 사용 피하기
UI내 사용자가 집중할 수 있도록 불필요한 컬러 사용 지양
사용자 행동 유도, 정보를 강조해야 하는 경우 기준에 맞는 컬러를 사용해야 함
텍스트와 배경 컬러 대비를 높여 가독성 확보
OS별 시스템 폰트
iOS, Android 시스템 폰트
시스템 폰트의 장점
국문, 영문, 일문, 한자 등 다국어를 지원
다양한 사이즈와 굵기 제공
폰트 경량화로 용량이 라이트
무료
상업용으로 사용 가능
웹폰트
웹 페이지에서 사용 가능한 폰트를 온라인에서 다운로드하여 쓸 수 있는 폰트
사용자가 해당 폰트를 시스템에 설치하지 않아도 사용 가능
모든 플랫폼과 브라우저에서 일관된 디자인 경험할 수 있음
대표적인 웹폰트로 프리텐다드, 스포카 한 산스, 슈트를 사용
시스템 폰트와 동일한 장점
Serif
글자 획의 시작이나 끝부분이 도출된 형태의 글꼴을 세리프체라고 함
한글에서 명조나 바탕체가 세리프체에 속함
글자 획의 굵기가 가로와 세로가 다르고, 책이나 신문과 같은 인쇄물에 주로 사용
Sans-Serif
글자 획의 끝부분이 돌출되지 않은 글씨체
한글의 고딕체가 산세리프에 속함
Sans-Serif는 Serif가 없다는 뜻으로 글자의 획 굵기가 일정하고 끝부분에 삐침이나 도출 없이 반듯한 형태를 뜻함
폰트 사이즈
사용자를 고려한 폰트 사이즈
사용자의 상활, 환경을 고려해 폰트 사이즈를 설정
디바이스 화면으로 보이는 실제 사이즈 고려
모든 디자인은 해당 디바이스 스크린에서 확인해 줘야 함
모바일 디자인은 모바일, TV 디자인은 TV, Watch 디자인은 Watch 디바이스에서 꼭 확인
폰트 크기와 컬러, 여백 등 모든 요소들이 해당 디바이스에서 최적화되어 잘 보이는지 확인 필요
시각적 계층 구조
타이포그래피 활용 방법
텍스트의 사이즈 변화
텍스트의 두께 변화
텍스트의 컬러 변화
자간과 행간 조정
명확한 계층
계층의 구조를 명확히 해 텍스트 가독성을 높이고 시선의 흐름을 위에서 아래로 자연스럽게 만듦
타이틀 > 서브 타이틀 > 본문을 활용해 계층 구조를 만들 수 있으며,
타이틀(제목)
목적과 메시지를 명확히 전달해야 하기 때문에 폰트 사이즈, 두께, 컬러를 활용해 가장 잘 보이도록 강조
위에서 아래로 시선 유도하며 본문과 서브 타이틀 상단으로 위치
서브 타이틀(소제목)
타이틀 보다는 작은 사이즈로, 본문보다는 큰 사이즈로 제작
타이틀과 본문 사이에 위치하므로 위아래 여백을 적절하게 설정해 계층 구조를 만듦
본문
본문 타이틀, 서브 타이틀 보다 사이즈는 작게 설정해야 함
컬러도 타이틀 서브 타이틀 보다 강조되지 않게 해야 함
타이틀, 서브 타이틀, 본문 텍스트를 모두 강조하지 않아야 하며, 모든 텍스트를 강조 시 계층 구조가 무너지고 중요하게 전달해야 할 정보를 강조할 수 없게 됨
폰트 사이즈는 확실하게 차이를 두는 것이 좋으며, 1.5-2배의 차이
예를 들어, 본문에 16px을 적용했다면 서브 타이틀은 32px를 적용할 수 있음
일관된 폰트 스타일
폰트 종류
브랜드 이미지와 의미를 전달할 수 있는 폰트를 선택
하나의 제품과 서비스에는 동일한 폰트로 통일해 사용하는 것이 좋음
폰트 종류가 적을 수로 일관된 디자인을 할 수 있으며, 유지 보수 용이
폰트에 차이를 두고 싶다면 같은 폰트 사이즈와 두께를 활용하는 방법이 있음
폰트 종류 최소화
폰트 사이즈
사용자가 읽기 편하도록 적절히 크기 설정
하나의 화면 디자인에 폰트 크기는 목적에 맞게 최소화
본문 텍스트는 14-18 권장
사용자가 정보를 편히 읽도록 적절한 사이즈로 작업하는 것이 중요
폰트 컬러
목적에 맞게 적절한 컬러 사용이 좋음
제품 UI 디자인 가이드 기준과 동일한 폰트 컬러 적용해 일관성 유지
여백과 정렬
자간과 행간
자간은 글자와 글자 사이의 간격을 말하며, 꼭 필요의 경우에만 설정
설정에 따라 가독성에 큰 영향
글자가 커질수록 자간이 멀어져 보이므로, 자간을 줄여주는 것이 좋고 글자가 작아질수록 식별이 어려워져 자간을 늘려주는 것이 좋음
웹에서 커닝 작업을 하진 않음
행간은 글줄과 글줄 사이의 간격을 말하며, 그 줄의 길이에 따라 행간을 적절하게 설정 시 가독성을 높일 수 있음
타이틀, 서브 타이틀, 본문과 같이 사용되는 용도에 따라 행간이 달라짐
보통 타이틀, 서브 타이틀에는 1.2~1.5배를 설정하고, 본문에는 1.6~2.0배를 설정함
커닝은 글자 모양에 따라 간격을 조절, 글자 간격을 시각적으로 균형있게 조절한다는 뜻임
자간은 모든 글자에 동일한 수치값 적용, 커닝은 글자 모양에 따라 수치값을 다르게 적용해 시각적으로 보정하는 것
브랜드 아이덴티티
브랜드 이미지를 떠오르게 하거나 전달하는 강력한 시각적 전달 요소
현대카드
국내 최초 기업 전용서체 YouandiNewKr 폰트를 제작해 명확하고 독보적인 브랜드 아이덴티티를 만들어옴
온오프라인, 카드 디자인 등 다양한 영역에 일관되게 폰트 활용
폰트를 지속적으로 유지 및 발전시키는 것이 중요, 현대카드 폰트는 2005년 출시인데도 지금까지 꾸준히 잘 활용
오래 지속되어 온 만큼 폰트에는 브랜드 다양한 이미지와 메세지가 담김
배달의 민족
2012년 배달의 민족은 사용자에게 브랜드를 알리기 위해 무료 폰트를 배포함
전용 폰트를 활용해 간접적으로 브랜드와 기업 이미지를 효과적으로 전파함
배달의 민족은 서체를 기반으로 진행한 마케팅은 큰 인기로 브랜드 아이덴티티를 확실하게 각인 시킴
한나체를 시작으로 한나는 열한살체, 주아체, 도현체, 을지로체, 을지로 10년 후 체 등 다양한 폰트를 지속적으로 개발해 나감
아이콘의 역할
명확한 의미 전달
문화, 나이, 배경 제한 없이 누구나에게 일관된 의미 전달
텍스트 없이도 쉽게 의미 전달
사용자가 해석하지 않아도 의미를 바로 떠올릴 수 있음
좁은 공간, 짧은 시간 내 의미 전달
브랜드 아이덴티티
아이콘은 시각적 매력을 더해 디자인을 더 풍부하게 만듦
브랜드 성격, 이미지, 의미를 반영한 아이콘은 사용자 기억에 오래 남음
맥도날드의 'M'은 멀리서도 한눈에 알아볼 수 있음
일관된 아이콘
아이콘 스타일에는 Outlined, Filled, Colored, Image와 같은 다양한 스타일이 있음
Outlined와 Filled는 기본적인 형태로 가장 많이 사용
Colored는 사용자의 행동에 피드백을 주거나 행동을 유도할 때 사용
Image는 높은 주목도가 필요할 때 주로 사용
Stroke 두께
Stroke 두께에 따라 아이콘 분위기가 많이 달라짐
두께가 얇은 아이콘은 가벼운 느낌을, 두꺼운 아이콘은 무거운 느낌을 줌
UI 디자인 전체 컨셉에 영향을 미치기 때문에 동일한 두께로 디자인하는 것이 좋음
두께가 두꺼워 질 수록 표현에 제한, 세밀한 작업이 필요한 경우 얇은 두께를 사용하면 좋음
Corner radius(곡률)
곡률이란 모서리의 굴림정도를 말하며, 아이콘 통일성을 위해 곡률의 규칙을 정하고 모든 아이콘에 동일하게 적용해야 함
곡률이 0인 경우 직각 형태로 현대적, 단단하며 심플한 느낌을 주며, 곡률 수치가 높아질수록 둥글어져 부드럽고 따듯하면서도 친근한 느낌을 줌
일관된 스타일
Outlined, Filled, Colored, Stroke 두께, Radius를 통일하여 일관되게 디자인하는 것은 중요
하나의 제품이나 서비스에서는 동일한 스타일을 적용하여 작업해야 함
아이콘은 전체 디자인 컨셉과 브랜드 아이덴티티를 대표하는 요소로 사용자에게 일관된 경험을 전달할 수 있어야 함
아이콘의 시각 보정
20*20 그리드 안에서 원은 314, 사각형은 400로 면적 차이가 있기에 원보다 사각형이 커보임
원과 사각형 면적이 같아지려면 사각형 한 변의 길이 보다 원의 지름이 약 1.12배가 되어야 함
반대로 사각형 지름에 0.88배를 적용하면 원과 면적 동일
아이콘 사이즈가 소수점이 나와도 아이콘 최종 사이즈는 아이콘을 감싸고 있는 프레임의 크기로 추출되기 때문에 아이콘은 소수점이 되어도 괜찮음
원의 면적을 구하는 공식은 반지름x반지름x원주율(3.14)
아이콘 단순화
모바일 스크린 영역이 작고, 사용자는 야외 또는 이동중에 모바일 화면을 보며 제품 사용
사용자 상황이나 환경을 고려해 아이콘 제작
모바일 스크린은 작으므로 디테일하게 그릴수록 아이콘이 무엇을 의미하는지 이해하기 어려움
레이아웃과 키라인
아이콘 레이아웃
아이콘 통일성 유지를 위해 필요한 가이드며 절대적 기준이 아니므로, 상황에 맞게 사용
아이콘 형태
아이콘 형태는 정사각형, 원형, 가로로 긴 사각형, 세로로 긴 사각형 4가지로 나눌 수 있음
다양한 형태의 아이콘은 그리드에 맞게 배치해 일관되게 제작
아이콘 너비를 동일하게 적용해 비슷한 비율로 아이콘 제작할 수 있음
같은 영역 안에서 가로로 긴 사각형은 가로 너비를 세로가 긴 사각형은 세로 너비를 동일하게 적용
아이콘 키 라인
아이콘을 일관되게 배치를 위한 명확한 규칙 필요
정사각형, 원형, 가로 직사각형, 세로 직사각형 모양은 키 라인에 포함되어, 키 라인을 기준으로 아이콘 제작
아래 이미지는 24*24 기준 아이콘의 키라인
배율 설정
배수 설정하기
제품에 사용될 아이콘 사이즈 규정
아이콘은 해상도에 따라 2, 3, 4배 리사이징이 되므로 사이즈 줄거나 늘어났을 때 소수점이 발생하지 않도록 작업하는 것이 좋음
일반적으로 12, 16, 20, 24, 32, 48 등 4, 8의 배수를 적용하여 사용하는 편
Scale 적용하기
아이콘은 해상도에 따라 리사이징 필요
아이콘 가로, 세로에 Constraints Scale은 필수로 적용해야 사이즈에 맞는 이미지 추출할 수 있음
HW. 숙제
해상도 선정 기준
현재 스크린 점유율 기준으로 작업하는 것이 좋음
StatCounter에서 조회하여 쉽고 빠르게 확인할 수 있음
2024-2025년 기준 점유율 높은 해상도
점유율 기준으로 작업할 디자인 기준 해상도 설정
대표적으로 안드로이드는 360800, IOS는 375812 해상도 사용
해상도 선정 전 프로덕트 성향, 콘텐츠 종류, 레이아웃, 서비스를 사용할 사용자 고려해 함께 작업하게 될 디자이너, 개발자와 논의하여 적절한 해상도 선정
일관된 디자인
사용자가 모든 해상도에서 일관된 디자인 경험할 수 있도록 노력해야 함
다양한 해상도에 대응할 수 있도록 디자인 하는 것은 중요
고정과 가변 영역
디자인된 화면이 생각과 다르게 개발되는 경우가 종종 있음
디자이너는 다양한 해상도 고려해 디자인을 미리 예측해서 디자인 해야 함
디자인 요소 배치와 해상도에 따라 요소 크기 및 여백은 어떻게 변할지 고려해 디자인
고정(Fix)
해상도가 커지거나 작아져도 정의한 수치값이 일정하게 유지되는 것
좌우 마진은 모든 페이지에 일관되게 적용되어야 하기 때문에 고정으로 설정을 하는 편
가변(Flexible)
고정과 다르게 해상도가 커지거나 작아지면 비율에 맞게 같이 확대나 축소되는 것
즉, 디바이스 사이즈에 맞춰 변동되는 부분
해상도에 따라 크기가 변하는 버튼, 배너와 같은 이미지는 가변으로 설정|
그리드란 사전적으로 '격자무늬' 의미를 지녔으며 바둑판이나 모눈종이를 떠올리면 이해하기 쉬움
디자인 레이아웃에 동일한 규칙을 적용해 일관된 UI를 할 수 있게 도와줌
디바이스 환경에 따라 디자인 요소를 일정 간격으로 배치, 크기를 부여해 체계적인 배열을 도와줌
desktop, tablet, mobile 반응형 디자인 작업 시 해상도 대응이 용이
디자이너와 개발자의 원활한 커뮤니케이션을 도와줌
4가지 기본 요소
컨테이너는 콘텐츠 폭, 콘텐츠를 감싸고 있는 너비
컨텐츠 너비 값은 정해져 있지 않으며, 제품이나 서비스 성향에 따라 설정하는 것 권장
mobile, tablet의 경우 가로 너비가 좁기 때문에 콘텐츠 양이 많을 경우 마진을 줄이고 컨테이너 너비를 넓게 설정하는 것을 권장
desktop은 가로 너비가 넓기 때문에 자유롭게 설정
컬럼은 단의 넓이
콘텐츠 정렬 및 배치하는 역할
일반적으로 몇 개의 컬럼을 사용하는가
Mobile : 2~6 (4컬럼을 주로 사용)
Tablet : 6~12 (6~8컬럼을 주로 사용)
Desktop : 12~16 (12컬럼을 주로 사용)
거터는 컬럼과 컬럼 사이의 간격
콘텐츠 사이의 여백 제공해 콘텐츠의 가독성을 높여 사용자가 콘텐츠를 쉽게 이해할 수 있게 도와줌
레이아웃에서 중요 요소이며 디바이스 마다 크기를 적절하게 설정해 사용
Mobile : 8~16
Tablet : 16~24
Desktop : 24~32
마진은 화면의 좌우 여백의 너비
마진에 따라 콘텐츠의 너비(컨테이너)가 정해지므로 마진 값을 정하는 것은 중요
표현해야 하는 콘텐츠 양과 레이아웃에 맞게 마진 설정
마진은 모든 페이지에 일정하게 적용하는 것을 권장
대표적으로 아래와 같은 마진 값을 사용
Mobile : 16~20
Tablet : 20-36
Desktop : 24~36
반응형 디자인
반응형 디자인은 왜 중요한가
다양한 디바이스 사용
사용자는 다양한 디바이스 통해 인터넷 사용
desktop, tablet, mobile 등 각각의 디바이스 화면 크기와 해상도가 모두 다름
일관된 사용자 경험 제공해 어떤 환경이든 편리하게 이용할 수 있도록 도와줌
일관된 디자인
반응형 디자인은 하나의 템플릿으로 다양한 디바이스를 대응할 수 있음
desktop, tablet, mobile에서 최적화된 화면으로 일관된 디자인
비용 효율화
하나의 코드 베이스로 되어있어 유지 보수 용이
콘텐츠 최적화
모든 디바이스 해상도에 맞게 콘텐츠를 최적화 해줌
사용자는 텍스트나 이미지를 쉽게 확인 및 이해할 수 있음
브레이크포인트는 반응형 디자인에서 레이아웃이 변화하는 지점
브레이크포인트 사용 시 정해놓은 지점에서 레이아웃 변경할 수 있음
브레이크포인트 설정
현재 기준 가장 많이 사용하는 디바이스 해상도 파악을 위해 점유율 확인
우리 서비스를 이용하는 주 사용자는 어떤 해상도를 사용하는지 파악
화면 디자인에 필요한 레이아웃은 어떤 것들이 있는지 확인
이와 같은 내용 고려해 브레이크포인트 설정
브레이크포인트 설정 시 디자이너, 개발자가 같이 논의해 결정하는 것이 좋음
브레이크포인트를 상세히 쪼개 설정할 수 있지만 모든 기기 대응에는 무리가 있으니 필요한 기준을 설정해 진행하는 것이 좋음
대표적으로 사용하는 브레이크 포인트
mobile : 0~599
tablet : 600~1024
desktop : 1024~
2024~2025년 디바이스 점유율 참고 자료
desktop : 1920x1080, 1336x768, 1536x864, 1280x720
tablet : 768x1024, 810x1080, 820x1180, 800x1280
mobile : 360x800, 390x844, 393x873, 412x915
최적화된 그리드, 12컬럼
12컬럼 그리드는 반응형 디자인에 최적화
2, 3, 4, 6단으로 자유롭게 레이아웃을 나눌 수 있고 디자인과 개발에 최적화되어 있음
실습: 그리드 시스템 만들기
