종합병원이 되어버린 나
0. 디자인 카타
💭 나의 의견
A는 깔끔한 디자인의 선 아이콘, 버튼과 같은 색상으로 일관성있는 스타일이다.
B는 실물 이미지를 사용하여 보다 직관적으로 카테고리를 이해하기 쉽다.
예시와 같은 상황에서는 실물 이미지가 있다면 굳이 아이콘을 사용할 필요가 없어보인다.
하지만 아이콘의 크기가 작거나 더 다양한 카테고리를 같은 스타일로 표현해야할 때는 통일성이 떨어질 수 있고 복잡하게 보일 수 있기 때문에 아이콘을 사용해 정돈된 느낌을 주면 좋을 것 같다.
💬 팀원들과의 토의 내용과 결론
A는 깔끔한 디자인과 통일성이 필요한 경우 적합 (예: 아이콘 크기가 작거나 카테고리가 많을 때)
B는 직관성과 빠른 정보 전달이 중요한 경우 적합 (예: 커머스 환경에서 빠른 탐색이 필요할 때)
B를 사용할 경우, 일관된 색감과 균형 잡힌 이미지 선택이 중요 (지저분해 보이지 않도록 주의해야 함)
🔗 참고 자료
https://yozm.wishket.com/magazine/detail/1561
위기·성장의 순간, 고객을 잡는 카테고리 디자인 | 요즘IT
이커머스 사이트 최적화 서비스 Nosto에 따르면, 구매의 70%가 카테고리를 통해 발생했습니다. 카테고리 페이지는 개별 상품 상세 페이지보다 트래픽이 4배 더 많은 곳이기도 합니다. 카테고리는
yozm.wishket.com
1. 강의 시청 - UI 디자인 핵심 원리
UI 디자인 숙련 주차가 시작 되었기 때문에 새로운 강의를 받아 수강하게 되었다.
오늘은 UI 디자인의 모든 것의 1챕! UI 디자인의 핵심 원리에 대해 배우고 정리해보았다.
📖 사용자 중심 디자인
사용자 중심 디자인(UCD)란 제품이나 서비스를 설계할 때 사용자를 공감하여 사용자의 문제를 이해하고, 이를 해결하기 위한 개선안을 제공함으로써 사용자에게 만족스러운 경험을 제공하는 접근 방식이다.
- 사용자의 입장에서 깊이 있게 공감하기
- 사용자의 목적, 상황, 니즈 등을 지속적으로 분석하여 문제 파악하기
- 첫 사용자도 쉽게 이해하고 사용할 수 있도록 직관적인 UI로 설계하기
📖 UI 디자인 핵심 원리
디자인 원리를 통해 제품이나 서비스가 제공하는 기능과 정보를 사용자에게 명확하게 전달할 수 있다.
📌 가장 먼저, 사용자 이해하기
- UI 디자인에 앞서 가장 먼저 고려해야하는 것은 우리 서비스를 사용하는 사용자를 이해하는 것이다.
- 디자인의 목적은 사용자의 경험을 향상시키고 참여를 유도하는 것이다.
- 참여를 유도하기 위해서는 지속적으로 제품에 대한 긍정적인 인상과 신뢰감을 줄 수 있어야 한다.
- 사용자가 원하는 정보를 쉽게 탐색할 수 있어야 하고 사용에 어려움이 없어야 한다.
- 모든 의사결정은 사용자의 니즈와 기대를 중심으로 이루어져야 한다.
📌 직관적인 디자인
사용자는 제품이나 서비스의 인터페이스를 학습하지 않아도 쉽게 이해하고 사용할 수 있어야 한다.
🙋🏻♂️ 사용자의 행동 유도
- 버튼 - 흐름에 맞게 필요한 위치에 배치, 대비되는 컬러를 사용해 버튼을 강조
- 링크 - 일반적으로 파란색을 사용, 링크된 텍스트에는 밑줄을 넣어 클릭이 가능함을 전달
👀 정보를 시각적으로 표현
- 픽토그램 - 텍스트 + @, 사용자의 이해를 돕고 핵심 정보를 강조해서 빠르게 전달 가능
- 아이콘 - 문화적, 언어적 차이를 넘어 사용자가 즉각적으로 이해하고 수행 가능
🎨 직관적인 디자인 핵심 요소
- 대비 높은 색상 조합 - 배경과 텍스트의 색상을 대비하여 강조
- 간단한 레이아웃 - 정보와 디자인 요소를 적절하게 배치하여 사용자가 이해하기 쉬운 레이아웃 구조를 만든다.
- 유연한 인터페이스 - 사용자가 원하는 요구사항을 편하게 설정할 수 있도록 설정 기능을 제공
- 아이콘 및 픽토그램 이미지 사용 - 누구나 이해하기 쉬워 사용자의 상호작용을 쉽게 도와준다.
📌 일관된 디자인
사용자가 환경이나 상황에 구애받지 않고 동일한 서비스 경험을 느낄 수 있게 하는 것
🙆🏻♀️ 일관된 사용자 경험
- 신뢰성 향상 - 제품의 인터페이스를 숙지하고 지속적으로 긍정적인 경험을 하여 신뢰성 증가
- 업무 효율성 증대 - 일관된 경험을 통해 업무 시간 단축, 새로운 기능이 업데이트 되더라도 빠르게 적응
💡 일관된 디자인 핵심 요소
- 디자인 시스템 구축 - 컬러, 폰트, 아이콘 등 시각적인 요소와 레이아웃, UX 라이팅 등 기준을 명확히!
- 사용자 피드백 - 사용자로부터 지속적으로 피드백을 받아 분석, 이를 디자인에 적용
📌 가독성을 고려한 디자인
- 여백 활용 - 깔끔하고 정돈된 느낌을 줄 수 있고 중요한 요소를 더 강조할 수 있다. 너무 채우려고 하지 않기!
- 콘텐츠 그룹화 - 비슷한 의미, 주제를 갖고 있는 콘텐츠를 그룹화하여 사용자의 편의성을 높일 수 있다.
- 크기와 비율 - 요소의 중요도에 따라 크기를 조절하여 배치하여 콘텐츠의 계층을 구성할 수 있다.
- 계층 구조 - 위에서 아래로, 좌에서 우로 등 텍스트의 크기, 컬러, 위치를 활용하여 시각적 계층 구조를 설정한다.
📌 명확한 피드백 제공
사용자가 인터페이스와 상호작용하면서 특정 작업을 수행했을 때, 그에 대한 적절한 피드백을 받기를 기대한다.
- 즉각적인 반응 제공
- 사용자의 행동에 따라 시각적 또는 청각적 반응을 피드백으로 제공하여 다음 행동을 쉽게 결정할 수 있도록 도움을 준다. - 시각적 변화
- 입력 필드에 정보를 모두 입력했거나 필요한 조건이 충족되었을 때 시각적으로 변화를 주어 사용자가 인지할 수 있도록 한다.
📌 접근성을 고려한 디자인
모든 사용자가 신체적, 환경적 조건에 관계없이 동등하게 웹에 접근하여 사용할 수 있도록 보장하는 것
- 텍스트 + 아이콘 - 색상과 아이콘을 통해 강조하여 색맹 시각자도 명확하게 이해할 수 있다.
- 입력 필드 - 오류 상태를 표현할 때에는 텍스트로 정보를 전달한다.
- 텍스트 콘텐츠 - 링크나 버튼을 분리해서 작업해야 스크린 리더가 위치를 파악하기 쉽다.
- 텍스트 + 라인(Bar) - 테두리 또는 라인을 활용하여 형태적 차이를 표현한다.
- 명도 대비 - 색상과 색상 간의 차이, 요소들의 색상 대비가 충분해야 저시력자도 원활하게 서비스를 이용할 수 있다.
🌠 접근성을 위한 디자인 전략
- 명확한 텍스트와 디자인 요소 : 텍스트, 버튼, 링크는 명확하게 구분하기 쉽게 한다.
- 명도 대비 : 텍스트와 배경 색상 간의 충분한 대비를 제공하여 시각적인 접근성을 높인다.
- 키보드 내비게이션 : 사용자가 마우스 없이 키보드만으로 웹사이트의 모든 기능을 사용할 수 있게 설계한다.
- 스크린 리더 : 스크린 리더가 올바르게 읽힐 수 있도록 설계한다.
📖 사용자 경험을 향상시키는 방법
📌 직관적인 네비게이션
사용자가 원하는 정보를 빠르고 쉽게 탐색할 수 있게끔 하기!
- 명확한 메뉴 구조 - 예상 가능한 카테고리, 일관된 메뉴 구조, 메뉴 깊이(depth) 최소화
- 비주얼 요소 활용 - 픽토그램&아이콘 사용, 활성화 효과
📌 다양한 디바이스 지원
다양한 디바이스와 브라우저를 통해 일관된 경험을 하게끔 하기!
- 반응형 디자인 - 디바이스 최적화, 그리드 시스템 적용
- 터치 스크린 최적화 - 터치 영역 확보, 요소 간 적절한 간격 유지, 요소의 최소 사이즈 확인하기
📌 사용자 피드백 반영
사용자의 피드백을 정기적으로 수집하고 검토하여 사용자 경험을 개선하기 위해 노력하기!
- 사용자 VOC 분석 - 고객의 소리, 반복적으로 발생하는 사용자의 문제를 발견하고 해결한다.
- 사용자 설문 조사 - 사용자의 만족도나 서비스에 대한 경험을 빠르게 수집하여 데이터화한다.
- 사용자 인터뷰 - 사용자의 생각과 행동을 직접 확인하면서 사용자가 느끼는 불편함과 니즈가 무엇인지 파악한다.
2. 과제 - 디자인 핵심 원리 사례 찾아보기
직관적인 디자인 2개, 가독성이 고려된 디자인 2개, 일관된 디자인 1개의 사례를 찾아 정리해보았다.
[HOW TO UI·UX] 텅 빈 화면, 이거 그대로 두어도 괜찮을까요? - DIGITAL iNSIGHT 디지털 인사이트
앱 사례로 보는 텅 빈 화면으로 사용자 경험 높이기
ditoday.com
팀 아티클과 회고까지 올리며 마무리! 얼른 코로나 나아서 풀 컨디션으로 공부하고싶다...!!!ㅠㅠ
'내배캠 TIL' 카테고리의 다른 글
| #TIL_21 🚀 5주차 마무리! 강의 시청, 클론 디자인 (0) | 2025.02.21 |
|---|---|
| #TIL_20 🍀 강의 시청, 클론 디자인 - 야놀자 (0) | 2025.02.20 |
| #TIL_18 🍀 개인 과제, 팀 활동 아티클 정리 (1) | 2025.02.18 |
| #TIL_15 🍀 클론 디자인 - 지그재그 (0) | 2025.02.12 |
| #TIL_14 🍀 하루 5분 UX 읽기, 서비스 역설계 (0) | 2025.02.11 |
댓글