전체 글
- [디자인부트캠프] DAY 03: 피그마 기초 / 프레임 분석 / 구조 나누기 / 나의 강점+약점 2025.03.10
- DAY 03 ㅣ 피그마 기초 / MECE / CRUD 2025.03.10
- 도전할 계기, 포기하지 않는 힘 2025.03.09 2
- AGI 시대를 준비하는 UX/UI 디자이너의 마인드 셋 2025.03.08 1
- DAY 02 ㅣ UI와 UX 2025.03.07
- [디자인부트캠프] DAY 02: UX원칙과 UX디자인이 잘 적용된 굿 사례 분석 후 컴포넌트 활용하여 만들어보기 2025.03.07 1
- [디자인부트캠프] DAY 01: 5Whys를 통해 문제를 정의 후 솔루션 제안 2025.03.06
- DAY 01 ㅣ 디자인이란? 디자인 씽킹 방법론 2025.03.06 1
- 디자이너 트랙 : 8. 레이아웃 및 디자인 원리 2025.02.17
- 디자이너 트랙 : 7. 피그마 기본 개념 2025.02.16
[디자인부트캠프] DAY 03: 피그마 기초 / 프레임 분석 / 구조 나누기 / 나의 강점+약점
2025. 3. 10. 18:53
DAY 03 ㅣ 피그마 기초 / MECE / CRUD
2025. 3. 10. 16:05
📌 Figma 기본 툴 & 단축키 정리
1. 선택 (Move Tool)
- 단축키: V
- 용도: 개체를 선택하고 이동하는 기본 도구.
2. 프레임 (Frame Tool)
- 단축키: F
- 용도: 새로운 프레임(아트보드)을 만들거나 프레임 내 요소를 정리할 때 사용.
- 웹, 모바일, 태블릿 등 다양한 디바이스 프레임을 제공.
3. 도형 (Shape Tools)
- 단축키: R (Rectangle), O (Ellipse), L (Line)
- 용도: 다양한 기본 도형을 생성할 때 사용.
- 직사각형 (R), 원형 (O), 선 (L), 다각형, 별, 화살표 등.
4. 펜 (Pen Tool)
- 단축키: P
- 용도: 벡터 기반으로 자유로운 선이나 커브를 그릴 때 사용.
- Shift를 누르면 직선 또는 45도 각도로 조절 가능.
5. 텍스트 (Text Tool)
- 단축키: T
- 용도: 텍스트를 입력할 때 사용.
- 자동 줄바꿈: 텍스트를 드래그하여 영역을 정하면 자동 줄바꿈 적용.
6. 손 (Hand Tool)
- 단축키: H
- 용도: 캔버스를 드래그하여 이동할 때 사용.
- Spacebar를 누른 상태에서 마우스를 움직이면 동일한 기능.
7. 확대/축소 (Zoom Tool)
- 단축키: Z
- 용도: 캔버스를 확대/축소할 때 사용.
- Ctrl(Cmd) + 마우스 휠로도 조정 가능.
8. 컴포넌트 만들기
- 단축키: Ctrl (Cmd) + Alt + K
- 용도: 선택한 요소를 재사용 가능한 컴포넌트로 변환.
9. 오토 레이아웃 (Auto Layout)
- 단축키: Shift + A
- 용도: 버튼, 카드, 리스트 등 요소를 자동으로 정렬 및 크기 조정할 때 사용.
10. 그룹/그룹 해제
- 단축키:
- 그룹: Ctrl (Cmd) + G
- 그룹 해제: Ctrl (Cmd) + Shift + G
- 용도: 여러 개의 요소를 묶어서 정리할 때 사용.
11. 정렬 & 분배 (Align & Distribute)
- 단축키: Shift + A (오토 레이아웃 사용 시 자동 정렬)
- 용도: 선택한 요소들을 정렬하거나 일정한 간격으로 배치.
12. 복제 (Duplicate)
- 단축키: Ctrl (Cmd) + D
- 용도: 선택한 요소를 빠르게 복제.
13. 레이어 잠금/잠금 해제
- 단축키: Ctrl (Cmd) + Shift + L
- 용도: 요소를 실수로 편집하지 않도록 잠금.
14. 컴포넌트 인스턴스 변경
- 단축키: Ctrl (Cmd) + Shift + B
- 용도: 컴포넌트 인스턴스를 마스터 컴포넌트와 연결 해제.
15. 스마트 선택 (Smart Selection)
- 단축키: Shift + 방향키
- 용도: 여러 개의 요소 간 간격을 일정하게 조정.
16. 바로 이전 작업 실행 취소
- 단축키: Ctrl (Cmd) + Z
- 용도: 이전 작업을 취소.
17. 바로 이전 실행 취소한 작업 복구
- 단축키: Ctrl (Cmd) + Shift + Z
- 용도: 실행 취소한 작업을 다시 복구.
🔹 추가 기능
🔸 프로토타이핑 (Prototype Mode)
- 용도: 화면 간 인터랙션(전환 애니메이션)을 설정할 때 사용.
- 프로토타입 연결: 개체를 선택하고 + 버튼을 이용해 연결.
🔸 플러그인 사용
- 단축키: Ctrl (Cmd) + Shift + P
- 용도: Figma 플러그인을 검색 및 실행.
📌 MECE & CRUD 개념 정리
1️⃣ MECE (Mutually Exclusive, Collectively Exhaustive)
🔹 정의:
MECE는 문제를 분석하거나 데이터를 그룹화할 때 서로 중복되지 않으며(Mutually Exclusive), 모든 요소를 포함(Collectively Exhaustive)하도록 하는 논리적 사고 방식.
🔹 MECE의 특징
✅ 서로 중복 없이(독립적) → 동일한 요소가 여러 그룹에 속하지 않음
✅ 빠짐없이(포괄적) → 모든 경우를 포함해야 함
예시)
❌ 중복된 분류 (비효율적)
- IT 직군: 개발자, 디자이너, 엔지니어, 웹 개발자 (중복 있음)
✅ MECE 원칙 적용 (효율적) - IT 직군: 개발자, 디자이너, 기획자, PM (중복 없이 완전한 분류)
🔹 MECE 적용 방법
- Tree 구조 활용 → 큰 개념에서 작은 개념으로 세분화
- 독립적인 기준 사용 → 겹치지 않도록 그룹 나누기
- 모든 가능성 포함 → 빠지는 요소가 없는지 확인
📌 MECE 활용 예시
✔️ 사업 전략: 시장을 "국내 / 해외"로 구분
✔️ 사용자 분석: 고객을 "신규 / 기존"으로 나눠 데이터 분석
✔️ 소프트웨어 설계: 기능을 "입력 / 처리 / 출력"으로 나누어 개발
2️⃣ CRUD (Create, Read, Update, Delete)
🔹 정의:
CRUD는 데이터베이스에서 가장 기본적인 네 가지 연산으로, 시스템의 모든 데이터 처리가 이 네 가지 연산을 기반으로 이루어짐.
🔹 CRUD 동작 방식
연산설명SQL 연산
| Create (생성) | 데이터를 새로 추가 | INSERT |
| Read (조회) | 기존 데이터를 검색 및 조회 | SELECT |
| Update (수정) | 기존 데이터를 변경 | UPDATE |
| Delete (삭제) | 데이터를 제거 | DELETE |
🔹 CRUD 예시
🔹 웹 애플리케이션에서 CRUD
- 사용자 등록(Create): 회원가입 (INSERT INTO users ...)
- 사용자 정보 조회(Read): 로그인 시 프로필 정보 확인 (SELECT * FROM users WHERE id=1)
- 사용자 정보 수정(Update): 비밀번호 변경 (UPDATE users SET password='newpass' WHERE id=1)
- 사용자 삭제(Delete): 계정 탈퇴 (DELETE FROM users WHERE id=1)
🔹 RESTful API에서 CRUD
HTTP MethodCRUD 연산예시
| POST | Create | POST /users (새 사용자 생성) |
| GET | Read | GET /users/1 (사용자 정보 조회) |
| PUT/PATCH | Update | PUT /users/1 (사용자 정보 수정) |
| DELETE | Delete | DELETE /users/1 (사용자 삭제) |
3️⃣ MECE & CRUD의 연관성
- MECE는 데이터를 논리적으로 그룹화하는 개념이며, CRUD는 데이터를 처리하는 방법.
- 데이터 모델링을 할 때 MECE 원칙을 적용하면 CRUD 연산 설계가 체계적으로 가능.
- 예를 들어, 사용자(User), 주문(Order), 상품(Product) 등의 개념을 MECE 원칙에 맞게 분류한 후, 각 개념에 대해 CRUD 연산을 적용하면 중복 없이 완전한 데이터 설계가 가능.
📌 결론
✅ MECE → 개념 & 논리적 분류
✅ CRUD → 데이터 처리 & 시스템 설계
✅ 두 개념을 함께 활용하면 논리적으로 깔끔한 데이터 설계 가능!
참고 사이트: https://www.awwwards.com
(예습) Figma 오토 레이아웃(Auto Layout) 핵심 정리 🎨✨
1️⃣ 오토 레이아웃이란?
- Figma의 자동 정렬 기능으로 요소들이 자동으로 크기 조절 & 정렬됨.
- CSS의 flexbox와 유사하게 작동.
- 버튼, 리스트, 카드, 메뉴, 반응형 UI 등에 필수!
2️⃣ 오토 레이아웃 적용 방법
💡 단축키: Shift + A
- 오토 레이아웃을 적용할 요소 선택
- 단축키 Shift + A 또는 오른쪽 클릭 → “Add Auto Layout” 선택
- 오른쪽 패널에서 정렬 & 간격 조정
3️⃣ 주요 기능
4️⃣ 중첩 오토 레이아웃 활용 (Nesting)
- 리스트 같은 복잡한 구조 만들 때 사용.
- 예시) 프로필 카드
- 이미지 + 텍스트 → 가로 방향 오토 레이아웃 적용.
- 여러 개의 카드를 모아 세로 오토 레이아웃으로 감싸기.
5️⃣ 반응형 디자인 적용법
- Hug → 내용 크기에 맞게 프레임 자동 조절
- Fill → 부모 프레임을 가득 채우도록 확장
- Auto spacing → 요소 간격이 유동적으로 변경됨
- Wrap 기능 → 콘텐츠가 많아지면 자동으로 다음 줄로 넘어감 (예: 태그 UI)
6️⃣ 프로토타이핑 활용
- 변형(Variants)과 결합 → 클릭 시 아코디언 메뉴 열림/닫힘
- Smart Animate와 함께 사용 → 요소 크기 변화 애니메이션 가능
- 동적 리스트 구현 → 항목 추가/삭제 시 다른 요소가 자동으로 정렬됨
7️⃣ 실전 팁 & 주의할 점
✅ Shift + A 단축키 활용하여 빠르게 적용
✅ 컴포넌트와 결합하면 유지보수 편리
✅ 너무 많은 중첩 사용 금지! (복잡해짐)
✅ 절대 위치(Absolute Position) 기능 활용하면 특정 요소를 겹쳐 배치 가능
✅ 텍스트 & 아이콘 정렬 문제 발생 시 → "Text baseline alignment" 체크
'복습' 카테고리의 다른 글
| DAY 09 ㅣ 디자인 기초 / 행과 열 / 행간과 자간, 커닝 / 서체와 폰트 / 6:3:1 컬러 비율 (0) | 2025.03.18 |
|---|---|
| DAY 05 ㅣ 피그마 기초 / 부모 컴포넌트 & 자식 컴포넌트 / Combine Variants (3) | 2025.03.12 |
| DAY 04 ㅣ 피그마 기초 / 디자인 가이드 (0) | 2025.03.11 |
| DAY 02 ㅣ UI와 UX (0) | 2025.03.07 |
| DAY 01 ㅣ 디자인이란? 디자인 씽킹 방법론 (1) | 2025.03.06 |
도전할 계기, 포기하지 않는 힘
2025. 3. 9. 01:20
나는 UX 디자인 커리어를 준비하는 취업 준비생이다. 멀티미디어 디자인을 전공했지만, 상업 사진 분야에서 경력을 쌓아왔다. 그러다 서른 중반이 되어 새로운 도전을 하게 되었다. 그동안 사회생활을 하며 많은 시행착오를 겪었고, 실패와 포기도 많았던 게 기억난다. 그 경험들이 나에게 도움이 된 부분도 있지만, 때론 새로운 시도를 망설이게 만드는 이유가 되기도 했다. 익숙한 것만 하려다 보니 내 일적인 경험은 점점 경직되어 갔다.
어떻게 하면 달라질 수 있을까- 고민할 힘이 필요하다고 느꼈다. 그래서 일단 쉬어야 한다고 판단했다. 다행히 남편의 이해와 지지를 받아 공부를 다시 시작할 수 있었다. 일을 쉬는 동안 남편의 강력한 추천으로 ‘로스트아크’라는 게임을 하게 되었는데, 이 게임이 내게 예상치 못한 변화를 가져다주었다.
로스트아크는 팀워크가 중요한 게임이다. 레이드라는 콘텐츠에서는 8명이 한 팀이 되어 협력해야 한다. 처음에는 수없이 많은 실수를 했고, 질타를 받기도 했다. 하지만 계속해서 도전하고 실패를 극복하면서 점점 성장하는 나 자신을 발견하게 되었다. 신기하게도 이 경험이 내 터닝 포인트가 되었다. 나는 무언가를 다시 시도하고, 이겨내고, 결국 해낼 수 있다는 자신감을 얻게 되었다.
그 자신감을 바탕으로 일찍 일어나는 습관을 들이기 시작했고, 조깅도 시작했다. 작은 시작이 정말 중요하다는 걸 뒤늦게 깨닫게 되었지만, 그만큼 더 깊이 와닿았다. 마치 머리를 띵 맞고 정신이 번쩍 든 느낌이었다.
최근 UX 디자인을 공부하면서 문득 로스트아크에서의 경험이 떠올랐다. 사실 UX 디자인도 게임과 비슷한 점이 많다. 레이드에서 파티원과 협력해야 하듯이, UX 디자인도 다양한 팀원들과 협업하는 과정이 중요하다. 디자이너 혼자서 모든 걸 결정하는 것이 아니라, 개발자, 기획자, 마케터 등 여러 사람들과 의견을 조율하며 최적의 사용자 경험을 만들어 가야 한다. 게임에서 내가 팀원들과 소통하고 역할을 조율하며 레이드를 공략했던 경험이 UX 디자인에서도 그대로 적용될 수 있다는 걸 깨달았다.
또한 게임에서는 보스 패턴을 파악하고 전략을 바꿔가며 반복적으로 도전하는 과정이 필수적이었다. UX 디자인에서도 사용자의 피드백을 반영해 디자인을 지속적으로 개선하는 과정이 중요하다. 처음 만든 디자인이 완벽할 수는 없고, 여러 번의 테스트와 피드백을 통해 점점 더 나은 결과물로 발전해 나가는 것이다. 마치 어려운 레이드를 여러 번 시도하면서 점점 공략법을 찾아가는 것처럼 말이다.
그리고 나는 기존에 사진과 디자인을 경험해 온 만큼, UX 디자인에서도 나만의 강점을 살릴 수 있지 않을까 생각했다. 사진을 찍을 때 구도를 고민하고 색의 조화를 맞추던 감각이 UX 디자인에서 레이아웃을 잡고 색상을 선택하는 데에도 그대로 적용될 수 있을 것이다. 또, 사진을 통해 감정을 전달하려고 노력했던 것처럼 UX 디자인에서도 사용자에게 감성적인 경험을 제공할 방법을 고민할 수 있다. 단순히 예쁜 화면을 만드는 것이 아니라, 사용자가 편안하게 느끼고 원하는 정보를 쉽게 찾을 수 있도록 돕는 것이 UX 디자인의 핵심이니까.
이렇게 하나씩 연결해보니, 내가 그동안 경험했던 것들이 UX 디자인을 배우는 데 큰 도움이 될 수 있다는 걸 알게 되었다. 게임에서 팀워크를 배우고, 사진에서 시각적 감각을 익히고, 디자인에서 사용자의 감정을 고려하는 법을 배웠다. 이 모든 경험이 UX 디자인이라는 새로운 길을 가는 데 밑바탕이 되어줄 거라고 믿는다.
처음 시작할 땐 두렵기도 했지만, 이제는 조금씩 자신감이 생긴다. 마치 레이드에서 처음엔 보스의 패턴을 전혀 몰라 우왕좌왕하다가, 점점 익숙해지면서 공략을 성공해 나가는 것처럼. 나도 이렇게 한 걸음씩 나아가다 보면, 언젠가는 UX 디자이너로서 자리 잡을 수 있겠지. 뭐든 할 수 있고, 단지 시간과 집중이 필요할 뿐이다. 그렇게 믿으며 앞으로도 계속 도전해보려고 한다.
'일기' 카테고리의 다른 글
| 피그마 기초 수업, 그리고 배움에 대한 생각 (0) | 2025.03.17 |
|---|---|
| UX디자인, 어렵지만 가치 있는 분야 (1) | 2025.03.13 |
| 피그마 기초 수업 두 번째 날: 오토 레이아웃과 포트폴리오 방향성 고민 (0) | 2025.03.12 |
| 피그마 첫 수업날, 기절하고 깨어나서 적는 일기 (1) | 2025.03.11 |
| AGI 시대를 준비하는 UX/UI 디자이너의 마인드 셋 (1) | 2025.03.08 |
AGI 시대를 준비하는 UX/UI 디자이너의 마인드 셋
2025. 3. 8. 14:28
요즘 남편과 대화를 나누다 보면 AI 이야기가 빠지지 않는다. 특히 AGI(Artificial General Intelligence), 즉 범용 인공지능의 시대가 오면 우리가 일하는 방식이 어떻게 바뀔지에 대한 이야기를 자주 한다. AI 기술이 점점 발전하면서, 단순 반복적인 작업뿐만 아니라 창의적인 분야까지 영향을 미치는 시대가 올 것 같다. 그렇다면, 나는 UX/UI 디자이너로서 어떤 자세를 갖춰야 할까?
1. 'AI를 활용하는 디자이너'가 되자
AI가 단순한 툴을 넘어 강력한 보조자로 자리 잡는다면, 이를 활용하는 능력은 필수가 될 것이다. UX/UI 디자인에서도 AI를 활용하면 사용자의 행동 패턴을 분석하고, 개인화된 경험을 설계하는 데 도움을 받을 수 있다. 나도 요즘 Figma의 AI 기능을 적극적으로 탐색하고 있고, 앞으로 디자인 워크플로우에서 AI가 어떻게 접목될 수 있을지 고민해보려 한다.
2. 인간 중심 디자인(Human-Centered Design)을 더욱 강조하자
AI가 강력해질수록 ‘사람’의 역할이 더 중요해질 거라고 생각한다. 결국 AI는 데이터를 기반으로 최적의 결과를 제시할 뿐, 감성적인 부분이나 맥락을 완벽히 이해하지 못할 수도 있다. 그렇기 때문에 디자이너로서 '공감 능력'과 '사용자 중심 사고'를 더욱 날카롭게 다듬어야 한다. 기술보다 인간을 먼저 바라보는 자세가 중요하다.
3. 'AGI와 협업하는 시대'를 상상하자
현재 우리가 사용하는 AI는 특정한 역할을 수행하는 '약인공지능(Weak AI)'이지만, AGI는 인간과 비슷한 수준의 사고를 할 수 있는 기술이다. 미래에는 AGI가 UX 리서치를 대신해주거나, 인터페이스를 자동으로 최적화하는 시대가 올 수도 있다. 그렇다면, 우리는 단순한 디자인 작업을 넘어서, AI가 제안한 결과를 분석하고, ‘디자인 전략’과 ‘창의적 방향’을 설정하는 역할에 집중해야 하지 않을까?
4. 끊임없이 배우고, 변화에 유연하게 적응하자
AI가 발전하는 속도를 보면, 정해진 틀에 갇혀 있는 사람은 도태될 수밖에 없다. 내가 할 수 있는 것은 ‘배움을 멈추지 않는 것’이다. 디자인 툴뿐만 아니라 데이터 분석, 프론트엔드 개발, AI 기술에 대한 기본적인 이해를 쌓아두는 것이 큰 경쟁력이 될 것 같다.
5. 읽어볼 만한 책 추천
AGI 시대에 대비하면서 도움이 될 만한 책들을 정리해봤다.
- 『AI 슈퍼파워』 – 리카이푸
- AI 기술이 사회와 산업에 미치는 영향을 분석한 책. UX/UI 디자이너로서 AI의 발전이 어떤 방향으로 흘러갈지 큰 그림을 이해하는 데 도움을 줄 것 같다.
- 『생각하는 디자인』 – 존 콜코
- UX 디자인의 본질을 탐구하는 책으로, 인간 중심 디자인과 문제 해결 능력을 키우는 데 좋다.
- 『UX의 7가지 원칙』 – 피터 모빌
- UX 디자인의 기본 원칙을 다루는 책으로, AI 시대에도 변하지 않는 ‘핵심 개념’을 이해하는 데 도움이 될 것이다.
- 『휴먼+머신』 – 폴 도허티 & 제임스 윌슨
- AI와 인간이 협력하는 시대에 대한 통찰을 제공하는 책. 앞으로 디자인 프로세스에서 AI가 어떻게 함께할지 고민해볼 수 있다.
- 『알고리즘이 당신에게 이것을 추천합니다』 – 크리스틴 라거
- AI 추천 시스템이 UX에 어떤 영향을 미치는지 이해하는 데 유용하다. 사용자 경험과 데이터가 어떻게 연결되는지 공부하기 좋다.
마무리하며
UX/UI 디자이너로서 AGI 시대를 대비하는 핵심은 ‘기술을 두려워하지 않는 태도’와 ‘인간 중심 사고’를 유지하는 것이다. AI가 도구가 아니라 ‘함께 일하는 동료’가 되는 시대가 온다면, 우리는 AI를 활용해 더 나은 사용자 경험을 만들어갈 수 있어야 한다. 기술의 변화를 지켜보며 계속해서 배우고, 적응하는 것이 내가 가져가야 할 방향이라는 생각이 든다.
이제 본격적으로 내 디자인 공부를 AI와 함께하는 방법을 고민해봐야겠다. 오늘의 인사이트를 제공한 남편에게 감사의 인사를 몰래 전한다.
'일기' 카테고리의 다른 글
| 피그마 기초 수업, 그리고 배움에 대한 생각 (0) | 2025.03.17 |
|---|---|
| UX디자인, 어렵지만 가치 있는 분야 (1) | 2025.03.13 |
| 피그마 기초 수업 두 번째 날: 오토 레이아웃과 포트폴리오 방향성 고민 (0) | 2025.03.12 |
| 피그마 첫 수업날, 기절하고 깨어나서 적는 일기 (1) | 2025.03.11 |
| 도전할 계기, 포기하지 않는 힘 (2) | 2025.03.09 |
DAY 02 ㅣ UI와 UX
2025. 3. 7. 18:15
UX 디자인 이론과 대표적인 앱 사례 분석
1. 게슈탈트 원칙 (Gestalt Principles)
📌 이론 개요
게슈탈트 원칙은 인간이 시각적 요소를 어떻게 인식하고 그룹화하는지에 대한 심리학적 원칙으로, UX/UI 디자인에서 중요한 역할을 합니다.
📌 주요 원칙과 대표 앱 사례
✅ (1) 근접성의 원칙 (Proximity Principle) – 유튜브 (YouTube)
- 근접한 요소들은 서로 관련이 있는 것으로 인식됨.
- 유튜브는 추천 동영상이 한 그룹으로 묶여 있어 사용자가 직관적으로 연관된 콘텐츠를 찾을 수 있음.
✅ (2) 유사성의 원칙 (Similarity Principle) – 인스타그램 (Instagram)
- 색상, 모양, 크기가 비슷한 요소는 하나의 그룹으로 인식됨.
- 인스타그램의 피드는 이미지와 텍스트 배치가 동일한 패턴으로 구성되어 있어 사용자가 빠르게 적응할 수 있음.
✅ (3) 연속성의 원칙 (Continuity Principle) – 넷플릭스 (Netflix)
- 선이나 패턴이 연속적으로 연결될 때 같은 그룹으로 인식됨.
- 넷플릭스의 가로 스크롤 방식 추천 섹션은 콘텐츠가 자연스럽게 이어지는 듯한 느낌을 줌.
✅ (4) 폐쇄성의 원칙 (Closure Principle) – 구글 로고 (Google)
- 불완전한 형태라도 사용자는 완전한 것으로 인식.
- 구글 로고는 몇 가지 색상의 도형만으로 구성되어 있지만, 사용자는 전체적인 형태를 구글 로고로 인식함.
✅ (5) 공통성의 원칙 (Common Fate Principle) – 카카오톡 (KakaoTalk)
- 같은 방향으로 움직이는 요소들은 하나의 그룹으로 인식됨.
- 카카오톡의 채팅 목록에서 새로운 메시지가 있는 대화창이 같은 위치(상단)로 이동하여 시각적으로 강조됨.
2. 힉의 법칙 (Hick’s Law)
📌 이론 개요
선택지가 많을수록 사용자의 의사 결정 시간이 증가하므로 필요한 정보만 제공해 인지 부담을 줄이는 것이 중요함.
📌 대표 앱 사례 – 애플 (Apple)
- 아이폰 설정 메뉴는 필수 기능만 남기고 복잡한 설정을 ‘더보기’ 옵션으로 숨김.
- 맥북의 트랙패드는 버튼 수를 최소화하고 단순한 제스처 조작으로 사용성을 높임.
🔹 UX 디자인 적용 포인트
✅ 불필요한 옵션을 제거하여 사용자 부담 최소화
✅ 단계적으로 옵션을 제공하여 탐색 시간을 단축
3. 피츠의 법칙 (Fitts’ Law)
📌 이론 개요
화면에서 목표 요소(버튼, 링크 등)가 클수록, 그리고 가까울수록 더 쉽게 클릭할 수 있음.
📌 대표 앱 사례 – 페이스북 (Facebook)
- 좋아요(👍), 공유(🔄), 댓글(💬) 버튼이 크고 손가락이 닿기 쉬운 하단에 위치.
- 모바일에서는 하단 내비게이션 바를 크게 배치하여 한 손으로 쉽게 조작 가능.
🔹 UX 디자인 적용 포인트
✅ 주요 버튼은 크고 손이 닿기 쉬운 위치에 배치
✅ 터치 타겟 크기를 충분히 확보하여 실수 방지
4. 제이콥의 법칙 (Jakob’s Law)
📌 이론 개요
사용자는 이미 익숙한 디자인 패턴을 기대하므로, 기존의 웹사이트나 앱의 UX/UI와 비슷하게 설계해야 사용성이 높아짐.
📌 대표 앱 사례 – 아마존 (Amazon)
- 장바구니 아이콘, 검색 창 상단 배치, 상품 상세 페이지 구성 등 대부분의 쇼핑몰과 동일한 구조를 사용.
- 사용자는 별도의 학습 없이도 직관적으로 탐색할 수 있음.
🔹 UX 디자인 적용 포인트
✅ 기존에 익숙한 UI/UX 패턴을 유지
✅ 불필요한 실험적 디자인을 줄이고 직관적인 사용성을 우선
5. 밀러의 법칙 (Miller’s Law)
📌 이론 개요
사람의 단기 기억 용량은 7 ± 2개 요소 정도이므로, 한 번에 너무 많은 정보를 제공하면 사용자가 쉽게 피로감을 느낌.
📌 대표 앱 사례 – 넷플릭스 (Netflix)
- 카테고리별 최대 7개의 콘텐츠를 한 번에 보여줌.
- ‘더 보기’ 옵션을 사용해 사용자가 필요할 때만 추가 정보 탐색 가능.
🔹 UX 디자인 적용 포인트
✅ 한 화면에 제공하는 정보 개수를 최소화
✅ 중요 정보만 먼저 보여주고, 추가 정보는 점진적으로 노출
'복습' 카테고리의 다른 글
| DAY 09 ㅣ 디자인 기초 / 행과 열 / 행간과 자간, 커닝 / 서체와 폰트 / 6:3:1 컬러 비율 (0) | 2025.03.18 |
|---|---|
| DAY 05 ㅣ 피그마 기초 / 부모 컴포넌트 & 자식 컴포넌트 / Combine Variants (3) | 2025.03.12 |
| DAY 04 ㅣ 피그마 기초 / 디자인 가이드 (0) | 2025.03.11 |
| DAY 03 ㅣ 피그마 기초 / MECE / CRUD (0) | 2025.03.10 |
| DAY 01 ㅣ 디자인이란? 디자인 씽킹 방법론 (1) | 2025.03.06 |
[디자인부트캠프] DAY 02: UX원칙과 UX디자인이 잘 적용된 굿 사례 분석 후 컴포넌트 활용하여 만들어보기
2025. 3. 7. 17:47
지그재그 앱을 통한 UX 디자인 원칙 정리
① 게슈탈트 원칙 (Gestalt Principles)
1. 공통성의 원리 (Common Region)
동일한 배경, 테두리, 컬러로 그룹을 형성하면 하나의 덩어리로 인식됨.
✅ 지그재그 앱 적용 사례
- 상품 카드 디자인: 각 상품은 테두리가 있는 카드 형태로 구분 → 해당 영역이 하나의 그룹임을 직관적으로 알 수 있음.
- 필터 영역 강조: 필터 옵션(카테고리, 브랜드 선택 등)은 테두리 박스로 감싸져 있어 그룹화됨.
📌 효과: 화면 구성의 일관성 증가, 사용자의 정보 탐색 효율 향상.
2. 연속성의 원칙 (Continuity Principle)
요소들이 정렬된 패턴을 따를 때, 사용자는 시각적으로 이를 자연스럽게 따라감.
✅ 지그재그 앱 적용 사례
- 상품 리스트 정렬: 수평 스크롤 가능한 추천 상품은 가로로 정렬되어 있어 사용자가 자연스럽게 스와이프하도록 유도.
- 카테고리/필터 메뉴 배열: 메뉴가 한 줄로 정렬되어 있어 좌우 탐색이 용이.
📌 효과: 사용자 흐름을 자연스럽게 유도, 탐색 효율성 증가.
3. 폐쇄성의 원칙 (Closure Principle)
불완전한 형태라도 뇌가 자동으로 채워 하나의 완전한 이미지로 인식함.
✅ 지그재그 앱 적용 사례
- 상품 카드 디자인: 상품 썸네일과 상품 정보(이름, 가격, 리뷰)가 하나의 카드 안에 배치되며, 테두리가 명확하지 않아도 사용자는 하나의 덩어리로 인식.
- 아이콘과 버튼 디자인: ‘찜(♥)’ 아이콘이 단순한 윤곽선(Outline) 형태일 경우에도, 사용자는 이를 전체적인 하트 형태로 인식하고 기능을 예측.
📌 효과: 시각적 피로 감소, 인지적 효율 증가.
4. 근접성의 원칙 (Proximity Principle)
가까이 배치된 요소들은 같은 그룹으로 인식됨.
✅ 지그재그 앱 적용 사례
- 상품 정보 배치: 상품 이미지 바로 아래에 상품명, 가격, 리뷰 개수가 함께 배치 → 사용자가 이 정보들을 하나의 단위로 인식.
- 찜(♥) 아이콘과 상품 카드의 근접성: 각 상품의 ‘찜’ 아이콘이 이미지 안쪽 상단에 배치 → 해당 상품과 연관된 기능임을 직관적으로 이해 가능.
📌 효과: 정보를 직관적으로 그룹화, 사용자의 시선 이동 최소화.
5. 유사성의 원칙 (Similarity Principle)
형태, 색상, 크기가 비슷한 요소들은 같은 그룹으로 인식됨.
✅ 지그재그 앱 적용 사례
- 아이콘 통일성: ‘찜(♥)’, ‘장바구니(🛍)’, ‘검색(🔍)’ 등 주요 아이콘은 동일한 스타일(라인 디자인)로 구성 → 같은 기능으로 인식됨.
- 상품 목록의 그리드 형태: 동일한 크기의 상품 이미지가 반복적으로 배치되어 있어 리스트를 일관되게 인식.
📌 효과: 사용자 경험의 일관성 유지, UI 학습 비용 절감.
② 힉의 법칙 (Hick’s Law)
선택지가 많을수록 의사결정 시간이 증가함.
✅ 지그재그 앱 적용 사례
- 홈 화면에서 큐레이션된 콘텐츠 제공 (ex. 추천 상품, 인기 랭킹) → 첫 화면에서 선택 부담 감소
- 온보딩 과정에서 개인화된 추천 제공 → 사용자의 관심사를 미리 필터링
- 필터 검색 기능 제공 → 방대한 상품 중 원하는 조건만 추려볼 수 있음
📌 효과: 사용자의 결정 부담 감소, 빠른 쇼핑 경험 제공.
③ 피츠의 법칙 (Fitts’ Law)
클릭/터치 대상이 클수록, 손가락이 닿기 쉬운 곳에 있을수록 빠르게 선택 가능.
✅ 지그재그 앱 적용 사례
- 상품 이미지 크기 크게 배치 → 사용자가 탭하기 쉽게 유도
- 찜(♥), 즐겨찾기(★) 아이콘을 넉넉한 크기로 배치 → 오작동 방지
- 하단 네비게이션 바(홈, 카테고리, 찜, 마이페이지) 위치 최적화 → 엄지손가락이 닿기 쉬운 곳에 배치
📌 효과: 터치 편의성 증가, 오작동 방지, 빠른 인터랙션 가능.
④ 제이콥의 법칙 (Jakob’s Law)
사용자는 기존에 익숙한 UI 패턴을 기대함.
✅ 지그재그 앱 적용 사례
- 타 쇼핑몰과 유사한 UI 구조 (하단 바텀 내비게이션, 상품 리스트 디자인) → 별도 학습 없이 쉽게 사용 가능
- 표준화된 아이콘 사용 (돋보기=검색, 하트=찜, 장바구니=구매) → 직관적으로 기능 이해 가능
📌 효과: 기존 이커머스 경험을 살려 빠른 적응, UX 학습 부담 감소.
⑤ 밀러의 법칙 (Miller’s Law)
인간의 단기 기억 용량은 7±2개 항목 정도이므로, 정보를 적절히 묶어서 제공해야 함.
✅ 지그재그 앱 적용 사례
- 메인 메뉴 5개 이하로 구성 (홈, 스토어, 카테고리, 찜, 마이페이지) → 정보 과부하 방지
- 상품 검색 결과를 단계적으로 필터링 가능 → 정보를 한 번에 많이 노출하지 않음
- 리뷰 요약 제공 (ex. "리뷰 한눈에 보기") → 사용자가 방대한 정보 속에서 핵심만 파악 가능
📌 효과: 인지 부담 감소, 정보 처리 속도 향상, 편리한 쇼핑 경험 제공.
실습 과제 : '지그재그' 앱
마무리
오늘 수업을 통해 실질적인 UX 이론을 깊이 있게 이해할 수 있었으며, 실제 사례를 분석하며 이러한 원리가 어떻게 적용되는지를 차근차근 살펴볼 수 있어 매우 뜻깊은 시간이었습니다. 이론적 개념을 실무 사례와 연결 지어 학습하면서 UX 디자인에 대한 인사이트를 한층 더 넓힐 수 있었고, 이를 통해 더욱 체계적인 시각을 가질 수 있을 것이라 기대됩니다.
앞으로 다양한 경험을 쌓고 시야를 더욱 확장한다면, 명확한 기준을 바탕으로 효과적인 디자인을 제안할 수 있는 전문가로 성장할 수 있을 것이라 생각합니다. 아직 배울 것이 많고 갈 길이 멀지만, 꾸준히 노력하며 발전해 나가겠습니다.
'과제 > 본수업 과제' 카테고리의 다른 글
[디자인부트캠프] DAY 01: 5Whys를 통해 문제를 정의 후 솔루션 제안
2025. 3. 6. 17:53
시장 분석
Figma UX 시장 분석 및 기술 분석
Figma는 협업 중심의 클라우드 기반 디자인 툴로, UI/UX 디자인 시장에서 빠르게 성장하며
Adobe XD, Sketch 등과 경쟁하고 있습니다. 아래에서 Figma의 타겟 사용자 분석, 기술 및 플랫폼 분석,
그리고 시장 분석을 구체적으로 살펴보겠습니다.
1. 타겟 사용자 분석 (Target User Analysis)
① 주요 사용자층
Figma의 주 사용자는 디자인 및 개발 관련 직군에 속하며, 팀 기반 협업이 필수적인 환경에서 활용됩니다.
② 사용자의 주요 페인 포인트 & Figma의 해결 방안
2. 기술 및 플랫폼 분석 (Technology & Platform Analysis)
Figma는 웹 기반으로 동작하는 디자인 툴로, 기존 로컬 설치형 프로그램(예: Sketch, Adobe XD)과 차별화됩니다.
① 핵심 기술 스택
② 플랫폼 및 기기 호환성
3. 시장 분석 (Market Analysis)
Figma는 UI/UX 디자인 툴 시장에서 클라우드 기반 협업 기능을 내세워 빠르게 점유율을 높이고 있습니다.
① 업계 동향 및 트렌드
② Figma의 시장 점유율 및 성장
2022년 Adobe가 Figma를 **200억 달러(약 27조 원)**에 인수 발표
전 세계 400만 명 이상의 사용자가 이용
Sketch, Adobe XD 사용자들이 대거 Figma로 이동
현재 UI/UX 디자인 툴 시장에서 가장 빠르게 성장하는 플랫폼
Figma의 UX 차별점
실시간 협업 UX → Google Docs처럼 다수의 사용자가 동시에 작업 가능
웹 기반 접근성 → 별도 설치 없이 Windows, Mac, Linux 모두 지원
개발자 친화적인 UX → Dev Mode 도입으로 개발자 협업 최적화
디자인 시스템 구축 용이 → 팀 라이브러리, 컴포넌트 공유 기능
강력한 플러그인 생태계 → 다양한 플러그인으로 기능 확장 가능
경쟁사 분석
Adobe XD UX 시장 분석 및 기술 분석
Adobe XD는 Adobe가 개발한 UI/UX 디자인 툴로, Adobe Creative Cloud 생태계와 연동된 것이 가장 큰 특징입니다.
하지만 Figma의 급성장과 Adobe의 Figma 인수 발표 이후, 경쟁력이 흔들리고 있는 상황입니다.
여기에서 Adobe XD의 타겟 사용자 분석, 기술 및 플랫폼 분석, 그리고 시장 분석을 구체적으로 살펴보겠습니다.
1. 타겟 사용자 분석 (Target User Analysis)
Adobe XD의 주요 사용자는 Adobe Creative Cloud를 사용하는 디자이너 및 개발자로, 주로 다음과 같은 사용자층을 대상으로
합니다.
① 주요 사용자층
② 사용자의 주요 페인 포인트 & Adobe XD의 해결 방안
2. 기술 및 플랫폼 분석 (Technology & Platform Analysis)
Adobe XD는 Adobe의 강력한 소프트웨어 생태계를 기반으로 구축되었으며, 그래픽 디자인 툴과의 높은 호환성이 강점입니다. 하지만 웹 기반이 아닌 로컬 설치형 소프트웨어라는 점에서 한계를 보입니다.
① 핵심 기술 스택
② 플랫폼 및 기기 호환성
③ Adobe Creative Cloud와의 연동
Adobe XD는 Photoshop, Illustrator와 같은 Adobe 제품군과 긴밀하게 연결되어 있으며, 다음과 같은 연동 기능을 제공합니다.
Photoshop → XD로 전환: UI 디자인을 Photoshop에서 제작 후, XD에서 프로토타입 제작
Illustrator 파일 가져오기: 벡터 그래픽 디자인 후 XD에서 활용
After Effects 연동: 고급 애니메이션 적용 가능
Adobe Fonts & Stock 사용: Adobe의 폰트 및 이미지 라이브러리 활용
3. 시장 분석 (Market Analysis)
① UX/UI 디자인 시장 트렌드 및 대응 방식
② 경쟁사 비교 분석
③ Adobe XD의 시장 점유율 및 성장
2016년 출시 이후 빠르게 성장했으나, Figma의 등장 이후 점유율 감소
2022년 Adobe가 Figma를 200억 달러에 인수 발표, Adobe XD의 미래가 불투명
현재 Adobe XD의 공식적인 신규 기능 업데이트는 거의 중단 상태
기업 및 프로 디자이너들이 Figma로 이동하는 추세
Adobe XD의 UX 차별점 및 한계점
✅ 강점 (차별점)
Adobe 생태계 연동 → Photoshop, Illustrator, After Effects 등과 강력한 연결
강력한 프로토타이핑 기능 → Auto-Animate, 마이크로 인터랙션 지원
고급 디자이너 친화적 UX → 벡터 그래픽 및 애니메이션에 강점
Creative Cloud 활용 가능 → Adobe Fonts, Adobe Stock 등과 연계
❌ 한계점 (단점)
실시간 협업 기능 부족 → Figma의 웹 기반 협업 기능에 밀림
웹 접근성 부족 → 설치형 프로그램으로, 브라우저에서 바로 실행 불가
무료 사용자 접근성 낮음 → 유료 Creative Cloud 구독 필요
미래 불확실성 → Adobe의 Figma 인수로 Adobe XD의 지속 여부 불투명
총평: Adobe XD vs. Figma
현재 UI/UX 디자인 툴 시장에서 Figma가 강력한 우위를 점하고 있으며, Adobe XD는 점차 영향력을 잃고 있는 상황입니다. Adobe XD는 여전히 Adobe 제품과의 호환성이라는 강점이 있지만, 실시간 협업이 필수적인 현대 디자인 워크플로우에서는 부족한 면이 많습니다.
🔥 앞으로의 전망
Adobe가 Figma 인수를 완료하면, Adobe XD는 점진적으로 단종될 가능성이 높음
기존 Adobe 사용자들은 Figma로 전환하거나, Photoshop/Illustrator로 다시 디자인하는 방식으로 변경될 가능성
UI/UX 디자인 툴 시장에서 Figma가 사실상 표준이 되어가는 중
Figma SWOT 분석
Strength
✅ 실시간 협업 기능 (Real-time Collaboration)
✅ 웹 기반 플랫폼 (Cloud-Based)
✅ 디자인-개발 협업 최적화
✅ 디자인 시스템 및 컴포넌트 관리 용이
✅ 빠른 성장과 시장 점유율 확대
Weakness
❌ 오프라인 작업 제한
❌ 고급 그래픽 기능 부족
❌ 모바일/태블릿 지원 부족
❌ 무료 사용자 제한 증가
Opportunity
🚀 디지털 협업 시장 확대
🚀 AI 및 자동화 기능 도입 가능성
🚀 No-Code / Low-Code 트렌드 확산
🚀 교육 및 학습 시장 확대
Threat
⚠️ 경쟁 심화 (Competitor Growth)
⚠️ Adobe 인수 후 변화 가능성
⚠️ 보안 및 기업 데이터 보호 문제
⚠️ 인터넷 의존도 높음
문제 정의: 사용자의 어떤 문제를 발견했나요?
1. 오프라인 작업 제한
문제점 상세 분석: Figma는 클라우드 기반으로 운영되는 디자인 도구이므로 인터넷 연결이 필수적입니다.
이에 따라 다음과 같은 문제점이 발생할 수 있습니다.
🔹네트워크 연결 필요: 프로젝트를 로컬에 저장할 수 없어 인터넷이 차단된 환경에서는 사용이 어렵습니다.
이유: Figma는 클라우드 우선 접근 방식을 채택했습니다.
원인: 로컬 저장 옵션을 제한하여 모든 작업을 클라우드 환경에서 수행하도록 설계되었습니다.
🔹네트워크 이슈로 인한 지연: 서버 응답 속도가 저하되거나 인터넷 장애가 발생할 경우, 프로젝트 로딩과 저장 속도가 느려질 가능성이 큽니다.
이유: 클라우드 서버와의 지속적인 동기화가 필요합니다.
원인: 인터넷 속도와 서버 부하가 작업 속도에 직접적인 영향을 미칩니다.
🔹경쟁 툴 대비 단점: Adobe XD나 Sketch와 같은 소프트웨어는 로컬 작업이 가능하며, 클라우드 동기화가 선택 사항이므로 활용성이 더 높습니다.
이유: Figma는 협업 기능을 중심으로 설계되었습니다.
원인: 로컬 작업보다는 실시간 공동 작업을 우선시하는 구조로 개발되었습니다.
2. 고급 그래픽 기능 부족
문제점 상세 분석: Figma는 UI/UX 디자인에 특화된 툴이지만, 그래픽 디자인 작업에서는 다음과 같은 제한이 있습니다.
🔹비트맵 및 필터 기능 부족: Photoshop이나 Affinity Designer와 비교했을 때 고급 필터, 블렌딩 모드, 이미지 보정 기능이 미흡합니다.
이유: Figma는 벡터 중심의 UI/UX 디자인 툴로 개발되었습니다.
원인: 비트맵 편집 기능을 우선적으로 포함하지 않았기 때문에 그래픽 디자인 용도로 활용하기 어렵습니다.
🔹고급 벡터 편집 기능 부족: Illustrator에서 제공하는 Mesh Gradient, 자유 변형 기능 등이 지원되지 않아 복잡한 벡터 디자인 작업이 어렵습니다.
이유: UI 디자인에 최적화된 도구로 개발되었습니다.
원인: 그래픽 디자인과 일러스트레이션 작업을 위한 세부 기능 개발이 미흡합니다.
🔹3D 및 애니메이션 기능 부족: UI/UX 디자인 중심으로 개발되어 3D 모델링 및 고급 애니메이션 작업이 제한적입니다.
이유: 3D 및 애니메이션 기능은 복잡한 연산과 그래픽 처리가 필요합니다.
원인: Figma는 이러한 기능을 주요 작업 요소로 포함하지 않았습니다.
3. 모바일/태블릿 지원 부족
문제점 상세 분석: Figma는 모바일 및 태블릿에서의 활용성이 제한적이며, 주요 문제점은 다음과 같습니다.
🔹 태블릿에서의 최적화 부족: iPad 및 Android 태블릿에서도 웹 버전 사용이 가능하지만, 터치 인터페이스가 불편하여 작업 효율이 낮습니다.
이유: Figma는 데스크톱 환경을 중심으로 개발되었습니다.
원인: 태블릿 UI/UX 최적화가 부족하여 작업 속도와 편의성이 저하됩니다.
🔹 스타일러스(Apple Pencil) 지원 미흡: Sketch나 Procreate와 달리 스타일러스를 활용한 정밀한 드로잉 기능이 부족합니다.
이유: Figma는 벡터 기반 인터페이스를 강조했습니다.
원인: 스타일러스 지원을 우선적으로 고려하지 않아 드로잉 작업이 불편합니다.
🔹 모바일 전용 기능 부족: 현재 제공되는 Figma Mirror 앱은 미리보기 기능만 제공하며, 모바일에서 직접 편집하는 기능이 거의 없습니다.
이유: 모바일에서의 본격적인 편집 기능 구현이 어렵습니다.
원인: 실시간 협업 중심의 구조로 설계되어 모바일 작업 기능이 제한적입니다.
4. 무료 사용자 제한 증가
문제점 상세 분석: Figma는 초기에는 무료 사용자에게 상당한 기능을 제공하였으나, 최근 제한이 증가하면서 다음과 같은 문제가 발생하고 있습니다.
🔹 무료 팀 프로젝트 제한: 무료 사용자의 경우 프로젝트 파일을 최대 3개까지만 생성할 수 있어 협업에 제약이 생깁니다.
이유: Figma의 수익 모델이 유료 플랜 중심으로 변화하였습니다.
원인: 무료 사용자의 기능이 점차 축소되면서 협업 기능이 제한되었습니다.
🔹 버전 히스토리 저장 제한: 무료 플랜에서는 30일간만 버전 히스토리를 저장할 수 있어 장기적인 프로젝트 관리가 어렵습니다.
이유: 장기적인 히스토리 저장 기능을 유료 사용자에게 제공하는 전략을 채택했습니다.
원인: 지속적인 수익 창출을 위해 기능 차별화가 이루어졌습니다.
5Whys: 왜 문제라고 생각했나요?
솔루션 제시: 문제를 어떻게 해결할 수 있을까요? 왜 그렇게 생각하시나요?
✅ 오프라인 작업 제한 해결 방안
로컬 작업 모드 제공: 데스크톱 앱(Figma Desktop)의 기능을 확대하여 완전한 오프라인 작업이 가능하도록 개선해야 합니다.
이유: 인터넷이 제한된 환경에서도 안정적인 작업이 가능하도록 하기 위함입니다.
오프라인 캐싱 기능 추가: 특정 프로젝트를 로컬에 저장하고, 인터넷 연결 시 자동으로 동기화하는 기능을 제공하면 활용성이 높아질 것입니다.
이유: 사용자가 네트워크 환경에 영향을 받지 않고 연속적으로 작업할 수 있도록 하기 위해 필요합니다.
✅ 고급 그래픽 기능 부족 해결 방안
고급 벡터 편집 기능 강화: Sketch처럼 정교한 패스 편집 기능을 추가하고, Illustrator와의 연동을 강화해야 합니다.
이유: UI 디자인뿐만 아니라 그래픽 작업에서도 활용도를 높이기 위함입니다.
비트맵 및 필터 기능 추가: 기본적인 필터 및 조정 레이어 기능을 제공하여 그래픽 디자인 작업에서 활용도를 높일 필요가 있습니다.
이유: 사용자가 별도의 그래픽 프로그램을 사용하지 않고도 기본적인 이미지 편집이 가능하도록 하기 위함입니다.
✅ 무료 사용자 제한 증가 해결 방안
무료 플랜 혜택 일부 복원: 프로젝트 파일 개수 제한을 완화하거나, 버전 히스토리 저장 기간을 연장하는 방향으로 개선해야 합니다.
이유: 무료 사용자도 장기적인 프로젝트 관리가 가능하도록 하기 위해 필요합니다.
디자인 씽킹을 활용한 경험과 소감
처음 5 Whys 기법을 적용해 문제를 분석하려 했을 때는 어디서부터 시작해야 할지 막막했습니다. 그러나 점차 질문을 반복하면서 문제의 본질을 파악하는 단서를 찾을 수 있었고, 각 문제의 근본 원인을 체계적으로 분석하는 과정이 흥미로웠습니다.
특히, 디자인 씽킹을 적용하면서 문제 해결을 위한 논리적인 사고방식이 중요하다는 점을 깨닫게 되었습니다. 단순히 문제를 나열하는 것이 아니라, 왜 이러한 문제가 발생하는지, 그리고 이를 해결하려면 어떤 접근 방식이 필요한지 깊이 고민하는 과정에서 새로운 시각을 얻을 수 있었습니다.
이번 분석을 통해 리서치 과정에서 문제의 원인을 탐색하는 것이 얼마나 중요한지 체감할 수 있었으며, 앞으로도 디자인 씽킹을 활용하여 더 효과적인 문제 해결 방법을 찾아가고 싶습니다.
'과제 > 본수업 과제' 카테고리의 다른 글
DAY 01 ㅣ 디자인이란? 디자인 씽킹 방법론
2025. 3. 6. 12:01
문제의 근본적인 원인을 파악하는 기술 ‘5 Whys’
‘5 Whys’는 문제의 근본적인 원인을 찾아내는 데 유용한 기법입니다. 단순히 표면적인 이유에 머무르지 않고, “왜?”라는 질문을 다섯 번 반복하면서 점점 더 깊이 있는 원인을 탐색하는 방식입니다.
5 Whys를 활용하는 과정
- 문제를 정의합니다 – 정확히 어떤 문제가 발생했는지 정리합니다.
- 첫 번째 ‘왜?’ – 이 문제가 왜 발생했는지 질문합니다.
- 두 번째 ‘왜?’ – 앞에서 찾은 원인에 대해 다시 ‘왜?’라고 질문합니다.
- 세 번째 ‘왜?’ – 같은 방식으로 계속 원인을 파고듭니다.
- 네 번째, 다섯 번째 ‘왜?’ – 궁극적인 원인이 나올 때까지 반복합니다.
이 방법을 사용하면 단순한 해결책이 아니라, 근본적인 문제를 해결할 수 있는 실질적인 방법을 찾을 수 있습니다.
이 기법을 디자인에 적용할 때 기억해야 할 점
- 표면적인 문제 해결에 그치지 않기: 버튼을 크게 만들거나 색상을 바꾸는 단순한 해결책보다는, 사용자가 왜 불편함을 느끼는지를 파악하는 것이 중요합니다.
- 사용자 관점에서 생각하기: 디자인을 개선할 때는 단순한 미적 요소가 아니라, 사용자의 진짜 니즈를 파악하는 것이 핵심입니다.
- 데이터와 사용자 피드백 활용하기: 감각적으로 판단하는 것이 아니라, 실제 데이터를 기반으로 문제를 분석하는 습관을 들여야 합니다.
- 협업을 통해 다양한 시각에서 접근하기: 기획자, 개발자 등과 함께 문제를 분석하면 더 깊이 있는 해결책을 찾을 수 있습니다.
UI 디자인이 사라질까? 디자인의 미래 전망
최근 UI 디자인이 사라질 수도 있다는 이야기를 많이 듣고 있습니다. AI나 자동화 기술이 발전하면서, 단순한 화면 디자인 작업은 점점 줄어들고 있습니다. 하지만 UI가 완전히 사라지는 것은 아니고, 그 역할과 방식이 변화하는 것에 가깝습니다.
UI 디자인이 변화하는 이유
- 음성 인터페이스(VUI): 스피커나 AI 비서를 이용한 음성 명령이 많아지면서, 기존의 터치 기반 UI가 줄어들고 있습니다.
- 제로 UI: 화면을 직접 조작하지 않아도 되는 인터페이스(예: 제스처, 생체 인식)가 증가하고 있습니다.
- AI 기반 자동 디자인: UI 디자인을 자동으로 생성해주는 AI 도구들이 등장하면서, 기본적인 디자인 작업이 자동화될 가능성이 큽니다.
결국 ‘UI 디자인이 사라진다’는 말은 단순한 화면 디자인 작업이 줄어든다는 의미이고, 오히려 UX와 인터랙션 디자인의 중요성이 더 커질 것으로 보입니다.
앞으로의 디자인 트렌드
- UX 중심의 사고 – 단순히 화면을 예쁘게 만드는 것이 아니라, 사용자의 전체적인 경험을 개선하는 방향으로 변화할 것입니다.
- 개인화된 경험(Personalization) – AI가 사용자의 행동을 분석해 맞춤형 UI/UX를 제공하는 것이 더 중요해질 것입니다.
- 멀티모달 인터페이스 – 음성, 제스처, 터치 등이 결합된 복합적인 인터페이스가 늘어날 것입니다.
- 지속 가능성과 윤리적 디자인 – 접근성을 높이고, 환경을 고려한 디자인이 더욱 중요해질 것입니다.
- 메타버스, AR/VR 인터페이스 – 가상 공간에서의 UI/UX가 점점 더 발전할 것입니다.
UI/UX 디자이너로서 가져야 할 자세
변화하는 디자인 환경에서 경쟁력을 갖추려면, 단순한 UI 디자인 기술만으로는 부족하다고 생각합니다. 앞으로는 문제를 해결하는 능력이 더 중요해질 것입니다.
- 트렌드에 민감해지기: AI, 음성 인터페이스, 제로 UI 같은 새로운 기술을 꾸준히 공부해야 합니다.
- 데이터 기반 사고방식 익히기: 직관적인 디자인도 중요하지만, 사용자 데이터를 분석하고 설득력 있는 디자인을 할 줄 알아야 합니다.
- 사용자의 관점에서 고민하기: 내가 원하는 디자인이 아니라, 사용자에게 진짜 도움이 되는 디자인이 무엇인지 고민해야 합니다.
- 협업 능력 키우기: 개발자, 기획자와 원활하게 소통할 수 있는 능력이 필수적입니다.
- 유연한 사고 유지하기: 디자인 트렌드는 빠르게 변하므로, 고정된 사고방식에서 벗어나 새로운 변화를 적극적으로 받아들여야 합니다.
UI 디자인이 단순히 화면의 요소를 배치하고 예쁘게 꾸미는 작업에서 벗어나, 사용자의 경험(UX)을 근본적으로 개선하는 방향으로 변화하고 있습니다. 이제는 버튼 하나, 컬러 한 가지를 선택하는 것보다 사용자가 어떤 목적을 가지고 서비스를 이용하는지, 어떤 과정을 거쳐 목표를 달성하는지, 그 과정에서 불편함을 느끼는 지점이 어디인지를 깊이 이해하는 것이 훨씬 중요해졌습니다.
따라서 단순히 ‘보기 좋은 디자인’을 만드는 것이 아니라, 사용자의 니즈를 파악하고 문제를 해결할 수 있는 UX 중심의 사고방식을 갖춰야 합니다. 이를 위해서는 데이터를 기반으로 사용자 행동을 분석하고, 서비스 전반에서 발생하는 문제를 탐색하는 능력이 필요합니다. 또한, 기획자, 개발자 등 다양한 직군과 협력하여 최적의 솔루션을 찾아내는 협업 역량도 갖춰야 합니다.
디자인의 역할이 변화하는 지금, 단순한 시각적 요소를 넘어 사용자 경험을 설계하고 최적화하는 능력을 갖춘 디자이너가 되어야 한다고 생각합니다. 결국 UI/UX 디자이너는 단순한 화면 설계자가 아니라, 문제를 깊이 이해하고 해결하는 솔루션을 제안하는 전문가로 성장해야 할 것입니다.
'복습' 카테고리의 다른 글
| DAY 09 ㅣ 디자인 기초 / 행과 열 / 행간과 자간, 커닝 / 서체와 폰트 / 6:3:1 컬러 비율 (0) | 2025.03.18 |
|---|---|
| DAY 05 ㅣ 피그마 기초 / 부모 컴포넌트 & 자식 컴포넌트 / Combine Variants (3) | 2025.03.12 |
| DAY 04 ㅣ 피그마 기초 / 디자인 가이드 (0) | 2025.03.11 |
| DAY 03 ㅣ 피그마 기초 / MECE / CRUD (0) | 2025.03.10 |
| DAY 02 ㅣ UI와 UX (0) | 2025.03.07 |
디자이너 트랙 : 8. 레이아웃 및 디자인 원리
2025. 2. 17. 13:54
1. 레이아웃 구성 원리
그리드 시스템
- 정의 및 필요성: 레이아웃의 균형과 정렬, 간격을 체계적으로 관리하기 위한 기본 틀입니다.
- 설정 방법: 컬럼, 행, 간격(margin, gutter)을 설정하여 일관된 디자인을 유지합니다.
대표 사례:
- Apple (apple.com)
- 정교한 그리드 시스템과 일관된 디자인 적용.
- 균형 잡힌 레이아웃과 정렬을 통한 미적 감각 유지.
정렬 및 간격
- 정렬 원칙: 좌우, 상하 정렬을 통해 시각적 안정성을 확보합니다.
- 간격 조정: 마진과 패딩을 사용하여 콘텐츠 간의 여백을 설정합니다.
대표 사례:
- Medium (medium.com)
- 정리된 콘텐츠 블록과 명확한 정렬로 가독성 극대화.
- 심플한 인터페이스로 사용자 경험 개선.
반응형 디자인
- 원칙 및 적용: 다양한 디바이스(데스크탑, 태블릿, 모바일) 환경에서 디자인이 올바르게 표시되도록 구성합니다.
대표 사례:
- BBC News (bbc.com)
- 다양한 화면 크기에 적응하는 반응형 디자인 적용.
- 뉴스 콘텐츠를 최적의 형태로 제공.
2. 타이포그래피와 색상 이론
타이포그래피
- 기본 요소: 폰트 종류, 크기, 굵기, 행간, 자간 등을 이해합니다.
- 계층 구조: 제목, 본문, 캡션 등의 텍스트 요소 간 차이를 두어 정보 계층을 명확하게 합니다.
- 가독성: 텍스트 배치와 간격 조절로 읽기 쉬운 디자인을 만듭니다.
대표 사례:
- The New York Times (nytimes.com)
- 세련된 타이포그래피를 활용한 고급스러운 디자인.
- 기사별 계층 구조를 명확하게 구분하여 가독성 향상.
색상 이론
- 색상 조합 원리: 보색, 유사색, 트라이어드 색상 조합 등 다양한 기법을 활용합니다.
- 심리적 효과: 색상이 주는 느낌과 분위기를 고려하여 팔레트를 구성합니다.
- 사용자 경험: 색상 대비를 통해 시각적 명확성과 접근성을 개선합니다.
1. 보색(Color Complementary) 조합 활용 사례
- Spotify (spotify.com)
- 보색 대비를 활용하여 강조 요소를 더욱 돋보이게 만듭니다.
- 녹색과 보색인 보라색 톤을 사용하여 감각적인 디자인 연출.
2. 유사색(Analogous) 조합 활용 사례
- Dropbox (dropbox.com)
- 푸른 계열의 유사색을 사용하여 신뢰감 있는 디자인을 구현.
- 부드러운 색상 변화를 통해 사용자 친화적 경험 제공.
3. 트라이어드(Triadic) 색상 조합 활용 사례
- Google (google.com)
- 빨강, 파랑, 노랑의 삼색 조합으로 브랜드 정체성을 강조.
- 명확한 대비로 사용자 경험을 극대화.
4. 사용자 경험을 고려한 색상 디자인 사례
- Airbnb (airbnb.com)
- 따뜻한 색상 팔레트를 사용하여 편안한 느낌을 조성.
- 신뢰감을 주는 부드러운 컬러 배색 활용.
실습
실습 단계 1:
- Frame Tool(F)을 사용하여 기본 웹 페이지 사이즈(예: 1440×1024 픽셀)의 프레임 생성.
- 프레임 선택 후 우측 속성 패널에서 “Layout Grid” 옵션을 활성화하고, 컬럼 그리드를 추가.
- 컬럼 수, 마진, 간격을 설정하여 기본 레이아웃(헤더, 콘텐츠, 푸터 등) 구분.
실습 단계 2: 타이포그래피 연습
- Text Tool(T)로 텍스트 박스 생성 후, 제목, 본문, 캡션 텍스트 각각 입력.
- 제목: Bold 24pt, 본문: Regular 16pt, 캡션: Light 12pt 등 서로 다른 텍스트 스타일 적용.
- 텍스트 간 간격(행간, 자간)을 조절하여 읽기 쉬운 배열 구성.
실습 단계 3: 색상 팔레트 만들기
- 피그마 내 컬러 피커를 사용하여 좋아하는 색상 3~5가지 선택.
- 선택한 색상의 HEX 코드를 기록하고, 사용자 정의 색상 팔레트를 생성.
- 팔레트를 활용해 간단한 UI 요소(버튼, 카드 등)를 디자인하여 색상 대비와 조화 확인.
마무리
이번 내용을 공부하고 실습하면서 프레임 레이아웃을 나누는 것이 생각보다 어려웠습니다. 구글링을 통해 원하는 정보를 찾으려 했지만 마땅한 자료를 찾기 어려웠고, 결국 이것저것 눌러보며 시행착오를 겪었습니다. 하지만 시행착오 속에서 새로운 정보를 발견하는 과정이 흥미로웠고, 점점 더 깊이 이해하게 되는 즐거움을 느낄 수 있었습니다.
앞으로도 계속해서 다양한 시도를 해보고, 그룹원들과 강사님께 질문하며 더욱 발전해 나가야겠다는 생각이 들었습니다.
'과제 > 사전과제' 카테고리의 다른 글
| 디자이너 트랙 : 7. 피그마 기본 개념 (0) | 2025.02.16 |
|---|---|
| 디자이너 트랙 : 6. 디자인 기초 - 색상 이론 (0) | 2025.02.15 |
| 디자이너 트랙 : 5. 디자인 기초 - 디자인 원리 (0) | 2025.02.14 |
| 디자이너 트랙 : 4. 캠프 시작 전 마음 준비물 (1) | 2025.02.13 |
| 디자이너 트랙 : 3. UX/UI 용어 익히기 (0) | 2025.02.12 |
디자이너 트랙 : 7. 피그마 기본 개념
2025. 2. 16. 15:03
레이어(Layer)
레이어는 디자인 요소들이 쌓이는 순서를 나타내며, 각 요소의 위치와 표시 순서를 관리합니다.
레이어 순서 변경
- 한 칸 앞으로/뒤로 이동: Cmd + [ 또는 Cmd + ]
- 맨 앞으로/뒤로 이동: Cmd + Option + [ 또는 Cmd + Option + ]
레이어 생성 및 이름 변경
피그마에서는 텍스트나 도형을 추가할 때 자동으로 레이어가 생성됩니다. 레이어 이름을 더블 클릭하여 변경하면 관리가 더욱 편리합니다.
그룹(Group)
여러 레이어를 하나로 묶어 관리할 수 있는 기능입니다.
- 그룹 생성: Cmd + G
- 그룹 해제: Cmd + Shift + G
프레임(Frame)
프레임은 디자인의 기본 틀로, 다른 도구의 아트보드와 유사한 개념입니다.
프레임 생성 및 프리셋 활용
- 프레임 생성: F 또는 A 키
- 프리셋 선택: 우측 패널에서 Phone, Tablet, Desktop 등의 프리셋 선택
프레임 복제 및 수정
- 복제: Cmd + D 또는 Option + Drag
- 수정: 우측 패널에서 속성 변경 또는 드래그로 크기 조절
섹션(Section)
섹션은 프레임을 그룹화하여 작업을 정리하는 데 사용됩니다.
섹션 생성 및 활용
- 섹션 생성: Shift + S
- 중첩 사용: 섹션 안에 섹션을 추가하여 복잡한 작업을 체계적으로 관리
페이지(Page)
페이지는 하나의 파일 내에서 여러 작업을 체계적으로 관리할 수 있는 상위 개념입니다.
페이지 생성 및 활용 예
- 페이지 생성: 좌측 패널의 + 버튼 클릭
- 활용 예:
- 디바이스별 관리: PC, 모바일, 태블릿
- 작업 단계별 관리: 기획, 와이어프레임, UI 디자인
페이지와 레이어의 차이
| 페이지(Page) | 하나의 파일 안에서 여러 작업을 체계적으로 정리하는 상위 개념. 디자인의 큰 틀을 나눌 때 사용. |
| 레이어(Layer) | 개별적인 디자인 요소들이 쌓이는 구조로, 개별적인 텍스트, 이미지, 도형 등을 포함. |
피그마 우측 디자인 패널 기능
피그마의 '디자인' 패널은 개별 요소의 스타일과 속성을 조정하는 기능을 제공합니다.
주요 기능
- 레이아웃: 크기, 위치, 회전 설정
- 색상 및 그라디언트: Fill 및 Stroke 색상 지정
- 텍스트 스타일: 글꼴, 크기, 정렬 및 행간 조정
- 효과: 그림자, 블러 등의 효과 추가
- 오토 레이아웃: 자동 정렬 및 크기 조정 기능 활성화
실습 1: 피그마 계정 생성 및 새 프로젝트 시작
실습 단계:
- 피그마 홈페이지에 접속하여 회원 가입 및 로그인.
- “Create New File” 버튼을 클릭하여 새 디자인 파일 생성.
- 파일 이름을 “1단계_내 첫 피그마”로 변경.
실습 2: 인터페이스 탐색 및 기본 도구 연습
실습 단계:
- 상단 툴바의 각 도구(Select, Frame, Shape 등)를 클릭하여 기능 미리보기.
- 좌측 레이어 패널에서 “Pages”와 “Layers”의 차이와 구조 파악.
- 우측 속성 패널에서 오브젝트를 선택 후 나타나는 옵션을 탐색.
실습 3: 기본 도형 제작 및 스타일 적용
실습 단계:
- 사각형 도구(R): 캔버스에 클릭 후 드래그하여 사각형 생성.
- 속성 패널 활용: 사각형의 Fill 색상, Stroke(테두리) 및 Shadow(그림자) 효과를 적용.
- 원형 도구(O): 캔버스에 원 그리기 후 크기 및 위치를 조정.
마무리
처음 피그마를 사용할 때는 다소 낯설었으나, 기존에 사용하던 포토샵과 유사한 점이 많아 적응하는 데 큰 어려움이 없었습니다. 전반적으로 첫인상이 매우 긍정적이었으며, 학습 과정에서 약간의 막히는 부분은 구글링을 통해 해결할 수 있어 다행이었습니다. 또한, 직관적이고 흥미로운 프로그램이라는 인상을 받았습니다. 앞으로의 커리큘럼이 어떨지 새로운 툴은 어떤 느낌일지 무척 기대됩니다.
'과제 > 사전과제' 카테고리의 다른 글
| 디자이너 트랙 : 8. 레이아웃 및 디자인 원리 (0) | 2025.02.17 |
|---|---|
| 디자이너 트랙 : 6. 디자인 기초 - 색상 이론 (0) | 2025.02.15 |
| 디자이너 트랙 : 5. 디자인 기초 - 디자인 원리 (0) | 2025.02.14 |
| 디자이너 트랙 : 4. 캠프 시작 전 마음 준비물 (1) | 2025.02.13 |
| 디자이너 트랙 : 3. UX/UI 용어 익히기 (0) | 2025.02.12 |