🍅 케찹으로 보는 UI vs UX
UI (User Interface) = “겉모양 + 첫인상”
병 디자인이 예쁘다.
브랜드 라벨이 고급스럽다.
색감, 형태, 비주얼이 좋아 보인다.
👉 한 줄 정의
“보기 좋게 만들어진 케찹”
➡️ 잘 안 나옴, 흔들어야 함, 손 더러워짐
즉, 보기는 좋은데 쓰기 스트레스 있음
UX (User Experience) = “사용 경험 전체”
뒤집혀 있음 (gravity 활용).
누르면 바로 나옴.
마지막까지 깔끔하게 사용 가능.
👉 한 줄 정의
“스트레스 없이 잘 써지는 케찹”
➡️ 손 안 더러움, 시간 절약, 반복 사용 만족도 높음
쉽게 말해 “예쁜 건 UI, 계속 쓰게 만드는 건 UX”
피그마(Figma)를 제대로 쓰는 디자이너는 무엇이 다를까 — Lean UX·AI·Figma 통합 스킬업, 5주 완성
먼저, UX/UI 디자인이 뭔지부터 짚어볼게요
처음 들으면 낯선 단어들이라 헷갈릴 수 있어요. 핵심만 먼저 짚어볼게요.
UX(User Experience) — 사용자 경험이에요. 앱이나 웹사이트를 쓸 때 느끼는 모든 것이에요. "이 앱, 찾던 게 바로 나오네", "여기서 왜 막히지?" 같은 감정이 모두 UX예요.
UI(User Interface) — 사용자 인터페이스예요. 화면에 실제로 보이는 것들이에요. 버튼, 메뉴, 색상, 글자 크기, 아이콘 같은 시각적 요소 전부를 말해요.
💡
쉽게 말하면, UX는 "얼마나 편하게 쓸 수 있는가", UI는 "얼마나 보기 좋게 만들어졌는가" 예요. 좋은 디자이너는 이 둘을 함께 생각해요.
UI 디자인, 왜 필요한가요?
[이미지: 동일한 정보를 UI 없이 나열한 화면 vs UI가 잘 설계된 화면 비교 일러스트]
앱이나 웹사이트를 쓸 때 "이거 쓰기 편하다"는 느낌이 든 적 있나요? 그 반대로 "뭘 눌러야 하는지 모르겠다"고 느낀 적도 있을 거예요. 그 차이를 만드는 게 바로 UI 디자인이에요.
UI 디자인이 없다면 이런 일이 생겨요.
버튼이 어디 있는지 몰라서 사용자가 그냥 앱을 꺼요
글자가 너무 작거나 색이 배경과 비슷해서 읽기 어려워요
중요한 정보와 덜 중요한 정보가 같은 크기로 나열돼서 뭘 봐야 할지 몰라요
UI 디자인은 단순히 "예쁘게 만드는 것"이 아니에요. 사용자가 원하는 것을 빠르고 쉽게 찾을 수 있도록 화면을 설계하는 것이에요. 잘 만든 UI 하나가 서비스의 이탈률을 줄이고, 매출에도 직접적인 영향을 줘요.
UX 기획/디자인, 왜 필요한가요?
UI가 "화면을 어떻게 보여줄까"라면, UX는 "사용자가 어떤 경험을 하게 할까"예요.
예를 들어볼게요. 음식 배달 앱에서 주문을 하려는데, 결제 단계에서 자꾸 오류가 나요. 화면은 예쁜데 쓰기가 너무 불편해요. 결국 사용자는 앱을 지우고 다른 앱을 써요.
이게 바로 UX가 나쁜 서비스예요. UI는 멀쩡해도 UX가 무너지면 사용자는 떠나요.
UX 기획/디자인은 이런 걸 미리 막아줘요.
사용자가 어떤 순서로 앱을 쓰는지 흐름을 먼저 설계해요
어디서 막히는지, 어디서 포기하는지 미리 예측하고 개선해요
"이 버튼을 왜 여기에 놓았는가"에 대한 근거를 만들어요
UX 기획/디자인이 있으면 만들기 전에 방향이 잡혀요. 반대로 없으면, 다 만들고 나서 "왜 아무도 안 쓰지?"를 반복하게 돼요.
UX/UI 교육, 받은 것과 안 받은 것의 차이
피그마(Figma)를 독학으로 익히는 분들이 많아요. 유튜브, 강의 사이트로 툴 사용법은 충분히 배울 수 있어요. 그런데 막상 포트폴리오를 만들거나 실무에 들어가면 이런 차이가 느껴져요.
교육을 받지 않은 경우 | 교육을 받은 경우 | |
|---|---|---|
포트폴리오 | "이 앱을 예쁘게 만들었어요" | "이 문제를 발견했고, 이렇게 해결했어요" |
디자인 결정 | 감각에 의존 | 사용자 리서치와 근거에 기반 |
수정 요청 시 | "어디를 고쳐야 하지?" 막막함 | 프로세스가 있어서 어디서부터 다시 볼지 알아요 |
협업 | 내 화면만 만들 수 있어요 | 기획자·개발자와 같은 언어로 소통할 수 있어요 |
피드백 대응 | "왜 그렇게 만들었냐"는 질문에 막혀요 | 결정의 근거를 설명할 수 있어요 |
툴을 배우는 것과, 툴을 제대로 쓰는 방법을 배우는 건 달라요. 교육이 채워주는 건 바로 그 간격이에요.
피그마(Figma) 전에 개념을 먼저 배우면 왜 좋을까요?
피그마(Figma)는 훌륭한 도구예요. 그런데 도구는 방향이 정해진 다음에 빛을 발해요.
설계도 없이 집을 먼저 짓기 시작하면 어떻게 될까요? 벽을 다 올린 뒤 "여기에 창문이 있어야 했는데"를 알게 돼요. 허물고 다시 짓는 비용이 엄청나요.
UX/UI 디자인도 똑같아요. 피그마(Figma)를 먼저 켜고 화면을 그리기 시작하면, 나중에 "이게 맞는 방향이었나?"를 반복하게 돼요.
개념을 먼저 배우면 이런 점이 달라져요.
방향이 먼저 잡혀요 누구를 위한 화면인지, 어떤 문제를 푸는 건지 먼저 정하고 피그마(Figma)를 열게 돼요. 방향 없이 그리지 않아요.
피그마(Figma) 기능이 더 빠르게 이해돼요 "Auto Layout이 왜 필요한가"를 모르면 기능이 낯설기만 해요. 반응형 UX 개념을 알고 나면 "아, 이래서 이 기능이 있구나"가 바로 연결돼요.
수정이 줄어들어요 처음부터 사용자 흐름과 문제 정의를 하고 화면을 그리면, 나중에 "처음부터 다시 해야겠다"는 상황이 훨씬 줄어들어요.
포트폴리오가 달라져요 피그마(Figma) 화면만 있는 포트폴리오와, 리서치 → 기획 → 설계 → 테스트 흐름이 담긴 포트폴리오는 보는 사람 입장에서 완전히 달라요.
피그마(Figma)는 붓이에요. 그런데 붓보다 먼저 필요한 건 "무엇을 그릴 것인가" 예요.
Lean UX — "만들기 전에 먼저 실험해보자"
Lean UX — 빠르게 만들고, 바로 확인하고, 계속 개선하는 디자인 방법론이에요.
예전에는 이렇게 했어요.
기획 문서를 몇 달에 걸쳐 완성해요 → 화면을 모두 설계해요 → 개발이 끝난 뒤에야 "사람들이 잘 쓸 수 있는지" 확인해요
집을 다 짓고 나서 "현관 위치가 잘못됐다"는 걸 알게 된 것처럼, 문제를 늦게 발견할수록 수정이 어려워요.
Lean UX는 이 방식을 바꿔요. 핵심은 세 단계를 계속 반복하는 거예요.
Think → "이렇게 하면 사용자가 더 편할 것 같다"고 가설을 세워요
↓
Make → 완벽하지 않아도 괜찮아요. 피그마(Figma)로 빠르게 화면을 만들어요
↓
Check → 실제 사람에게 써보게 해요. 맞으면 계속, 틀리면 바꿔요
↓
다시 Think →처음부터 완벽하게 만들려 하지 않아요. 빠르게 확인하고, 틀리면 금방 고치는 것이 훨씬 효율적이에요.
더블다이아몬드 — 문제를 제대로 찾은 다음 해결해요
더블다이아몬드(Double Diamond) — 올바른 문제를 먼저 찾고, 그다음 올바른 방법으로 해결하는 UX 프로세스예요. — 2004년 영국 디자인 카운슬이 만들었고, 전 세계 디자인 팀이 쓰고 있어요.
많은 프로젝트가 실패하는 이유는 결과물이 나빠서가 아니에요. 애초에 엉뚱한 문제를 풀었기 때문이에요. 더블다이아몬드는 그걸 막아주는 순서예요.
① Discover (발견하기) — 사용자를 먼저 이해해요 "우리 앱을 쓰는 사람들이 어떤 불편함을 겪고 있을까?"를 탐색해요. 직접 인터뷰하거나 관찰하면서 몰랐던 것들을 발견해요.
② Define (정의하기) — 진짜 문제를 정해요 발견한 내용을 정리해서 "우리가 해결해야 할 핵심 문제"를 명확하게 잡아요. 이때 페르소나를 만들어요. — 페르소나: "30대 직장인, 점심시간에 스마트폰으로 빠르게 주문하고 싶은 사람"처럼, 우리 서비스를 쓸 대표적인 가상 사용자를 구체적으로 그려놓은 것이에요.
③ Develop (탐색하기) — 해결책을 여러 개 찾아요 정해진 문제를 어떻게 풀 수 있는지 아이디어를 다양하게 내봐요. AI 도움을 받으면 훨씬 빠르게 많은 아이디어를 뽑을 수 있어요. 이때 로우파이(Lo-Fi) 와이어프레임을 만들어요. — 로우파이 와이어프레임: 색상도 없고 그림도 없이, 레이아웃과 흐름만 간단히 표현한 초안 화면이에요. "버튼을 여기 놓으면 어떨까?" 정도를 빠르게 확인하는 용도예요.
④ Deliver (완성하기) — 실제로 쓸 수 있는 형태로 만들어요 아이디어를 피그마(Figma)로 하이파이(Hi-Fi) UI로 완성해요. — 하이파이 UI: 실제 앱처럼 색상·폰트·아이콘이 모두 들어간 정밀한 디자인 화면이에요.
피그마(Figma)로 이런 것들을 배워요
이 과정에서 피그마(Figma)는 단순히 툴 사용법을 배우는 게 아니에요. UX 프로세스 흐름 위에서 실제 프로젝트를 만들면서 익혀요. 어떤 순서로 배우는지 살펴볼게요.
1. 피그마(Figma) 핵심 기능 피그마(Figma)의 기본 인터페이스부터 시작해서, 가장 중요한 기능인 Auto Layout을 학습해요. — Auto Layout: 버튼 안의 글자가 길어지면 버튼 크기가 자동으로 맞춰지는 기능이에요. 화면 크기에 따라 레이아웃이 자동으로 조정되는 반응형 디자인에 꼭 필요해요.
2. 컴포넌트와 스타일 가이드 제작 반복해서 쓰는 UI 요소를 컴포넌트(재사용 가능한 부품)로 만들고, 색상·폰트·간격 규칙을 정리한 디자인 시스템을 구축해요. — 원본 하나만 수정해도 파일 전체에 반영되기 때문에, 100개 화면도 일관성 있게 관리할 수 있어요.
3. [미니 프로젝트] 컴포넌트 직접 만들기 배운 내용을 실습으로 연결해요. 버튼의 기본·마우스오버·클릭·비활성 상태를 한 번에 관리하는 Variants 기능을 활용하거나, Auto Layout으로 상품 카드를 직접 설계해봐요. — 이론이 아니라 손으로 만들어보면서 완전히 내 것이 돼요.
4. 앱 와이어프레임 만들기 사용자가 앱을 어떤 순서로 쓰는지 흐름을 먼저 설계하고, 그 흐름에 맞춰 앱 와이어프레임을 만들어요. — 와이어프레임: 색상이나 디테일 없이 레이아웃과 흐름만 표현한 초안 화면이에요. "버튼을 여기 놓으면 어떨까?"를 빠르게 확인하는 용도예요.
5. 완성품처럼 보이는 디자인 — 하이파이(Hi-Fi) UI 와이어프레임 위에 색상·폰트·아이콘을 입혀서 실제 앱처럼 정밀하게 완성된 하이파이(High-Fidelity) UI를 구현해요. — 하이파이 UI: 실제 서비스 화면과 거의 동일한 수준으로 완성된 디자인이에요. 포트폴리오에 바로 쓸 수 있는 결과물이에요.
6. 상호작용 — 인터랙티브 프로토타입 완성된 화면과 화면 사이에 인터랙션을 연결해서, 실제 앱처럼 클릭하고 넘어가는 인터랙티브 프로토타입을 만들어요. — 개발 없이도 "이 앱이 어떻게 작동하는지" 직접 눌러보면서 테스트하고 발표할 수 있어요.
[이미지: 와이어프레임 → 하이파이 UI → 인터랙티브 프로토타입 완성 흐름 일러스트]
2026년 UX/UI 디자이너가 알아야 할 필수 트렌드 5가지
AI가 디자이너의 작업 방식을 바꾸고 있어요.
화면을 예쁘게 그리는 것 이상으로, AI를 도구로 잘 활용하면서 사용자 경험 전체를 설계하는 능력이 필요해졌어요.
트렌드 1 — AI 디자인 자동 생성
프롬프트 → UI 생성 — 프롬프트: AI에게 내리는 명령어 또는 설명문이에요.
"로그인 화면, 이메일 입력창, 비밀번호 입력창, 파란색 로그인 버튼"이라고 입력하면, AI가 화면 초안을 바로 만들어줘요.
트렌드 2 — 디자인 시스템 중심
컴포넌트 기반 설계, 자동 일관성 유지 — 컴포넌트: 버튼, 카드, 헤더처럼 반복해서 쓰는 UI 요소를 미리 만들어둔 부품이에요.
버튼 하나를 컴포넌트로 만들어두면 원본 하나만 수정해도 앱 전체가 한 번에 바뀌어요. 팀 전체가 같은 부품을 쓰니까 디자인이 자동으로 일관성을 유지해요.
트렌드 3 — 프로토타입 중심 UX
실제 서비스처럼 테스트 — 프로토타입: 실제 개발 전에 피그마(Figma)로 만드는 "가짜 앱"이에요. 클릭하면 화면이 넘어가고 실제 앱처럼 작동해요.
개발자가 코드를 한 줄도 짜기 전에, 사용자에게 "이 앱 써보세요"라고 테스트할 수 있어요.
트렌드 4 — 협업 기반 디자인
디자이너 + 개발자 + 기획자가 함께 움직여요
예전에는 기획 → 디자인 → 개발 순서로 차례차례 넘겨줬어요. 지금은 세 역할이 피그마(Figma) 파일 하나를 함께 보면서 동시에 움직여요. 디자이너가 따로 문서를 만들 필요가 없어졌어요.
트렌드 5 — Prompt 기반 디자인
👉 "그리는 시대 → 설명하는 시대"
예전 디자이너는 마우스로 하나하나 그렸어요. 지금은 AI에게 원하는 것을 말로 설명하면 AI가 초안을 만들어줘요. 손이 빠른 것보다, AI에게 정확하게 설명하고 방향을 잡는 능력이 더 중요해지고 있어요.
Lean UX × AI × 피그마(Figma), 왜 함께 익혀야 할까요?
피그마(Figma)만 배우면 — 화면은 만들지만 "왜 이렇게 만들었냐"는 질문에 답하지 못해요.
Lean UX만 배우면 — 방법론은 알지만 실제 결과물로 연결하지 못해요.
AI만 쓰면 — 빠르게 만들지만 방향이 없어서 쓸 수 없는 산출물이 쌓여요.
세 가지가 하나의 흐름으로 연결될 때 비로소 완성돼요.
Lean UX로 문제를 정의하고 가설을 세워요
↓
AI로 리서치 초안, 아이디어, 시나리오를 빠르게 처리해요
↓
피그마(Figma)로 와이어프레임 → 디자인 시스템 → Hi-Fi UI → 프로토타입을 만들어요
↓
다시 Lean UX로 검증하고 수정해요💡 이 흐름을 5주 안에 체계적으로 익히고 싶다면?
이젠아카데미의 AI기반 UX/UI 디자인 with 피그마(Figma) 과정을 확인해보세요.
👉 과정 상세 보기
이 과정이 다른 이유 — AI기반 UX/UI 디자인 with 피그마(Figma)
피그마(Figma) 사용법만 가르치는 과정이 아니에요.
Lean UX 사고방식 위에 AI 활용과 피그마(Figma) 실습이 통합된 실무형 UX/UI 설계 과정이에요.
이 과정만의 3가지 차별점
① 더블다이아몬드 4단계가 커리큘럼의 뼈대예요 Discover → Define → Develop → Deliver 순서로 5주가 구성돼 있어요. 배운 것이 바로 다음 단계로 자연스럽게 쌓여요.
② 생성형 AI를 UX 프로세스 전 단계에 통합해요 ChatGPT를 활용한 리서치 자동화, AI 브레인스토밍, A/B 테스트 설계까지 — AI가 실습 도구로 직접 들어와요.
③ 100% 온라인 — 시간과 장소에 구애받지 않아요 전 과정이 온라인으로 진행돼요. 직장, 학교와 병행하면서 내 속도대로 들을 수 있어요.
5주 커리큘럼 한눈에 보기
주차 | 단계 | 배우는 핵심 내용 | 미니 프로젝트 |
|---|---|---|---|
1주차 | Discover | 더블다이아몬드 UX 전략, AI 사용자 리서치, 경쟁사 분석 | 사용자 니즈 분석 |
2주차 | Define | Lean UX Canvas, 페르소나, 사용자 여정 맵, 가설 설정 | 페르소나 정의 |
3주차 | Develop | AI 브레인스토밍, MVP 설계, Build-Measure-Learn, A/B 테스트 | MVP 프로토타입 |
4주차 | Deliver | 인터랙션 설계, 브랜드 아이덴티티 적용, 사용성 테스트, 핸드오프 | 디자인 컨셉 시안 |
5주차 | 피그마(Figma) 실전 | Auto Layout, 컴포넌트·디자인 시스템, Hi-Fi UI, 인터랙티브 프로토타입 | 앱 프로덕트 완성 |
5주를 마치면 미니 프로젝트 4개 + 파이널 프로젝트 1개, 총 5개의 결과물이 만들어져요.
이런 분께 잘 맞아요
UX/UI 디자인이 뭔지 아직 잘 모르는 완전 입문자
비전공자인데 디자인 분야에 관심이 생긴 분
피그마(Figma)는 조금 써봤지만 프로세스가 없어 막막한 취준생
AI와 Lean UX를 실무에서 체계적으로 익히고 싶은 현직 디자이너
새로운 분야로 방향을 바꾸고 싶은 커리어 전환 준비생
피그마(Figma)를 몰라도 돼요. 코딩을 몰라도 돼요. 디자인 전공이 아니어도 돼요.
이 과정에서 배우는 건 생각하는 순서예요.
강사 소개
서지영 강사 프로덕트디자인 전문 강사. 디자인 모아르 대표. 『AI로 브랜딩하다』 저자. 실무 브랜딩과 프로덕트 디자인 현장 경험을 바탕으로, AI를 활용한 디자인 전략을 가르쳐요.
원혜종 강사 이화여대 디자인학 석사. 전) 지앤아트 디자인 디렉터. 대학 및 다양한 기관에서 UX/UI 디자인과 피그마(Figma)를 강의해온 이력을 보유하고 있어요.
처음 시작하는 분도 괜찮아요. 5주 뒤가 달라져요.
UX/UI 디자인이 뭔지 아직 잘 몰라도 괜찮아요.
Lean UX로 생각하고, AI로 속도를 높이고, 피그마(Figma)로 증명하는 흐름 — 5주 동안 이 순서를 몸에 익히면 돼요.
5주 뒤의 포트폴리오는, 지금과 완전히 달라질 수 있어요.
👉 과정 상세 및 수강 신청 바로가기
📞 수강 전 궁금한 점이 있다면 이젠아카데미 고객센터 02)532-6500