본캠프 10일차_강의 정리
[강의 정리]
🦠 UXUI 디자인 입문 - 4주차
1️⃣ 디자인 툴
디자인 툴의 종류
인터페이스 디자인 툴: 피그마, 스케치, XD 등
그래픽 디자인 툴: 포토샵, 일러스트레이터
3D 그래픽 디자인 툴: 시네마 4D, 블렌더
모션 그래픽 디자인 툴: 프리미어, 애프터이펙트
2️⃣ 비트맵과 백터 이미지의 이해
비트맵 이미지: 픽셀로 구성된 이미지. 정교한 표현 가능하지만 크기 조절 시 품질 저하.
벡터 이미지: 수학적 함수로 표현된 이미지. 크기 조절에 자유롭고 파일 크기가 작지만, 복잡한 이미지 표현에 한계가 있음.
3️⃣ 주요 인터페이스 디자인 툴
1) 피그마
클라우드 기반, 멀티 플랫폼 지원
실시간 협업 가능
현재 가장 많이 사용되는 UI 디자인 툴
2) 스케치
MacOS 전용 프로그램
로컬 컴퓨터 기반으로 동작하여 안정적
피그마 등장 이전까지 가장 인기 있던 툴
3) 어도비 XD
어도비 Creative Cloud와 통합
익숙한 인터페이스로 적응이 쉬움
로컬 파일 저장 방식으로 협업에는 다소 불리
4️⃣ 프로토타이핑 툴
1) 프로토타이핑의 중요성
실제 개발 전 아이디어나 컨셉을 테스트하기 위해 사용
사용자 테스트 및 팀원들과의 효과적인 디자인 공유에 활용
Lo-fi(Low fidelity)와 Hi-fi(High fidelity) 프로토타입으로 구분
2) 인터랙션 디자인
사용자와 제품 간의 상호작용을 설계하는 과정
프로토타입을 통해 실제 사용 경험을 테스트하고 개선할 수 있음
5️⃣ 주요 프로토타이핑 툴
1) 피그마
피그마 내에서 간단한 인터랙션 구현 가능
디자인에서 프로토타이핑으로의 빠른 전환
간편한 화면 간 경로 연결
주로 간단한 클릭 및 화면 전환 구현에 적합
2) 프로토파이
코딩 없이 Hi-fi 수준의 프로토타입 제작 가능
실제 제품과 유사한 복잡한 인터랙션 구현 가능
Conditions(조건부 트리거) 기능으로 다양한 상황 시뮬레이션 가능
3) 프레이머
코드 기반의 Hi-fi 프로토타이핑 툴
React 기반으로 개발자와의 협업에 유리
컴포넌트 재사용성이 높음
디자인부터 프로토타이핑, 실제 제품 배포까지 가능
🦠 UXUI 디자인 입문 - 5주차
1️⃣ 디자인 원칙
✅ 디자인 원칙이란?
인지심리학 관점에서 디자인할 때 지켜야 할 규칙
사용자가 편안하게 느끼고, 자연스럽게 행동하도록 유도
< UX/UI 디자인의 기본 원칙 >
✅ 디자인 원칙의 종류
게슈탈트 심리학: 사람이 이미지를 인식할 때 주변 요소와 맥락의 영향을 받음
UX 비주얼 디자인 원칙: 시각적 요소가 UX에 미치는 영향(스케일, 균형, 대비 등)
UX/UI 심리학 법칙: 사용자의 행동 패턴과 심리적 반응을 활용한 디자인(제이콥의 법칙, 힉의 법칙 등)
기업의 디자인 원칙: 기업 철학과 제품의 심미성·사용성을 고려한 가이드라인
2️⃣ 게슈탈트 심리학
✅ 게슈탈트 심리학이란?
사람의 뇌는 개별 요소보다 전체적인 맥락을 기반으로 이미지를 인식함
✅ 게슈탈트 심리학의 5가지 원리
유사성의 원리: 색상·크기·모양이 비슷한 요소를 같은 그룹으로 인식
근접성의 원리: 가까이 위치한 요소를 같은 그룹으로 인식
폐쇄성의 원리: 일부가 끊어진 도형도 완전한 형태로 인식
연속성의 원리: 선이 끊기지 않고 연속된 형태로 인식
공통성의 원리: 같은 방향으로 움직이는 요소를 하나의 그룹으로 인식
💡 모양 < 색상 < 여백
✅ 게슈탈트 심리학 적용 사례
유튜브: 유사한 형태의 컴포넌트를 그룹화
아마존 북스: 같은 카테고리를 근접 배치하여 가독성 향상
스포티파이: 일부 잘린 이미지도 연속된 리스트로 인식
핀터레스트: 연속된 수직 정렬로 스크롤을 유도
넷플릭스: 영화 목록이 한 방향으로 움직이며 관련성이 높다고 인식
3️⃣ UX 비주얼 디자인 원칙
✅ UX 비주얼 디자인 원칙이란?
UX를 개선하는 시각적 디자인 원칙 정리
사용자가 직관적으로 이해할 수 있는 디자인을 설계하는 데 도움
✅ 주요 원칙
스케일: 중요한 요소를 더 크게 표현하여 가독성 및 주목도 향상
시각적 위계: 정보의 중요도에 따라 크기·색상·배치를 조정하여 시선 유도
균형: 시각적 요소 간의 조화를 맞추는 기법(대칭, 비대칭, 방사형 등)
대비: 색상·명도 차이를 활용해 중요한 정보를 강조
✅ UX 비주얼 디자인 적용 사례
미디엄: 중요한 아티클을 더 크게 배치하여 강조
우버: 지도와 검색 창을 균형 있게 배치하여 시선 유도
모니모: 탈퇴 버튼을 눈에 띄게 강조하여 실수 방지
4️⃣ UX/UI 심리학 법칙
✅ UX/UI 심리학 법칙이란?
사용자의 행동을 연구하여 UX/UI 디자인에 활용하는 법칙
✅ 주요 법칙
제이콥의 법칙: 사용자는 기존에 익숙한 방식으로 작동하는 UI를 선호함
사례: iOS 7의 스큐어모피즘(현실과 비슷한 UI)
피츠의 법칙: 버튼의 크기와 위치가 인터페이스 사용성을 결정
사례: 아이폰의 상단 접근 기능, 터치 영역 최적화
힉의 법칙: 선택지가 많아질수록 의사결정 시간이 증가
사례: 토스의 단계별 회원가입 UI
밀러의 법칙: 인간이 한 번에 기억할 수 있는 정보는 7(±2)개
사례: 네이버 뉴스의 정보 그룹화
포스텔의 법칙: 엄격한 입력 기준과 유연한 출력 기준 적용
피크엔드 법칙: 사용자의 경험은 절정과 마지막 순간이 결정
심미적 사용성 효과: 보기 좋은 UI가 더 사용성이 뛰어난 것으로 인식됨
폰 레스토프 효과: 가장 눈에 띄는 요소가 기억될 확률이 높음
테슬러의 법칙: 시스템에는 최소한의 불가피한 복잡성이 필요
도허티 임계: 반응 속도가 0.4초 이하면 생산성이 증가
5️⃣ 기업의 디자인 원칙
✅ 기업 디자인 원칙이란?
브랜드 정체성과 일관성을 유지하기 위한 디자인 가이드라인
✅ 주요 기업의 디자인 원칙
📌 Spotify
연관성: 사용자 맞춤형 경험 제공
인간적 디자인: 감성을 고려한 직관적 UI
통일성: 디자인 시스템을 활용하여 일관된 경험 제공
보편성: 전 세계 모든 사용자를 고려한 디자인
인간 중심: 사용자가 주인공이 되는 UI
깔끔한 UI: 불필요한 요소를 최소화
일관성: 동일한 UI 패턴을 유지
유용성: 불필요한 클릭과 낭비 최소화
속도: 빠른 로딩과 반응성을 유지
투명성: 사용자가 신뢰할 수 있는 인터페이스 제공