웹기획·웹디자인을 위한 에센스 오브 에센스(Essence of Essence) 실전 가이드
들어가며: AI 시대, 웹 전문가의 역할 재정의
우아한형제들 임동준 개발자님이 동영상 “배민은 이제 노가다 안 합니다” 1시간 업무를 1분만에 끝내는 AI 자산화의 비밀에서 제시한 ‘에센스 오브 에센스(Essence of Essence)’ 는 AI 시대 웹 전문가들에게 새로운 생존 전략을 제시합니다. 단순히 AI 도구를 잘 쓰는 것을 넘어, 자신의 전문성과 브랜드의 정체성에서 가장 핵심적인 원재료를 추출하여 AI가 활용할 수 있는 형태로 자산화하는 것입니다. 2025년 현재 Relume AI, Creatie AI, Visily AI, Framer AI, Figma AI 등 수많은 AI 디자인 도구들이 등장했지만, 이들을 제대로 활용하려면 결국 ‘무엇이 본질인가’를 정의하는 인간의 능력이 필요합니다.
켄트 백은 “나의 기술 중 90%는 가치가 0원이 되었지만, 나머지 10%의 가치는 1,000배가 되었다”고 말했습니다. 웹기획자와 웹디자이너에게 그 10%는 바로 복잡한 요구사항 속에서 핵심을 꿰뚫어 보고, 그것을 AI가 실행할 수 있는 명확한 구조로 만드는 능력입니다. 이제 우리는 단순히 와이어프레임을 그리거나 UI를 만드는 사람이 아니라, 프로젝트의 본질을 정의하고 AI가 일관되게 작동할 수 있는 시스템을 설계하는 사람이 되어야 합니다.
Part 1. 웹기획에서의 에센스 오브 에센스 적용
1-1. 프로젝트의 본질 추출: ‘왜’를 묻는 습관
웹기획에서 에센스 오브 에센스를 적용하는 첫 단계는 프로젝트의 근본적인 목적을 한 문장으로 정의하는 것입니다. 클라이언트가 “쇼핑몰을 만들어주세요”라고 요청했을 때, 숙련된 기획자는 단순히 이커머스 기능 목록을 나열하지 않습니다. 대신 “왜 이 쇼핑몰이 필요한가?”, “경쟁사와 차별화되는 핵심 가치는 무엇인가?”, “사용자가 정말 해결하고 싶은 문제는 무엇인가?”를 깊이 파고듭니다.
예를 들어 한 중소 농산물 유통업체가 쇼핑몰 구축을 의뢰했다고 가정해봅시다. 표면적 요구사항은 “온라인 주문 시스템”이지만, 심층 인터뷰를 통해 발견한 본질은 “소비자와 생산자 간 신뢰 부족 해소”였습니다. 농산물의 신선도와 생산 과정에 대한 불투명성이 구매를 가로막는 진짜 장벽이었던 것입니다. 이 본질을 파악하면 단순한 상품 목록 페이지가 아니라 ‘생산자 스토리텔링’, ‘실시간 재배 일지’, ‘수확 당일 배송 알림’ 같은 핵심 기능이 자연스럽게 도출됩니다.
이렇게 추출한 프로젝트의 본질을 AI에게 입력하면, AI는 이 맥락을 유지하면서 다양한 변주를 만들어냅니다. Relume AI 같은 도구에 “소비자와 생산자 간 신뢰를 구축하는 농산물 직거래 플랫폼”이라고 입력하면, 단순한 쇼핑몰 레이아웃이 아니라 생산자 프로필 중심의 구조, 투명성을 강조하는 정보 아키텍처, 신뢰 지표가 강조된 UI 가이드라인을 제안받을 수 있습니다.
1-2. 불변의 규칙(Invariant) 정의하기
프로젝트의 본질을 추출했다면, 다음은 절대 양보할 수 없는 핵심 규칙을 정의하는 단계입니다. 임동준 님은 이를 ‘AI를 가두는 램프’라고 표현했습니다. AI는 강력하지만 예측 불가능한 지니와 같아서, 명확한 경계가 없으면 프로젝트의 정체성을 벗어나는 결과물을 만들어낼 수 있습니다.
웹기획 단계에서 정의해야 할 불변의 규칙들은 다음과 같습니다. 첫째, 사용자 여정의 핵심 단계입니다. 예를 들어 B2B 서비스 웹사이트라면 “잠재고객 → 데모 신청 → 상담 → 계약”이라는 여정의 각 단계가 명확히 구분되어야 하며, 어떤 디자인 변경이 있어도 이 흐름은 유지되어야 합니다. 둘째, 정보 우선순위입니다. 랜딩 페이지의 경우 “핵심 가치 제안 → 사회적 증거 → 명확한 행동 유도”라는 정보 계층이 지켜져야 합니다. 셋째, 접근성 기준입니다. WCAG 2.1 레벨 AA 이상을 준수해야 한다면, 이는 모든 페이지 설계에서 절대 양보할 수 없는 규칙이 됩니다.
실전 사례를 보겠습니다. 한 금융 서비스 앱 리뉴얼 프로젝트에서 핵심 불변 규칙은 “3탭 이내 목표 도달”이었습니다. 사용자가 어떤 금융 상품을 찾든 3번의 터치 안에 도달해야 한다는 원칙입니다. 이 규칙을 Claude나 ChatGPT에게 명확히 제시하고 정보 구조(IA) 설계를 요청하면, AI는 수십 가지 메뉴 배치안을 제안하더라도 모두 이 제약 조건을 준수합니다. 반대로 이 규칙을 명시하지 않으면 AI는 아름답지만 복잡한 4단계, 5단계 구조를 제안할 수 있습니다.
1-3. 사용자 페르소나의 에센스 추출
웹기획에서 페르소나는 필수적이지만, 대부분의 페르소나 문서는 너무 장황하거나 피상적입니다. “35세 직장인 여성, 연봉 5천만 원, 취미는 요가”처럼 인구통계학적 정보만 나열하면 AI는 이를 효과적으로 활용하지 못합니다. 에센스 오브 에센스 관점에서 페르소나는 ‘이 사용자가 가진 핵심 동기와 장애물’로 압축되어야 합니다.
예를 들어 헬스케어 앱 기획 시 타겟 페르소나를 다음처럼 정의할 수 있습니다. “만성질환 관리가 필요하지만 의료 전문 용어에 거부감이 있고, 매일 기록하는 것을 귀찮아하는 중장년층”이라고 압축하면, AI는 이를 바탕으로 ‘쉬운 용어 사용’, ‘자동 입력 최대화’, ‘보상 기반 동기부여’ 같은 핵심 UX 전략을 도출해냅니다.
이렇게 추출한 페르소나 에센스는 AI 도구에 입력할 때 시스템 프롬프트나 컨텍스트로 제공됩니다. 예를 들어 Cursor나 Claude Code에서 웹사이트 구조를 설계할 때 “사용자는 복잡한 메뉴를 싫어하고 즉각적인 결과를 원한다”는 에센스를 프롬프트에 포함하면, AI가 생성하는 모든 페이지 구조가 이 방향성을 유지합니다.
1-4. 기획 템플릿의 자산화: Skills로 체화하기
배달의민족이 디자인 에센스를 한 장의 이미지로 만들었듯이, 웹기획자는 자신만의 기획 방법론을 ‘재사용 가능한 템플릿’으로 자산화할 수 있습니다. 임동준 님이 제시한 ‘디버깅 5단계 이정표’처럼, 웹기획에서도 반복 가능한 프로세스를 정립하면 팀 전체의 품질이 상향 평준화됩니다.
예를 들어 “랜딩 페이지 기획 5단계 체크리스트”를 만들 수 있습니다. 1단계는 목표 명확화로 전환율 목표와 핵심 행동을 한 문장으로 정의합니다. 2단계는 사용자 진입 맥락 파악으로 어떤 광고나 콘텐츠를 통해 유입되는지 확인합니다. 3단계는 히어로 섹션 핵심 메시지 추출로 5초 안에 이해되는 가치 제안을 만듭니다. 4단계는 신뢰 요소 배치로 고객 리뷰, 수치적 성과, 미디어 노출 등을 배치합니다. 5단계는 CTA 최적화로 버튼 위치, 문구, 색상을 결정합니다.
이 템플릿을 Claude Code나 Cursor의 Skills 기능에 등록하면, 새로운 랜딩 페이지 기획 요청이 들어올 때마다 AI가 자동으로 이 5단계를 따라 질문하고 제안합니다. 실제로 2025년 후반부터 Claude Code는 사용자 정의 Skills를 지원하기 시작했고, 이를 통해 기획자는 “우리 회사 랜딩 페이지 기획 방식”이라는 조직 자산을 만들 수 있습니다.
1-5. 경쟁사 분석의 에센스: 패턴 추출하기
웹기획에서 벤치마킹은 필수이지만, 단순히 “A사는 이렇게 했다, B사는 저렇게 했다”고 나열하는 것은 의미가 없습니다. 에센스 오브 에센스 관점에서 경쟁사 분석은 ‘성공하는 서비스의 공통 패턴’을 추출하는 작업입니다.
예를 들어 국내 상위 10개 이커머스 앱의 검색 기능을 분석했을 때, 공통적으로 발견되는 에센스는 다음과 같을 수 있습니다. 첫째, 검색어 자동완성이 3글자 입력 시점에 활성화됩니다. 둘째, 최근 검색어는 최대 10개까지 표시됩니다. 셋째, 인기 검색어는 실시간 변동과 함께 순위가 표시됩니다. 넷째, 필터는 3단계 이상 깊어지지 않습니다. 이런 패턴들은 사용자 경험 측면에서 검증된 에센스입니다.
이 에센스들을 추출하여 문서화하면, AI에게 “국내 이커머스 업계 표준에 맞는 검색 기능 설계”를 요청할 때 구체적인 레퍼런스로 제공할 수 있습니다. 단순히 “쿠팡처럼 만들어줘”라고 하는 것보다 훨씬 명확하고 일관된 결과를 얻을 수 있습니다.
1-6. 웹기획에서의 AI 활용 워크플로우 (2025-2026)
2025년 현재 웹기획 단계에서 활용할 수 있는 주요 AI 도구들과 그 조합을 살펴보겠습니다. 먼저 초기 리서치 단계에서는 Claude나 ChatGPT로 시장 조사, 트렌드 분석, 페르소나 초안 작성을 진행합니다. 특히 Claude 3.5 Sonnet은 긴 문맥을 이해하는 능력이 뛰어나 복잡한 프로젝트 배경을 입력하고 인사이트를 얻는 데 유용합니다.
정보 구조(IA) 설계 단계에서는 Relume AI나 Visily AI를 활용합니다. Relume AI는 프로젝트 설명을 입력하면 사이트맵과 와이어프레임을 자동 생성해주며, 각 페이지의 목적과 주요 콘텐츠 블록까지 제안합니다. 이때 앞서 추출한 프로젝트의 본질과 불변의 규칙을 프롬프트에 명확히 포함시켜야 합니다.
콘텐츠 전략 수립 단계에서는 Claude나 ChatGPT로 SEO 키워드 분석, 콘텐츠 캘린더 작성, 각 페이지별 핵심 메시지 도출 작업을 수행합니다. 특히 Claude의 Artifacts 기능을 활용하면 콘텐츠 매트릭스나 사용자 여정 맵을 대화형으로 작성하고 즉시 시각화할 수 있습니다.
프로토타이핑 단계에서는 Framer AI나 v0(Vercel)를 활용합니다. 텍스트 설명만으로 작동하는 프로토타입을 생성할 수 있어, 기획자가 코딩 지식 없이도 인터랙티브한 목업을 만들 수 있습니다. 예를 들어 “로그인 후 대시보드로 이동하는 흐름”을 설명하면 React 기반의 실제 작동하는 프로토타입이 생성됩니다.
문서화 단계에서는 Claude Code나 GitHub Copilot을 활용하여 기획서, 요구사항 정의서, API 명세서를 작성합니다. 특히 반복적인 문서 작업은 AI에게 맡기고, 기획자는 핵심 의사결정과 검증에 집중할 수 있습니다.
중요한 것은 각 도구를 단독으로 사용하는 것이 아니라, 하나의 일관된 워크플로우로 연결하는 것입니다. 예를 들어 Claude로 작성한 페르소나와 사용자 여정을 Relume AI에 입력하여 IA를 생성하고, 그 결과를 다시 Framer AI로 가져와 프로토타입을 만드는 식입니다. 이때 각 단계에서 추출한 ‘에센스’가 다음 단계로 자연스럽게 전달되도록 문서화하는 것이 핵심입니다.
Part 2. 웹디자인에서의 에센스 오브 에센스 적용
2-1. 브랜드 스타일의 DNA 추출
배달의민족이 ‘질감, 명도 대비, 민트 컬러’라는 핵심 요소만 남긴 에센스 이미지를 만들었듯이, 모든 브랜드는 고유한 시각적 DNA를 가지고 있습니다. 웹디자이너의 역할은 이 DNA를 명확히 추출하여 AI가 재현 가능한 형태로 만드는 것입니다.
예를 들어 한 프리미엄 라이프스타일 브랜드의 웹사이트를 디자인한다고 가정해봅시다. 브랜드 가이드에는 수십 페이지의 규정이 있지만, 핵심 에센스는 세 가지로 압축됩니다. 첫째, 여백의 미학으로 콘텐츠 간격이 최소 80px 이상이며 화면의 40%는 비워둡니다. 둘째, 세리프 타이포그래피로 제목은 Playfair Display, 본문은 Crimson Text를 사용하며 줄간격은 1.8입니다. 셋째, 차분한 모노톤 팔레트로 베이지(#F5F1ED), 차콜(#2C2C2C), 올리브그린(#8B9474) 세 가지 색상만 사용합니다.
이 세 가지 에센스를 Figma AI나 Canva Magic Design에 입력하면, 어떤 콘텐츠를 넣어도 브랜드 정체성이 일관되게 유지되는 디자인이 생성됩니다. 핵심은 디자이너가 모든 픽셀을 직접 만드는 것이 아니라, 브랜드의 본질을 정의하고 AI가 이를 실행하도록 하는 것입니다.
2-2. 디자인 시스템의 자산화
2025년 웹디자인의 큰 변화 중 하나는 디자인 시스템이 단순한 컴포넌트 라이브러리를 넘어 ‘AI가 이해하는 자산’으로 진화했다는 점입니다. Creatie AI의 UI Style Guide 기능이나 Figma AI의 Design Tokens 시스템은 디자이너가 만든 스타일을 자동으로 추출하고 일관되게 적용합니다.
실전 사례를 보겠습니다. 한 B2B SaaS 기업의 디자인 시스템 구축 프로젝트에서, 디자이너는 먼저 핵심 컴포넌트 10개의 ‘마스터 버전’을 직접 디자인했습니다. Primary Button, Secondary Button, Input Field, Card, Modal, Navigation Bar, Footer, Table, Form, Dashboard Widget 이렇게 10개입니다. 각 컴포넌트를 디자인할 때 단순히 모양만이 아니라 ‘왜 이렇게 디자인했는가’에 대한 원칙을 함께 문서화했습니다. 예를 들어 Primary Button은 “시각적 무게감을 강조하기 위해 그림자를 사용하며, hover 시 명도가 10% 낮아진다”는 식입니다.
이 10개 컴포넌트와 디자인 원칙을 Figma에 등록하고 Figma AI를 활성화하면, 새로운 화면을 디자인할 때 AI가 자동으로 이 컴포넌트들을 조합하고 원칙을 적용합니다. 디자이너가 “결제 완료 페이지를 만들어줘”라고 요청하면, AI는 기존 10개 컴포넌트를 활용하여 브랜드 정체성이 유지되는 레이아웃을 제안합니다. 만약 새로운 패턴이 필요하면 디자이너가 직접 만들고, 그것이 다시 시스템에 추가되는 선순환 구조입니다.
2-3. 사용자 감성의 에센스: 무드보드에서 프롬프트로
전통적으로 디자이너들은 무드보드를 만들어 프로젝트의 감성을 공유했습니다. 하지만 AI 시대에는 무드보드의 감성을 ‘언어화’하는 능력이 중요해졌습니다. Midjourney, Stable Diffusion, Adobe Firefly 같은 이미지 생성 AI를 효과적으로 활용하려면 원하는 감성을 정확한 키워드로 표현해야 하기 때문입니다.
예를 들어 한 여행 스타트업의 웹사이트 디자인을 의뢰받았을 때, 클라이언트가 제공한 무드보드에는 일몰, 빈티지 카메라, 손으로 쓴 지도, 파스텔 톤의 풍경 사진이 섞여 있었습니다. 이 무드보드의 에센스를 추출하면 “노스탤직한 아날로그 감성의 모험”으로 압축됩니다. 이를 다시 AI 프롬프트로 변환하면 “nostalgic, analog photography aesthetic, warm pastel tones, hand-drawn elements, wanderlust, golden hour lighting, vintage textures”가 됩니다.
이 에센스 키워드를 Midjourney에 입력하면 일관된 감성의 히어로 이미지, 아이콘, 배경 패턴을 대량으로 생성할 수 있습니다. 중요한 것은 디자이너가 매번 새로운 프롬프트를 작성하는 것이 아니라, 프로젝트 초기에 감성의 에센스를 정의하고 이를 재사용 가능한 프롬프트 템플릿으로 만드는 것입니다.
2-4. 반응형 디자인의 에센스: 규칙 기반 자동화
2025년 웹디자인 트렌드를 보면 모바일·데스크톱을 넘나드는 일관된 경험이 필수가 되었습니다. 하지만 모든 화면 크기에 대해 일일이 디자인하는 것은 비효율적입니다. 에센스 오브 에센스 관점에서 반응형 디자인은 ‘변하는 것’과 ‘변하지 않는 것’을 명확히 구분하는 작업입니다.
한 뉴스 미디어 웹사이트 리뉴얼 프로젝트를 예로 들겠습니다. 디자이너는 반응형 규칙의 에센스를 다음과 같이 정의했습니다. 불변 요소로 기사 제목의 위계 구조는 모든 화면에서 동일하고, 본문 폰트 크기는 16px 이상을 유지하며, 이미지 비율은 16:9를 유지합니다. 변동 요소로 데스크톱에서는 3단 그리드, 태블릿은 2단, 모바일은 1단으로 변경되고, 내비게이션은 데스크톱에서는 수평 메뉴, 모바일에서는 햄버거 메뉴로 전환되며, 광고 배너는 화면 너비에 따라 크기가 조정됩니다.
이 규칙을 Figma의 Auto Layout 설정과 Figma AI의 Responsive Design 기능에 적용하면, 디자이너가 데스크톱 버전만 디자인하더라도 AI가 자동으로 태블릿과 모바일 버전을 생성합니다. 물론 완벽하지는 않지만, 초안을 만드는 시간을 80% 이상 단축할 수 있습니다.
2-5. 인터랙션 디자인의 에센스: 원칙의 코드화
2025년 웹디자인 트렌드 중 하나는 몰입형 3D 인터랙션과 스크롤 주도형 스토리텔링입니다. 하지만 이런 화려한 효과를 모든 페이지에 적용할 수는 없습니다. 에센스 오브 에센스 관점에서 인터랙션 디자인은 ‘어디에, 왜, 어떻게 움직임을 넣을 것인가’에 대한 명확한 원칙을 세우는 것입니다.
예를 들어 한 자동차 브랜드 웹사이트의 인터랙션 원칙은 다음과 같습니다. 첫째, 인터랙션의 목적이 정보 전달이라면 최대 0.3초 이내에 완료되어야 합니다. 둘째, 감성적 몰입이 목적이라면 사용자 스크롤에 따라 점진적으로 변화해야 합니다. 셋째, 모든 애니메이션은 ease-in-out 곡선을 따르며, 급격한 움직임은 피합니다. 넷째, 모바일에서는 성능 최적화를 위해 transform과 opacity만 사용하고 position 변경은 최소화합니다.
이 원칙들을 코드로 작성하여 Claude Code나 Cursor의 Skills에 등록하면, 개발 단계에서 프론트엔드 개발자가 AI에게 “메인 페이지 히어로 섹션에 인터랙션 추가해줘”라고 요청할 때 자동으로 이 원칙들이 적용됩니다. 디자이너가 매번 개발자에게 세부 스펙을 설명할 필요 없이, 원칙이 시스템에 내재화되어 있는 것입니다.
2-6. 웹디자인에서의 AI 활용 워크플로우 (2025-2026)
2025년 현재 웹디자인 단계에서 활용할 수 있는 최신 AI 도구들과 그 조합을 살펴보겠습니다. 초기 컨셉 단계에서는 Midjourney나 Adobe Firefly로 무드보드와 감성 이미지를 생성합니다. 앞서 추출한 감성의 에센스를 프롬프트로 입력하면 수십 가지 변주를 빠르게 테스트할 수 있습니다.
와이어프레임 단계에서는 Relume AI나 Visily AI를 활용합니다. 기획 단계에서 정의한 정보 구조를 기반으로 AI가 와이어프레임을 자동 생성하며, 디자이너는 이를 기반으로 시각적 요소를 추가합니다.
UI 디자인 단계에서는 Figma AI를 주력으로 사용합니다. 2025년 Figma AI는 Auto Layout 자동 생성, 컴포넌트 변형 제안, 색상 팔레트 추출, 텍스트 스타일 일관성 검증 등 다양한 기능을 제공합니다. 특히 Figma AI의 Design Auditor 기능은 완성된 디자인을 자동으로 검토하여 접근성 문제, 일관성 부족, 사용성 이슈를 지적해줍니다.
아이콘과 일러스트레이션은 Creatie AI의 Creatie Wizard를 활용합니다. 화면 크기와 요구사항을 입력하면 AI가 프로젝트 스타일에 맞는 커스텀 아이콘과 일러스트를 생성합니다. 2025년 현재 한국어 프롬프트도 지원하여 “따뜻한 느낌의 사용자 프로필 아이콘”처럼 설명하면 여러 옵션을 제공합니다.
프로토타이핑 단계에서는 Framer AI를 활용합니다. Figma에서 만든 디자인을 Framer로 가져오면 AI가 자동으로 인터랙션과 애니메이션을 추가해줍니다. “스크롤 시 페이드인 효과” 같은 간단한 요청만으로도 프로덕션 수준의 인터랙션을 구현할 수 있습니다.
개발 전달 단계에서는 Figma의 Dev Mode와 Claude Code를 연계합니다. 디자인 스펙을 개발자에게 전달할 때 Figma에서 추출한 디자인 토큰을 Claude Code에 입력하면, AI가 자동으로 CSS 변수나 Tailwind 설정 파일을 생성합니다. 이를 통해 디자인-개발 간 커뮤니케이션 비용이 크게 줄어듭니다.
Part 3. 웹기획·디자인 통합 실전 사례
3-1. 사례 1: 스타트업 랜딩 페이지 제작 (소요 시간: 4시간)
한 헬스테크 스타트업이 투자 유치를 위한 랜딩 페이지를 급하게 필요로 했습니다. 전통적인 방식이었다면 기획 1주일, 디자인 1주일, 개발 1주일로 최소 3주가 소요되었을 것입니다. 하지만 에센스 오브 에센스 방식과 AI 도구를 활용하여 4시간 만에 완성했습니다.
첫 1시간은 본질 추출에 집중했습니다. 대표와의 30분 인터뷰를 통해 핵심 에센스를 정의했습니다. “병원에 가기 전 자가 증상 체크로 불필요한 방문을 줄이는 AI 헬스케어 어시스턴트”가 본질이었고, 타겟 페르소나는 “40-50대 만성질환 환자로 병원 방문 부담을 느끼는 사람”이었습니다. 불변의 규칙은 “3초 안에 서비스 가치 이해”, “의료 전문 용어 최소화”, “신뢰감을 주는 색상과 레이아웃”으로 정했습니다.
다음 1시간은 AI를 활용한 기획이었습니다. Claude에게 위의 에센스를 입력하고 랜딩 페이지 구조를 요청했습니다. AI는 “히어로 섹션: 핵심 가치 제안 + 데모 영상”, “문제 제시: 3가지 고충 시나리오”, “솔루션: 3단계 사용 방법”, “신뢰 구축: 병원 파트너십 + 의료진 감수”, “CTA: 베타 테스트 신청”이라는 5개 섹션 구조를 제안했습니다. 이를 Relume AI에 입력하여 와이어프레임으로 시각화했습니다.
다음 1시간은 디자인이었습니다. Figma AI에 “헬스케어, 신뢰감, 차분한, 전문적인” 키워드와 함께 와이어프레임을 입력했습니다. AI가 제안한 3가지 색상 팔레트 중 네이비(#1A3A52)와 민트그린(#7FB3A1) 조합을 선택했고, 타이포그래피는 Noto Sans KR을 적용했습니다. Creatie AI로 ‘심장 박동’, ‘체온계’, ‘청진기’ 아이콘을 생성하여 배치했습니다.
마지막 1시간은 개발과 배포였습니다. Figma 디자인을 Framer AI로 가져와 “Publish”를 클릭하자 자동으로 반응형 웹사이트가 생성되고 커스텀 도메인까지 연결되었습니다. 총 4시간 만에 프로페셔널한 랜딩 페이지가 완성되었고, 이 과정에서 기획자와 디자이너는 ‘본질 정의’와 ‘최종 의사결정’에만 집중했습니다.
3-2. 사례 2: 이커머스 리뉴얼 프로젝트 (에센스 기반 디자인 시스템 구축)
한 중견 패션 이커머스 업체의 웹사이트 리뉴얼 프로젝트에서 가장 큰 과제는 “200개가 넘는 페이지의 디자인 일관성 유지”였습니다. 기존 방식대로라면 디자이너 5명이 3개월 동안 각 페이지를 일일이 디자인해야 했지만, 에센스 오브 에센스 방식으로 접근하여 기간을 6주로 단축했습니다.
첫 2주는 브랜드 에센스 추출과 디자인 시스템 정립에 집중했습니다. 브랜드 워크숍을 통해 핵심 키워드를 “트렌디하지만 신뢰할 수 있는”, “젊지만 세련된”, “활기차지만 편안한”으로 정했습니다. 이를 시각적 요소로 변환하면 산세리프 타이포그래피(Pretendard), 블랙(#000000)과 코랄(#FF6B6B)의 강렬한 대비, 넉넉한 여백, 고해상도 제품 사진, 미니멀한 아이콘이었습니다.
이 에센스를 바탕으로 핵심 컴포넌트 15개를 직접 디자인했습니다. Navigation, Footer, Product Card, Filter Panel, Cart Summary, User Profile, Review Card, Banner, Modal, Form Input, Button (Primary, Secondary, Ghost), Badge, Tag, Breadcrumb입니다. 각 컴포넌트의 디자인 원칙과 사용 맥락을 문서화하여 Figma 라이브러리에 등록했습니다.
다음 2주는 AI 기반 자동 생성이었습니다. 200개 페이지를 10개 카테고리로 분류했습니다. 메인 페이지, 카테고리 리스트, 상품 상세, 장바구니/결제, 마이페이지, 고객센터, 이벤트, 로그인/회원가입, 검색 결과, 오류 페이지입니다. 각 카테고리의 대표 페이지 1개만 디자이너가 직접 만들고, 나머지는 Figma AI에게 “카테고리 리스트 페이지 스타일을 유지하면서 ‘여성 의류’ 카테고리 페이지를 만들어줘”처럼 요청하여 자동 생성했습니다.
마지막 2주는 검증과 수정이었습니다. AI가 생성한 200개 페이지를 Creatie AI의 Design Auditor로 일괄 검사했습니다. 접근성 문제(대비 부족, 터치 영역 작음), 일관성 문제(컴포넌트 변형 오류), 사용성 문제(CTA 버튼 시인성 부족) 등이 자동으로 표시되었고, 디자이너는 이 중 중요한 이슈만 수정했습니다. 결과적으로 200개 페이지 중 디자이너가 직접 작업한 것은 25개였고, 나머지 175개는 AI가 생성하고 디자이너가 검증하는 방식이었습니다.
3-3. 사례 3: B2B SaaS 대시보드 설계 (데이터 시각화 에센스)
한 B2B 마케팅 자동화 툴의 대시보드 리뉴얼 프로젝트는 데이터 시각화가 핵심이었습니다. 기존 대시보드는 기능은 많았지만 사용자들이 “뭘 봐야 할지 모르겠다”는 피드백이 많았습니다. 에센스 오브 에센스 방식으로 접근하여 문제를 해결했습니다.
먼저 사용자 인터뷰를 통해 대시보드의 본질을 정의했습니다. “마케터가 오늘 집중해야 할 1가지를 3초 안에 알려주는 것”이었습니다. 100개가 넘는 지표 중 우선순위의 에센스를 추출했습니다. 1순위는 목표 대비 현재 진행률, 2순위는 전날 대비 변화율, 3순위는 병목 구간 알림이었습니다. 이 3가지만 상단에 크게 표시하고, 나머지는 접을 수 있는 섹션으로 배치하기로 했습니다.
시각화 방식의 에센스도 정립했습니다. 진행률은 원형 게이지, 변화율은 화살표와 색상(증가=초록, 감소=빨강), 병목 구간은 경고 배너 형태로 통일했습니다. 복잡한 데이터는 가능한 한 간단한 차트(선, 막대, 원형)만 사용하고, 인터랙티브 요소는 최소화하기로 했습니다.
Claude에게 이 원칙들을 설명하고 대시보드 레이아웃 코드를 요청했습니다. AI는 React와 Recharts 라이브러리를 활용한 컴포넌트 구조를 제안했고, 실제 데이터를 넣어보니 디자이너가 의도한 정보 우선순위가 명확히 드러났습니다. 이후 Figma로 디테일을 다듬었지만, 전체 구조와 정보 아키텍처는 AI와의 협업으로 2일 만에 완성되었습니다.
Part 4. 실전 적용 체크리스트
4-1. 웹기획자를 위한 에센스 추출 체크리스트
프로젝트를 시작할 때 다음 질문에 답하며 에센스를 추출하세요.
프로젝트 본질 정의
- 이 프로젝트가 해결하려는 핵심 문제를 한 문장으로 표현할 수 있는가?
- 사용자가 이 서비스를 사용하는 진짜 이유는 무엇인가?
- 경쟁사와 차별화되는 단 하나의 가치는 무엇인가?
불변의 규칙 설정
- 어떤 디자인 변경이 있어도 절대 바뀌어서는 안 되는 사용자 여정은?
- 모든 페이지에서 일관되게 유지해야 할 정보 계층은?
- 접근성, 성능, 보안 측면에서 타협할 수 없는 기준은?
페르소나 에센스
- 타겟 사용자의 핵심 동기를 3가지 키워드로 표현하면?
- 사용자가 이 서비스를 사용하지 못하게 막는 가장 큰 장애물은?
- 사용자가 가장 자주 반복하는 행동 패턴은?
경쟁사 분석 에센스
- 성공한 경쟁 서비스들의 공통 패턴 3가지는?
- 우리가 피해야 할 실패 패턴은?
- 사용자들이 경쟁사에서 가장 자주 언급하는 불편함은?
AI 프롬프트 준비
- 프로젝트의 본질을 AI에게 설명할 3-5줄의 문장을 작성했는가?
- 불변의 규칙을 AI가 이해할 수 있는 명확한 조건으로 변환했는가?
- 성공 기준을 측정 가능한 형태로 정의했는가?
4-2. 웹디자이너를 위한 에센스 추출 체크리스트
디자인 작업을 시작하기 전 다음을 확인하세요.
브랜드 스타일 DNA
- 이 브랜드의 시각적 정체성을 3가지 키워드로 표현하면?
- 색상 팔레트에서 절대 사용하지 말아야 할 색은?
- 타이포그래피에서 지켜야 할 가장 중요한 원칙은?
디자인 시스템 핵심
- 가장 자주 사용될 컴포넌트 10개를 선정했는가?
- 각 컴포넌트의 변형 규칙을 명확히 정의했는가?
- 반응형 전환 시 변하는 것과 변하지 않는 것을 구분했는가?
감성과 무드
- 프로젝트의 감성을 10개 이하의 형용사로 표현할 수 있는가?
- 이 감성을 AI 이미지 생성 도구에 입력할 영문 키워드를 준비했는가?
- 레퍼런스 이미지에서 공통적으로 발견되는 시각적 패턴은?
인터랙션 원칙
- 이 프로젝트에서 움직임의 목적은 정보 전달인가, 감성적 몰입인가?
- 모든 애니메이션이 따라야 할 타이밍 원칙은?
- 모바일과 데스크톱에서 다르게 적용해야 할 인터랙션 규칙은?
AI 협업 준비
- 디자인 시스템을 Figma 라이브러리로 정리했는가?
- 자주 사용하는 프롬프트를 템플릿으로 저장했는가?
- AI가 생성한 결과물을 검증할 체크리스트를 준비했는가?
4-3. 팀 협업을 위한 에센스 공유 프로세스
에센스 오브 에센스는 개인의 능력뿐만 아니라 팀의 생산성도 높입니다. 다음 프로세스로 팀 전체가 에센스를 공유하세요.
킥오프 미팅 (2시간)
- 첫 1시간: 프로젝트의 본질과 불변의 규칙을 함께 정의
- 다음 30분: 각자의 역할에서 지켜야 할 핵심 원칙 도출
- 마지막 30분: 에센스를 문서화하고 AI 도구에 입력할 형식으로 변환
에센스 문서화 템플릿
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# 프로젝트 에센스
## 핵심 가치 제안 (1문장)
[여기에 작성]
## 타겟 페르소나 에센스
- 핵심 동기:
- 주요 장애물:
- 행동 패턴:
## 불변의 규칙
1. [기획 측면]
2. [디자인 측면]
3. [기술 측면]
## 브랜드 스타일 DNA
- 키워드:
- 색상:
- 타이포그래피:
- 시각적 특징:
## 성공 기준
- 정량적 목표:
- 정성적 목표:
주간 에센스 리뷰 (30분)
- 지난주 작업물이 에센스를 잘 반영했는지 검토
- AI 도구를 사용하면서 발견한 에센스 개선점 공유
- 다음 주 적용할 에센스 업데이트 합의
AI Skills 공동 관리
- 팀에서 사용하는 AI 도구(Claude Code, Cursor, Figma AI 등)의 프로젝트 설정을 공유
- 프로젝트 에센스를 반영한 커스텀 Skills를 팀 레포지토리에 등록
- 누구나 동일한 품질의 결과물을 낼 수 있도록 표준화
Part 5. 피해야 할 함정과 실패 사례
5-1. 에센스 없이 AI만 믿는 경우
가장 흔한 실패 사례는 프로젝트의 본질을 정의하지 않고 무작정 AI 도구에게 “웹사이트 만들어줘”라고 요청하는 것입니다. 한 스타트업 창업자가 Claude에게 “패션 쇼핑몰 만들어줘”라고만 하고 AI가 생성한 코드를 그대로 사용했습니다. 결과는 Zara, H&M, Uniqlo를 섞어놓은 것 같은 정체성 없는 웹사이트였습니다. 브랜드의 본질이 없었기 때문입니다.
반면 “Z세대를 위한 업사이클링 패션 플랫폼으로 지속가능성과 개성을 동시에 추구하는 브랜드”라는 명확한 에센스를 입력했다면, AI는 중고거래 기능, 커스터마이징 옵션, 업사이클링 스토리 콘텐츠 등 브랜드 정체성에 맞는 요소들을 제안했을 것입니다.
5-2. 에센스를 너무 복잡하게 정의하는 경우
다른 극단은 에센스를 추출한다며 수십 페이지의 브랜드 가이드를 그대로 AI에게 입력하는 것입니다. 한 디자인 에이전시는 클라이언트의 50페이지짜리 브랜드 북을 통째로 Claude에게 업로드하고 “이 브랜드 가이드를 따라서 웹사이트 디자인해줘”라고 했습니다. AI는 토큰 제한에 걸려 제대로 작동하지 않았고, 설령 작동하더라도 정보가 너무 많아 무엇이 핵심인지 파악할 수 없었습니다.
에센스 오브 에센스의 핵심은 ‘압축’입니다. 50페이지를 3가지 핵심 원칙으로 압축하는 것이 디자이너의 능력입니다. “정갈함, 신뢰, 혁신”이라는 3개 키워드와 “여백을 중시하는 미니멀리즘, 세리프 타이포그래피, 블루 계열 모노톤”이라는 시각적 원칙만 전달해도 AI는 충분히 일관된 결과물을 만들어냅니다.
5-3. AI 결과물을 검증 없이 사용하는 경우
에센스를 잘 정의하고 AI가 훌륭한 결과를 만들어냈다고 해서 무조건 신뢰해서는 안 됩니다. AI는 여전히 실수를 하고, 특히 한국 시장의 특수성이나 최신 법규를 반영하지 못할 수 있습니다.
한 온라인 교육 플랫폼이 개인정보 수집 동의 페이지를 Framer AI로 자동 생성했는데, 한국 개인정보보호법의 필수 고지 사항이 누락되어 서비스 오픈 직전에 발견되었습니다. AI는 GDPR 같은 글로벌 표준은 알지만, 한국의 특수한 법적 요구사항까지는 완벽히 반영하지 못했던 것입니다.
따라서 AI가 생성한 결과물은 반드시 전문가의 검증을 거쳐야 합니다. 특히 법률, 보안, 접근성 관련 부분은 AI에게만 맡기지 말고 해당 분야 전문가의 리뷰를 받아야 합니다.
5-4. 도구에 종속되는 경우
특정 AI 도구에 지나치게 의존하면 도구가 바뀌거나 서비스가 종료될 때 문제가 생깁니다. 한 스타트업은 모든 디자인 작업을 특정 AI 도구 하나에만 의존하도록 워크플로우를 구축했는데, 그 서비스가 갑자기 가격 정책을 대폭 변경하면서 예산이 10배로 늘어나는 위기를 겪었습니다.
에센스 오브 에센스의 진짜 가치는 ‘에센스’에 있지 ‘AI 도구’에 있지 않습니다. 에센스만 명확히 정의되어 있다면, 어떤 도구를 사용하든 일관된 결과를 낼 수 있어야 합니다. Figma AI가 안 되면 Relume AI를 쓰고, Claude가 안 되면 ChatGPT를 쓸 수 있는 유연성을 유지하세요. 핵심은 도구가 아니라 ‘우리 프로젝트의 본질’입니다.
Part 6. 2025-2026 전망과 준비
6-1. AI 도구의 진화 방향
2025년 현재 AI 도구들은 단일 작업(이미지 생성, 코드 작성)에서 통합 워크플로우로 진화하고 있습니다. Figma AI가 디자인뿐만 아니라 프로토타이핑과 개발 코드 생성까지 지원하고, Claude가 웹 검색부터 코드 실행까지 하나의 대화에서 처리하는 것처럼 말입니다. 2026년에는 이런 통합이 더욱 심화될 것입니다.
특히 주목할 만한 트렌드는 ‘AI 에이전트’의 부상입니다. 단순히 명령을 수행하는 것이 아니라, 프로젝트의 목표를 이해하고 스스로 계획을 세워 실행하는 자율적인 AI입니다. 예를 들어 “이커머스 웹사이트를 만들어줘”라고 하면, AI 에이전트가 자동으로 시장 조사를 하고, 경쟁사를 분석하고, 페르소나를 정의하고, IA를 설계하고, 디자인하고, 코드를 작성하여 배포까지 완료하는 식입니다.
하지만 여기서도 ‘에센스’의 중요성은 변하지 않습니다. 오히려 더 중요해집니다. AI가 자율적으로 움직일수록, 인간은 “무엇을 만들 것인가”와 “왜 만드는가”에 대한 명확한 방향을 제시해야 합니다. AI 에이전트가 100개의 기능을 자동으로 구현할 수 있더라도, 그중 정말 필요한 10개를 선택하는 것은 인간의 판단입니다.
6-2. 웹 전문가의 역할 변화
2026년 웹기획자와 웹디자이너의 역할은 ‘직접 만드는 사람’에서 ‘방향을 설정하고 검증하는 사람’으로 변화할 것입니다. 이미 2025년 현재 많은 기업에서 이런 변화가 시작되었습니다. 네이버, 카카오, 토스 같은 테크 기업들은 디자이너와 기획자가 AI를 활용하여 생산성을 2-3배 높이고 있습니다.
미래의 웹 전문가에게 필요한 핵심 역량은 다음과 같습니다. 첫째, 본질을 꿰뚫는 통찰력입니다. 복잡한 요구사항 속에서 정말 중요한 것이 무엇인지 파악하는 능력입니다. 둘째, 언어화 능력입니다. 추상적인 아이디어를 AI가 실행할 수 있는 명확한 지시로 변환하는 능력입니다. 셋째, 시스템 사고입니다. 개별 페이지나 기능이 아니라 전체 경험과 비즈니스 목표를 고려하는 능력입니다. 넷째, 비판적 검증 능력입니다. AI가 만든 결과물의 품질, 접근성, 법적 준수 여부를 판단하는 능력입니다.
흥미로운 점은 이 역량들이 모두 ‘인간만이 할 수 있는 것’이라는 점입니다. AI는 실행력은 뛰어나지만 통찰력과 판단력은 여전히 인간이 우위입니다. 따라서 AI를 두려워할 필요가 없습니다. 오히려 반복적이고 시간 소모적인 작업을 AI에게 맡기고, 우리는 더 창의적이고 전략적인 일에 집중할 수 있게 된 것입니다.
6-3. 지금 당장 시작하는 법
에센스 오브 에센스를 실무에 적용하고 싶다면 다음 단계로 시작하세요.
1주차: 에센스 추출 연습
- 현재 진행 중인 프로젝트 하나를 선택하세요
- 프로젝트의 본질을 한 문장으로 정의해보세요
- 3가지 불변의 규칙을 세워보세요
- 이를 동료들과 공유하고 피드백을 받으세요
2주차: AI 도구 실험
- Claude, ChatGPT, Gemini 중 하나를 선택하여 무료 계정을 만드세요
- 1주차에 정의한 에센스를 프롬프트로 입력하고 결과를 확인하세요
- 같은 내용을 여러 도구에 입력하여 차이를 비교해보세요
- 가장 잘 맞는 도구를 선택하세요
3주차: 실전 적용
- 작은 프로젝트(랜딩 페이지, 이메일 템플릿, 배너 디자인 등)를 선택하세요
- 전통적인 방식과 AI 활용 방식을 병행하여 진행하세요
- 소요 시간, 품질, 만족도를 비교 기록하세요
4주차: 팀 공유와 개선
- 3주간의 경험을 팀에 공유하세요
- 팀 차원의 에센스 정의 프로세스를 제안하세요
- 다음 프로젝트에 본격 적용할 계획을 수립하세요
맺으며: AI 시대, 본질에 집중하는 전문가로
우아한형제들 임동준 님의 ‘에센스 오브 에센스’ 개념은 단순한 AI 활용 팁이 아니라 AI 시대를 살아가는 전문가의 생존 전략입니다. AI가 빠르게 발전하고 매일 새로운 도구가 나오는 상황에서, 우리는 끊임없이 새로운 기술을 학습해야 한다는 압박을 느낍니다. 하지만 에센스 오브 에센스는 다른 접근을 제안합니다. 도구의 세부 기능에 매몰되지 말고, 프로젝트와 브랜드의 ‘본질’에 집중하라는 것입니다.
본질만 명확하다면, 어떤 도구를 사용하든 일관된 결과를 낼 수 있습니다. Figma AI가 나오든, Framer AI가 나오든, 완전히 새로운 도구가 나오든 상관없습니다. 우리가 정의한 ‘에센스’를 그 도구에 입력하기만 하면 됩니다. 이것이 켄트 백이 말한 “10%의 능력이 1,000배 가치”를 갖게 되는 이유입니다.
웹기획자와 웹디자이너의 미래는 밝습니다. AI가 우리를 대체하는 것이 아니라, 우리의 능력을 증폭시키는 도구가 되고 있습니다. 이제 우리는 와이어프레임 몇 백 장을 그리는 데 시간을 쓰지 않고, 사용자의 진짜 문제가 무엇인지 깊이 고민할 수 있습니다. 모든 페이지를 일일이 디자인하는 대신, 브랜드의 정체성을 어떻게 시각화할지 창의적으로 탐구할 수 있습니다.
2025년을 넘어 2026년, 그리고 그 이후에도 살아남을 웹 전문가는 AI 도구를 가장 빨리 배운 사람이 아니라, 프로젝트의 본질을 가장 명확히 정의할 수 있는 사람일 것입니다. 에센스 오브 에센스를 실천하며, AI 시대의 새로운 웹 전문가로 거듭나시기를 바랍니다.
문서 작성 일자: 2026-01-21