🚩오늘의 키워드
- UXUI 디자인 입문 5주차 & 6주차 강의 수강
😶TODAY I LEARNED
[UXUI 디자인 입문 - 5주차]
- 디자인 원칙
→ 많은 사람들이 비슷하게 느끼고, 행동하는 방식에 기초해 디자인하는 방법을 제시
→ 사람들이 편안하게 느끼고 자연스럽게 행동하도록 유도할 수 있고, 사용성이 높은 제품을 만들 수 있도록 도와줌
- 디자인 원칙의 종류
① 게슈탈트 심리학 - 사람이 이미지를 인식할 때 주변에 있는 요소 간의 관계와 맥락에 영향을 받는다는 이론.
→ 같이 속한 대상이 무엇인지, 주변에 무엇이 있는지에 따라서 대상의 의미가 달라짐.
→ 제품을 이용하는 사용자의 의식은 계속해서 화면 구성의 통일성, 연속성, 유사성을 기대, 화면이 기대한 대로 구성되어 있지 않으면 사용자의 몰입이 깨지고 제품을 이탈하는 이유가 됨.
[ 유사성의 원리 ]
크기나 형태, 방향, 색 등의 특성이 비슷한 것끼리 묶어서 지각하려는 경향
→ 모양의 유사성 < 색상의 유사성, 더 강력하게 그룹핑 됨.
1. 모양을 이용한 유사 관계
2. 크기를 이용한 유사 관계
3. 색상을 이용한 유사 관계
4. 방향을 이용한 유사 관계
유사성의 원리 사례 - 유튜브
[ 근접성의 원리 ]
가까운 것끼리 묶어서 지각하려는 경향
- 여백을 사용한 근접 관계
모양이 달라도 여백을 두고 나눠진 요소끼리 그룹화가 되어 보임.
→ 색상의 유사성보다 더 큰 힘을 발휘, 모양의 유사성 < 색상의 유사성 < 여백의 유사성
근접성의 원리 사례 - 아마존 북스
[ 폐쇄성의 원리 ]
공백이 있더라도 틈이나 간격을 메워서 닫힌 형태로 인식하려는 경향
폐쇄성의 원리 사례 - 스포티파이
[ 연속성의 원리 ]
연속적으로 직선이나 곡선을 이루는 요소를 잘 인지하는 경향
→ 요소가 방향성을 가지고 연속되어 있을 때 편안함을 느낌.
→ 직선이나 곡선을 따라 배열된 대상을 하나의 단위로 인식함.
연속성의 원리 사례 - 핀터레스트
[ 공통성의 원리 ]
같은 방향으로 움직이는 것들끼리 더 관련성이 높다고 인식하는 경향
→ 모양, 색상 등에 관계없이 함께 움직이거나 바뀌는 요소는 서로 더 관련이 있다고 느낌.
→ 주로 모션 그래픽에서 자주 사용
② UX 비주얼 디자인 원칙 - UX에 영향을 끼치는 시각 디자인의 원칙을 정리한 것
→ 시각적으로 매력적인 이유를 근거를 들어 설명할 수 있도록 도와줌
→ 원칙에 따라 잘 설계된 디자인은 사용자가 제품에 몰입하는 것을 도와주고 쓰기에도 편리
[ 스케일 ]
상대적인 크기를 사용하여 구성의 중요도와 순위를 표시하는 것.
→ 가장 중요한 요소는 덜 중요한 요소보다 크게 표현
→ 일반적으로 3가지 이하의 크기를 사용할 때 시각적으로 보기 좋음
[ 시각적 위계 ]
중요한 순서에 따라 시선의 흐름이 이동하도록 디자인하는 것
→ 크기, 색상, 간격, 배치 등을 통해 표현 가능
→ 명확한 시각적 위계를 만들기 위해 2~3개의 텍스트 크기를 사용
→ 위계의 낮음, 중간, 높음에 따라 요소의 크기를 large, medium,small로 분류
→ 중요한 요소 = 채도⬆️색상 대비⬆️, 덜 중요한 요소 = 채도⬇️, 색상 대비⬇️
시각적 위계의 실사례 - 미디엄/우버
[ 균형 ]
디자인 요소 간에 적당한 배열이나 비율을 주는 것.
1. 대칭 - 디자인 요소가 가상의 중심축을 기준으로 대칭으로 분포하는 것
→ 안정적이고, 정적인 느낌을 주고 싶을 때 사용
2. 비대칭 - 디자인 요소가 가상의 중심축을 기준으로 비대칭으로 분포하는 것
→ 역동적이고 신선한 느낌을 주고 싶을 때 사용
3. 방사형 - 중앙의 점을 기준으로 원형으로 배치한 것
→ 시선을 중앙에 집중시키고 싶을 때 사용
[ 대비 ]
눈에 띄게 구별되도록 강조하기 위해 두 요소 간의 차이를 두는 것
→ 특정 부분을 사용자에게 돋보이게 하고 싶을 때 사용
→ 크기나 색상을 사용해 두 디자인 요소 간에 뚜렷한 차이를 줌
→ 주로 명암의 차이를 주거나 색상의 차이를 주는 방법을 많이 사용
→ 주의, 텍스트의 강조를 줄이기 위해 배경과의 명도 차이를 너무 줄이지 않도록 하기.
대비의 실사례 - 모니모
③ UX/UI 심리학 법칙 - 사람의 마음을 깊이 들여다보고 이해하며, 디자인에 직접적인 영향을 주는 법칙
→ 정량적, 정성적 데이터가 없는 초기 제품에 대한 의사결정의 근거
→ 명확한 이론적 근거를 바탕으로 주장, 팀원들을 설득할 무기로 활용
→ 스스로 좋은 디자인을 할 수 있도록 도와주는 체크리스트가 되어줌
→ 사용자의 경험을 근원적으로 이해할 수 있도록 도와줌
[ UX/UI에 영향을 주는 심리학 법칙 ]
1. 제이콥의 법칙
사용자는 새로운 제품을 사용할 때 이미 알고 있는 익숙한 방식으로 작동하길 원한다는 법칙
→ 사용자는 기존에 학습한 지식과 경험을 바탕으로 사용하려고 한다.
→ 인터페이스를 익히는데 드는 정식적 에너지⬇️ > 목표 달성에 투자할 에너지⬆️ = 목표를 성공적으로 달성할 가능성⬆️
→ 사용자가 들여야 하는 시간과 비용, 노력이 줄어듦
→ 멘탈모델이 큰 영향을 끼침.
자신이나 타인, 개념, 사물, 현상 등 다양한 대상에 대해 갖고 있는 생각 패턴
예) 디지털 제품에서 보편적인 멘탈모델 : 스마트폰에서 사진을 확대할 때 보통은 두 손가락을 오므렸다 펼치는 동작
2. 피츠의 법칙
사용자가 인터렉션해야하는 대상(ex.터치)은 거리가 가깝고, 크기가 커야 사용성이 좋다는 법칙.
→ 예를 들어, 터치할 때 오류없이 터치할 만큼 크기가 커야함
대상이 2개 이상이라면 잘못 누르지 않도록 둘 사이에 충분한 거리를 확보
마우스나 손가락이 쉽게 닿을 수 있는 영역에 배치
터치 대상의 최소 권장 규격
| 가이드 | 규격 |
| 애플의 HIG | 44 x 44 (pt) |
| 구글 머터리얼 디자인 | 48 x 48 (dp) |
| WCAG 웹 접근성 가이드라인 | 44 x 44 (px) |
| 닐슨노먼그룹 | 1 x 1 cm |
터치 영역
피츠의 법칙 사례 - 아이폰의 화면 상단 간편 접근기능
3. 힉의 법칙
의사결정에 걸리는 시간은 선택지의 개수와 복잡성에 비례해 늘어난다는 법칙
→ 한 화면에서 한꺼번에 복잡하고 많은 양의 정보가 들어오면 이를 처리하기 위해 인지 부하가 생김 ➡️ 이탈로 이어짐
→ 인지부하를 줄이기 위한 방법
- 복잡한 작업은 더 작은 단계로 나누기
- 의사결정 시간을 줄이기 위해 선택지의 개수를 최소화
- 추천 선택지를 강조해서 사용자의 부담을 줄이기
→ 너무 추상적으로 단순화하지 않도록 주의. 정보의 양이 지나치게 적을 때에도 인지 부하가 생김!
힉의 법칙 사례 - 토스의 회원가입 과정
4. 밀러의 법칙
보편적으로 사람은 작업 기억에 7(±2)개 정도의 항목(덩어리)밖에 저장하지 못한다는 법칙
→ 그룹핑, 정보를 적절히 덩어리로 만드는 것이 중요!
→ 유사한 정보끼리 시각적으로 뚜렷이 구별되도록 그룹으로 나누고 명확하게 체계화
→ 사용자가 보고 바로 선택할 수 있는 선택지 같은 경우는 7개로 제한할 필요 없음.
밀러의 법칙 사례 - 네이버 뉴스
④ 기업의 디자인 원칙 - 기업의 철학을 담고, 심미성과 사용성이 높은 제품을 만들 수 있도록 제시하는 가이드
→ 기업과 제품의 비전을 공유
→ 공통된 느낌을 주는 일관된 원칙을 제시
→ 심미적인 UI와 인터렉션을 구현하는 동시에 사용성을 지키는 방법을 안내
→ 의사결정 기준이 되고 시간을 절약
· 스포티파이
1. 연관성
개인화를 통해 사용자 개인을 위해 만들어진 것이라는 느낌을 주어야 함.
정보를 적시에 제공하는 것이 중요
무엇을, 누구에게, 어떤 맥락을 제시해야 하는지 신중하게 고려
ex ) 재생 목록의 커버 이미지를 보여줄 때 문화권에 맞춘 정보를 제공
2. 인간
기술에 뿌리를 두고 있지만, 모든 것은 사람을 위한 것
인간의 논리로 생각하고 감정을 나누어야 함
지나치게 영리하거나 기술적, 기능적인 것은 인간처럼 보이지 않음
ex ) 프로필 사진을 설정할 때 본인의 프로필 사진을 넣을 수 있도록 한다던가, 키즈 프로필에 재밌는 캐릭터를 사용
3. 통일성
디자인하는 모든 것이 스포티파이처럼 보이게
제품 안에서의 일관된 경험을 통해 친숙함과 신뢰를 구축
새로 발명하기보다는 재사용하는 방법을 추천
경험을 재사용하고, 일관성을 유지
ex ) 마케팅할 때 오프라인의 경험과 스포티파이의 앱 경험이 이어지도록
· 페이스북
1. 보편적인
페이스북의 사명은 전 세계를 더 개방적으로 만드는 것
모든 사람, 모든 문화, 모든 언어, 모든 디바이스, 삶의 모든 단계를 위해 디자인
소수에게만 작동하는 기능을 경계하고, 90%의 사용자에게 작동하는 제품
2. 인간
사용자는 주변의 다른 사람들과 함께하기 위해 페이스북을 이용
제품의 목소리와 비주얼은 앞에 나서지 않고 사용자를 먼저 보일 수 있도록
3. 깔끔한
사용자가 생활할 빈 캔버스를 만들기 위해 페이스북은 깨끗하고 절제된 비주얼 스타일을 고수
최소한의 밝은 공간으로 사용자의 참여와 투명한 의사소통을 장려
4. 일관적인
유사한 요소들이 비슷한 방식으로 동작할수록 사용성이 향상
패턴을 활용하여 시간을 절약
제품 안에서의 일관된 인터랙션은 사용자와의 신뢰를 만듦
매번 새롭게 디자인하지 말고, 재사용
5. 유용한
반복되는 일상 중 하나로 효율적인 가치를 제공
핵심 인터랙션은 간소화하고 불필요한 클릭과 낭비를 줄여야 함
6. 빠른
페이스북은 사용자들의 시간을 중요하게 생각
더 빠른 경험은 효율적이고 사용자의 노력을 줄여줌
사이트의 성능을 사용자가 알아채지 못할 정도로 빠르게 동작해야 함
7. 투명한
자신의 신원, 사진, 생각과 대화로 페이스북을 신뢰
최대한 정직하고 투명하게 보답
지금 무슨 일이 일어나고 있고 왜 일어나는지 명확하고 솔직하게 설명
[UXUI 디자인 입문 6주차]
① 레퍼런스 분석 - 여러가지 사례를 상세하게 분류해 생각해 보고 도움이 될 만한 부분을 찾아보는 과정
→ 얻고 싶은 정보를 기준으로 다양한 사례를 수집하고 세부 요소들로 쪼개어 살펴봄
→ 세부 요소들을 관찰하면서 좋은 점과 나쁜 점, 그리고 그 이유를 찾고 생각
→ 분석을 통해 얻은 인사이트를 정리
[UXUI에서의 레퍼런스 분석]
1. 화면 구조 분석
화면이 각각 어떤 요소들로 구성되어 있는지 분해해 보는 단계.
→ 화면을 구성하는 요소를 나누는 방법에는 여러 가지가 존재
→ UX/UI 디자인 패턴을 활용하면 도움이 됨
2. 디자인 원칙 기반 분석
UI 요소들을 디자인 원칙들을 기준으로 분석해 보는 단계
→ 쪼개본 UI 요소들을 디자인 원칙에 대입해 보면서 사용성이 높은지, 심미적으로 아름다운지 등 다양한 관점에서 디자인을 평가
→ 나쁜 점도 타산지석의 사례로 삼을 수 있으니 좋은 점과 나쁜 점 모두 다양하게 찾기
→ 단계의 핵심은 주장과 그에 알맞은 논리적인 근거를 찾는 것
3. 인사이트 정리하기
분석한 내용들로 얻은 인사이트를 정리해 내 것으로 만드는 단계
→ 본인의 제품에 참고하거나 적용하면 좋을 만한 것들을 그룹화해서 정리
→ 개선점까지 생각 후 정리하면 더 GOOD
② UX/UI 디자인 패턴 - 디지털 제품, 주로 앱이나 웹에서 자주 사용되는 디자인 요소
→ 다수의 제품에서 공통으로 볼 수 있는 UX/UI 디자인 패턴은 보편적인 범위 내에서 디자인하고 동작하는 것이 좋음
→ 자주 쓰는 UX/UI 디자인 패턴은 사용자에게 익숙하기 때문에 쓰는 데 어려움이 없음
→ UX/UI 패턴을 디자인 시스템으로 만들어 두면 반복해서 재사용 가능, 디자이너의 불필요한 에너지를 줄일 수 있다는 장점有
[ 자주 사용되는 UX/UI 디자인 패턴 ]
온보딩 · 로딩 · 검색 · 회원가입 · 리스트 · 카드 · 캐러셀
1. 온보딩
서비스를 처음 만나는 사용자가 기능을 잘 이해하고 가치를 느낄 수 있도록 돕는 과정
- 튜토리얼
· 제품이 매우 복잡하거나 어려운 경우에 조작법이나 설명을 넣는 방식
· 앱이 업데이트 되었을 때 특정 기능을 강조하고 싶을 때도 사용
➡️ 사용성 측면에서는 사용자의 행동을 제한하고 흥미를 떨어트리기 때문에 튜토리얼 온보딩은 추천하지 않음.
- 가치 보여주기
· 제품을 사용하면서 얻을 수 있는 가치를 몇 가지의 화면으로 보여주는 방식
➡️ 온보딩 과정을 보고싶지 않은 사용자는 바로 제품의 홈으로 이동할 수 있도록 skip 기능을 제공
➡️ 캐러셀을 이용하여 사용자가 화면을 넘기지 않아도 자동으로 넘어가도록 구성하거나 동영상으로 구성
- 개인화 설정하기
· 개인 맞춤 정보를 제공할 수 있도록 몇 개의 카테고리와 선택지를 주고 정보를 입력하게 하는 방식
· 개인화가 핵심 기능인 서비스에서 주로 사용되는 유형
ex ) 스포티파이, 넷플릭스, 듀오링고 등
2. 로딩
앱이나 웹에서 화면이 그려지는 동안 사용자가 잠깐 기다려야 할 때 보여주는 화면
- 스피너 아이콘 혹은 애니메이션 활용
· 데이터를 서버에서 불러오거나, 반대로 데이터를 보낼 때 앱과 사용자와의 상호작용
· 연속적인 움직임을 통해 시스템이 정보를 처리하고 있음을 사용자에게 알려줌
· 움직이는 모션이나 애니메이션은 로딩 지속 시간에 대한 사용자의 인식을 낮춰 기다리는 시간을 짧게 느끼게 함
- 프로그레스 바
· 현재 상황을 시각적으로 파악할 수 있는 로딩 바
· 진행 상황을 유저에게 알려주어야 할 때 사용
- 스켈레톤
· 불러오는 화면의 빈 버전으로, 화면에서 가장 먼저 노출되어 사용자가 실제 페이지를 예측할 수 있도록 함
➡️ 실제 화면의 로드를 방해하지 않도록, 가능한 가장 단순한 모습의 회색 박스를 사용하여 불러오는 페이지를 예측할 수 있는 형태로 표현
3. 검색
사용자가 원하는 정보를 빠르게 찾을 수 있도록 키워드로 정보를 찾는 방법
➡️ 원하는 결과를 보여줄 수 없을 때는 다른 행동을 할 수 있도록 유도.
ex ) 추천 콘텐츠 노출, 다른 키워드로 검색을 유도
➡️ 자동 완성 기능을 사용해 오타를 방지하고 연관된 내용을 찾을 수 있게 도와주어야 함
- 기본 검색 화면
· 제품에서 차지하는 검색의 중요도에 따라 검색 기능의 위계가 다름!
ex ) 유튜브는 검색 기능보다 추천 컨텐츠가 더 중요 → 검색 버튼은 아이콘으로
구글/네이버의 경우 검색기능이 가장 중요 → 검색 기능을 전면에 표시
이마트몰의 경우 컨텐츠/검색 기능 둘 다 중요 → 검색 바 형태로 표시
- 연관 상품 추천 / 연관 검색어 노출 (탐색을 돕기 위한 요소)
· 키워드 검색을 넘어 전반적인 정보의 탐색이 이뤄지는 공간
ex ) 상품 검색 탭에 들어갔을 때 생각을 하지 않고 카테고리, 키워드 별로 검색할 수 있도록 도움
이전 검색 상품들을 다시 볼 수 있도록 제시
- Empty view 검색 결과 없음
· 추천 혹은 베스트 상품으로 이어지는 행동을 유도
③ 핀테크 / 금융 레퍼런스 분석
→ 국가, 금융 기관의 법과 정책의 영향을 많이 받음
→ UI에 대한 구체적인 가이드라인이 있다거나 화면에 대해서 관련 기관의 심의를 받아야 하는 경우도 존재
④ 콘텐츠 레퍼런스 분석
→ 콘텐츠의 종류에 따라 영상, 오디오, 텍스트, 웹툰 등 다양하게 나눠지고 각 종류의 특성에 따라 제품의 차이가 큼
→ 체류시간을 늘리는 UX/UI를 찾는 것이 중요
ex ) 영상 콘텐츠 - 디바이스 스크린을 계속해서 쳐다보고 있어야 함
오디오 콘텐츠 - 개인화된 재생 목록을 잘 구성하는 것이 중요
텍스트 콘텐츠 - 폰트의 가독성이 사용성에 매우 큰 영향을 끼침
티빙 레퍼런스 분석
⑤ 커머스 레퍼런스 분석
→ 주로 전자상거래인 이커머스를 말하며, 온라인에서 판매 및 거래가 이뤄지는 플랫폼을 뜻함
→ 제품의 지표, UX/UI가 상품으로 인한 영향을 크게 받음
→ 상품 구매 전환율이 커머스의 중요한 지표
무신사 레퍼런스 분석
🫠 오늘의 회고
오늘이 지나면 주말이라는 생각에 힘내서 강의를 들었던 하루였다. 평상시에 TIL를 작성하는게 시간이 엄청 오래걸렸는데, 강의를 들으면서 동시에 배운 내용을 정리하니 강의에도 좀 더 집중하게 되고 시간 단축도 되는 것 같다. 2주차 강의 내에서 내 준 실습과제를 진행하는데 시간이 오래걸렸는데 개별 과제로 내주신 과제가 2주차 과제와 굉장히 닮아있어서 일찍 시작해서 매진해야 기간 내에 끝낼 수 있을 것 같다고 생각했다.
부트캠프를 같이 듣는 분들이 너무 열심히 하셔서 주말에는 쉬면서 다음 주를 위한 기운을 충전해야겠다는 마음과 나도 더 노력해야지.. 하는 마음이 충돌하는 것 같다🙃
'디자인 부트캠프 > 본캠프' 카테고리의 다른 글
| [+8] 개별 과제 진행 A-E-I-O-U (0) | 2025.02.03 |
|---|---|
| 2주차 WIL (0) | 2025.02.02 |
| 1주차 WIL (0) | 2025.01.26 |
| [+5] 다양한 디자인 씽킹 방법 (1) | 2025.01.24 |
| [+4] 컴포넌트와 컴포넌트 제작 실습 (0) | 2025.01.23 |
댓글