오늘은 AI를 활용한 데이터 분석 챕터의 마지막 날이었다!~~
일전의 디자인 기초 때보다 더 많은 툴을 접하고, 어떻게 사용하는지 배운 챕터였다 :)
AI × 디자인 협업 기업 사례
롯데백화점: AI 아티스트와의 협업
롯데백화점 AI 아티스트 노엘 반다이크와 협업해 '원더 드림스, 도심 한복판에서 발견한 봄'을 테마로 한 비주얼을 내놓았다. 반다이크는 추상 회화와 AI를 활용한 작품을 전문으로 하는 네덜란드 아티스트이다. 롯데백화점은 무거운 사회 분위기 속에서 일상에 지쳐 있는 사람들에게 상상이 현실이 되는 희망의 메시지를 전달하는 수단으로 무궁무진한 표현이 가능한 생성형 AI를 선택했다고 설명했다. 롯데백화점은 유통업계 AI 활용 범위를 넓힌 새로운 시도라고 의미를 부여했다.
랜드로버: AI 기반 광고 영상 제작
랜드로버의 “Who Says Cars Can’t Dream” 캠페인은 실사 촬영과 AI 이미지를 결합해 자동차가 ‘모험을 꿈꾸는 장면’을 시각화한 실험적 광고이다.
350장의 촬영 이미지와 생성형 AI로 2,400개 이상 이미지를 만들고, 그중 일부를 움직임을 가진 영상으로 재가공해 최종 스팟을 제작했다. AI는 설원·오프로드 등 실제 촬영이 어려운 장면을 구현하는 데 활용됐고, 전체 영상의 약 절반이 AI 기반으로 구성되었다.
이 프로젝트는 AI + 실사 하이브리드 방식이 제작 비용과 시간을 줄이면서도 브랜드 퀄리티를 유지할 수 있다는 사례로 주목받았다.
CJ ENM: 단편 영화 ‘M호텔' 제작
CJ ENM은 생성형 AI를 활용해 단편 영화 ‘M호텔’을 제작했다. ‘M호텔’은 약 6분 31초 분량인데, 노숙자가 신비한 호텔 열쇠를 얻게 되면서 인생에 대한 성찰이 담긴 스토리이다.
AI 기술은 이미지, 영상, 사운드 등 거의 모든 요소에 적용됐고, 실제 표정·모션 구현을 위해 10종 이상의 AI 솔루션이 쓰였다.
이 작품은 AI 콘텐츠 제작의 가능성을 실증하는 파일럿 프로젝트로, CJ ENM은 앞으로도 스토리 기획, 유통, 추천 시스템까지 AI를 전방위로 활용할 계획이라는 뜻을 밝혔다.
➡️ 반복·생산·기초 작업은 AI가, 정교화·감성·전략·브랜딩은 사람이 한다.
결국 디자이너 또한 맥락을 담당하게 될 것이라는 것이라고 생각했다.
프롬프트 엔지니어링 & UI 디자인 접근법
이제는 디자이너들 또한 AI를 통해 코딩을 쉽게 할 수 있다.
UI 디자인도 자연어 한 줄로 코딩을 할 수 있다. 이러한 과정을 “바이브 코딩(Vibe Coding)”이라고 부른다.
바이브 코딩 프로세스
1. Describe what you want
: 원하는 UI/기능/분위기를 텍스트로 설명
2. AI generating the code
: AI가 자동으로 UI 코드 생성
3. Testing & refining
: 화면을 실행해보고 부족한 부분을 수정
4. Iterate
: 수정 → 테스트 → 수정 반복
관련 자연어 코딩 도구들
V0, SuperWhisper, Cursor, Bolt, Lovable 등
AI가 코드를 생성하고 수정까지 도와줘서 디자이너와 개발자의 경계가 흐려지고 있는 시대가 도래했다.
장점
- 워크플로우 속도 증가
- 빠른 프로토타입 제작
- 출시까지의 리드타임 단축
- 디자이너의 개발 이해도 상승
- 개발자와의 협업 비용 절감
기존 디자인 프로세스 vs AI 기반 디자인 프로세스
기존 디자인 프로세스
- 문제 정의 및 리서치
- 아이디어 도출
- 와이어프레임 구성
- 피드백 분석 및 개선
- 결과 정리
디자인은 결국 문제를 정확히 정의하는 것에서 시작한다.
AI를 활용한 새로운 디자인 프로세스
AI는 매 디자인 프로세스 단계에서 도움을 줄 수 있다.
AI는 반복적인 작업을 많이 줄여줄 수 있다.
-
주제 및 문제 정의
: AI에게 시장 현황·페인포인트 조사 요청 가능 -
UX 리서치 요약
: 긴 인터뷰/리뷰 데이터를 정리하는 데 최적 -
문제점 정리
: 우선순위, 영향도 기준으로 자동 분류 -
아이디어 도출
: 10~100개의 아이디어를 빠르게 제안 -
와이어프레임 생성
: 텍스트 설명 → 즉시 와이어프레임 생성 -
피드백 & 개선안 도출
: A/B 비교, 디자인 리뷰 자동화 -
최종 방향 정리
: 제안서 / 기획서 / 발표자료까지 자동 생성 -
AI 활용 소감 정리
: 회고 및 내 디자인 방식에 적용할 점 도출
디자이너가 AI 시대에 더 중요한 이유
AI가 UI를 “그리는 일”은 점점 더 잘하고 있다.
그러나 아래 영역은 인간 디자이너만 할 수 있다:
- 사용자가 진짜로 원하는 것이 무엇인지 파악하는 능력
- 브랜드·문화·감성·문제를 정의하는 능력
- 복잡한 맥락을 이해하고 최적의 판단을 내리는 능력
- AI가 만든 결과를 ‘좋고 나쁨’으로 평가하는 능력
AI는 도구이고, 사용자를 깊이 이해하는 판단력은 디자이너의 몫이다.
과제
오늘 과제는 AI 툴을 활용해 관심 있는 서비스의 와이어프레임을 제작하는 것이었다.
과제내용:
기존 아이디어를 AI와 함께 구체화하고, 사용자 문제점 → 해결책 → 화면 흐름까지 설계
LLM 등으로 아이디어 발산 → Lovable/Midjourney 등으로 와이어프레임 생성
최종 제출물: (1) 주제·문제 정의, (2) AI 대화 과정 정리, (3) 완성된 와이어프레임
1️⃣ 아이디어 도출 with GROK
그록과 함께 실생활에서 불편했던 경험을 찾아 문제를 정의하고 해결방안을 도출해보았다.
그록이 20가지 아이디어를 추천해주었고, 그 중 하나를 골라 평소 내가 개선하고 싶었던 미루는 습관을 고칠 수 있는 습관 형성 앱으로 구체화하였다.
그록이 해준 임의의 브랜딩을 '스프린트 레이스'를 주로 삼아 수정하였으며, 그로 인해 F1 팬으로 타겟층이 수정되어서 이를 '20~30대 학생 또는 직장인'으로 재수정하였다.
2️⃣ 문제 정의 및 화면구성 with GROK
그록이 작성한 기획을 바탕으로 슬라이드별 발표자료를 요청했다.
이런 식으로 정리해준 것을 바탕으로 실제 피그마를 통해 간단하게 슬라이드를 만들어 정리하였다.
3️⃣ 와이어프레임 제작 with Stitch
Stitch나 Lovable 모두 프롬프트를 영어로 작성 시 더 효과적이고,
아직 한글은 UI적으로 구현이 어렵기 때문에 영어 프롬프트 작성을 그록에게 요청했다.
해당 프롬프트를 바탕으로 Stitch 입력 후, Key Color만 추후 #1351C6으로 변경하였다.
4️⃣ 와이어프레임 제작 with Lovable
Lovable은 와이어프레임을 포함하여 실제 프로토타입까지 구현이 가능하기 때문에
같은 프롬프트로 Lovable로도 제작해보았다.
퍼블리쉬까지 해놓았기 떄문에 여기를 클릭하면 직접 플로우를 볼 수 있다. :)
피그마 한 페이지 내 정리 후 제출이었기 때문에 피그마 링크도 첨부한다 !ㅅ!
회고
길다면 길고 짧다면 짧았던 AI 챕터가 끝이 났다!
이제 정말 웹 코딩 챕터만 남아있다.,,,🥹
곧 프로젝트 시작이라니~~~
디자인 기초의 AI에서도 그렇고, 이번 챕터에서도 그렇고
관통하는 하나의 주제는
AI는 우리가 “그리는 시간”을 줄여주지만
우리가 “생각하는 시간”은 오히려 더 중요해지고 있다.
라고 생각한다. AI는 우리의 작업을 도와줄 수 있지만, 사용자들의 맥락을 완전히 이해할 수 없기 때문에.
AI 시대의 디자이너가 어디에 집중해야 하는지 굉장히 명확한 메시지를 준 것이라고 생각한다.
나는 단순히 UI 디자이너가 아닌 프로덕트 디자이너로 성장해야 한다.
어쩌면 대학 시절 내가 하고 싶었던 브랜딩과도 맞물리는 것 같아서 신이났다 😝
#AI시대에서 프로덕트 디자이너는 어떤 역할을 할까
