ChatGPT와 Figma를 활용하여 상세 페이지를 완성하는 방법은?

 

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."

ChatGPT와 Figma를 활용하여 상세 페이지를 완성하는 방법은?

ChatGPT로 상세 페이지 기획안을 작성한 후, Figma의 AI 기반 디자인 생성 플러그인인 UX Pilot AI를 활용하여 상세 페이지 초안을 만들고 수정하는 방식으로 완성 할 수 있습니다

Figma의 AI 기반 디자인 생성 플러그인 4종은 무엇인가요?

• UX Pilot AI: ChatGPT 기획안을 바탕으로 상세 페이지 초안을 생성합니다. (무료 아님, 90 크레딧 제공)
• Make: 프롬프트를 통해 바이브 코딩을 수행하여 웹/앱 UI를 생성합니다. (베타 서비스 기간 중 무료)
• HTML to Design: 웹사이트 주소를 입력하면 해당 웹사이트를 그대로 복제합니다. (한 달에 5번 무료)
• First Draft: 프롬프트 두 줄만으로 웹이나 앱을 생성합니다. (유료)

이 콘텐츠는 비디자이너를 위한 피그마 활용법을 총망라하여, ChatGPT와 AI 플러그인을 통해 상세 페이지를 자동 생성하고 디자인을 효율적으로 개선하는 실용적인 방법을 제시합니다. 파일럿 AI를 활용한 상세 페이지 초안 제작부터 메이크(Make)를 이용한 바이브 코딩, HTML to 디자인으로 웹사이트 복제, 퍼스트 드래프트(First Draft)로 앱/웹 디자인까지, 다양한 AI 기반 디자인 자동화 툴의 실제 적용 사례를 상세히 보여줍니다. 특히 피그마의 핵심 기능인 오토 레이아웃, 컴포넌트, 컨스트레인트를 활용하여 디자인의 일관성과 효율성을 높이는 방법을 구체적인 예시와 함께 설명하여, 디자인 경험이 없는 사람도 전문가 수준의 결과물을 만들 수 있도록 돕습니다. 이 강의를 통해 복잡한 디자인 작업을 AI의 도움으로 간소화하고, 시간과 비용을 절약하며 고품질의 콘텐츠를 제작하는 노하우를 얻을 수 있을 것입니다.

1. ChatGPT와 Figma를 활용한 상세 페이지 제작 개요

1. 목표: 비디자이너를 위한 Figma 활용법을 통해 ChatGPT와 AI 플러그인을 이용한 상세 페이지 자동 생성 및 디자인 효율 개선 방법을 학습한다.

1. 주요 학습 내용:
   1. 파일럿 AI: 상세 페이지 초안 제작
   2. 메이크(Make): 바이브 코딩 (Vibe Coding)
   3. HTML to 디자인: 웹사이트 복제
   4. 퍼스트 드래프트(First Draft): 웹/앱 디자인 자동 생성

2. 콘텐츠 내용 상세 안내

• Figma 기본 설명:
  1. Figma가 무엇인지 설명한다.
  2. 설치 방법 및 인터페이스를 안내한다.
  3. Figma의 다양한 기능 중 비전문가를 위한 아주 기본적인 기능 위주로 설명한다.

• ChatGPT를 활용한 상세 페이지 기획:
  1. ChatGPT를 이용해 상세 페이지 기획안을 만드는 방법을 다룬다.
  2. 파일럿 AI 플러그인을 활용하여 기획안을 제작한다.
     1. 비용: 무료는 아니며, 회원 가입 시 90 크레딧이 제공된다.
     2. 크레딧 차감: 한 번 사용할 때마다 6 크레딧이 차감되어 약 15회 사용 가능하다.
     3. 활용: 비전문가도 쉽게 초안을 만들 수 있어 유용하다.
     4. 실습: 추후 실습을 통해 사용 방법을 익힌다.

• 기타 AI 기반 디자인 자동화 툴 소개:
  1. 메이크(Make): 바이브 코딩을 위한 툴이다.
     1. 베타 서비스: 현재 베타 서비스 기간으로 유료 요금제임에도 사용 가능하다.
  2. HTML to 디자인: 웹사이트 주소 입력 시 웹사이트를 그대로 복제하는 기능이다.
     1. 사용 제한: 한 달에 5번 무료로 사용 가능하다.
  3. 퍼스트 드래프트(First Draft): 프롬프트 두 줄로 웹이나 앱을 만들어 주는 기능이다.
     1. 비용: 유료 서비스로, 무료 사용자는 직접 사용이 불가능하다.
     2. 학습 방법: 유료 사용자의 활용 사례를 유튜브 영상을 통해 간접적으로 학습한다.

3. Figma의 특징 및 장점

3.1. Figma의 기본 정의 및 클라우드 기반의 특징

1. Figma의 정의: 웹사이트나 모바일 앱 개발에 사용되는 디자인 툴이다.

1. 클라우드 기반의 특징:
   1. 접근성: 웹 브라우저와 앱에서 동시에 사용 가능하다.
   2. 연동성: 앱에서 작업한 내용이 브라우저와 연동되어 보인다.

1. 강력한 플러그인 생태계:
   1. 플러그인 정의: 프로그램 안에 있는 프로그램으로, 각각의 기능이 매우 강력하다.
   2. 장점: 다양한 플러그인 생태계가 Figma를 좋은 툴로 만드는 이유이다.

1. 무료 시작 가능:
   1. 초기 접근성: 무료로 시작할 수 있다.
   2. 퀄리티: 무료 버전으로도 상당히 퀄리티 있는 디자인을 만들 수 있다.

3.2. Figma의 핵심 강점: 실시간 협업 및 데브 모드

1. 실시간 협업: Figma가 인기가 많은 핵심적인 이유는 실시간 협업 기능 때문이다.

1. 기존 디자인 개발 과정의 문제점:
   1. 수동적 정보 전달: 과거에는 디자이너가 디자인을 만든 후 개발자에게 글꼴, 폰트, 색상 번호 등 디테일한 정보를 일일이 설명해야 했다.
   2. 비효율적인 수정 과정: 디자인 수정 시 디자이너가 수정하고 메일이나 링크로 전달하면, 다른 사람이 수정 후 다시 받아 수정하는 번거로운 과정이 반복되었다.

1. 데브 모드(Dev Mode)의 도입:
   1. 코드 자동 생성: 데브 모드를 활용하면 디자인에 대한 코드가 자동으로 생성된다.
   2. 커뮤니케이션 효율화: 개발자와의 커뮤니케이션 필요성이 크게 줄어든다.
   3. AI 연동: 기업용 코파일럿(Copilot)이나 클라우드 기반 AI 코딩 도구와 연동이 가능하다.
   4. AI의 디자인 맥락 파악: AI가 코드를 직접 알려주므로 디자인 맥락을 완전히 파악할 수 있다.
   5. 동시 수정: 하나의 파일을 여러 사람이 동시에 수정할 수 있다.
   6. 데브 모드 시연 (과거 버전):
      1. 코드 확인: 데브 모드에서 디자인 요소에 대한 코드를 확인할 수 있다.
      2. 협업 용이성: 디자이너와 개발자가 함께 작업하는 모습으로 협업의 용이성을 강조한다.
      3. 히스토리 관리: 9일 전 디자인이 분홍색에서 흰색으로 변경된 것처럼 디자인 변경 이력을 확인할 수 있다.
      4. 공유 기능: 'Share' 버튼을 눌러 링크를 공유하면 다른 사람들과 협력하여 수정할 수 있다.
   7. 현재 데브 모드 위치: 과거 영상에서는 오른쪽에 있었으나, 현재는 다른 위치에 있다.
   8. 유료 기능: 데브 모드는 유료 사용자만 활용 가능하다.

3.3. Figma의 시장 가치 및 성장 동력

1. 시장 가치:
   1. 시가총액: 현재 시가총액은 55조 원이다.
   2. 상장 및 초기 성과: 2025년 7월 31일 뉴욕 증시 상장 첫날 250%상승하여 65조 5천억 원을 기록했으나, 이후 시세 조정이 있었다.

1. Adobe 인수합병 무산과 전화위복:
   1. 인수 시도: 몇 년 전 Adobe가 Figma를 인수합병하려 했다.
   2. 창립자의 의지: 창립자 딜런 필드(Dylan Field)는 Adobe와의 인수합병을 적극적으로 원했다.
   3. 독과점 문제: 미국과 유럽 규제 당국이 독과점을 이유로 승인을 거부했다.
   4. 결과: 당시 직원들은 낙심했으나, 결과적으로 Figma는 전화위복이 되어 유사 기능을 하는 다른 디자인 회사를 압도하고 있다.

1. Figma의 성공 요인:
   1. 높은 순이익: 순이익률이 90%에 달한다.
   2. 기업 사용률: 포춘 500대 기업 중 95%가 사용하고 있다.
   3. 고객 유지율: 기존 고객 유지율이 96%이다.
   4. 바텀업(Bottom-up) 홍보: 말단 디자이너가 Figma를 사용하면서 다른 직원, CFO, 심지어 외부 협력사까지 사용하게 되는 입소문 방식의 홍보가 성공의 핵심이다.
   5. 딜런 필드의 철학: "Design is everyone's business" (디자인은 모든 사람의 비즈니스)라는 철학을 가지고 있다.
   6. 노코드 툴로의 진화: 아이디어를 말로 정리하고 클릭 몇 번으로 웹에 바로 올릴 수 있는 노코드 툴로 진화 중이다.

4. Figma 요금제 및 설치 방법

4.1. Figma 요금제 종류

1. 요금제 종류:
   1. Starter: 무료 사용자용 요금제이다.
   2. Professional: 월 16달러이다.
   3. Organization: 월 55달러이다.
      1. 기업 활용: 개인에게는 큰 금액이지만, 회사 입장에서는 큰 부담이 아니므로 포춘 500대 기업 등에서 많이 사용될 것으로 추정된다.

1. Figma의 다양한 기능 (Full Suite):
   1. FigJam: 화이트보드 기능이다.
   2. Slides: 프레젠테이션 기능이다.
   3. Dev Mode: 코드를 확인할 수 있는 기능이다.
   4. FigBuzz: Canva와 유사한 디자인 요소 활용 툴이다.
   5. Figma Site: 웹사이트 제작 및 배포 기능이다.
   6. Make: 바이브 코딩 기능이다.
   7. 최신 기능: FigBuzz, Site, Make는 비교적 최근에 출시된 기능들이다.
   8. 기본 기능: Figma Design은 가장 기본적인 디자인 기능이다.

4.2. Figma 설치 및 환경 설정

1. Figma 웹 버전 접속:
   1. 구글에서 "Figma"를 검색하여 첫 번째 링크로 접속한다.
   2. 이미 회원 가입이 되어 있다면 바로 화면이 뜬다.

1. 회원 가입 방법:
   1. 구글 계정 활용: 구글 계정으로 회원 가입을 진행한다.
   2. 정보 입력: Figma에서 활동할 이름과 직업(예: 교육자)을 입력한다.
   3. 추가 질문: 직업에 따라 학교 유형 등 추가 질문이 나올 수 있으나, 대략적으로 입력해도 무방하다.
   4. 언어 지원: 한국어를 지원한다.

1. Figma 앱 버전 설치 (선택 사항):
   1. 다운로드: Figma 웹사이트에서 "Figma Download"를 통해 앱을 다운로드할 수 있다.
   2. 권장 대상: 본격적으로 디자인 관련 작업을 할 경우 앱 사용을 추천한다.
   3. 운영체제별 설치: Mac 사용자는 Mac용, Windows 사용자는 Windows용 앱을 다운로드한다.
   4. 글꼴 설치 프로그램: 추가로 글꼴 설치 프로그램을 Mac/Windows에 맞게 다운로드하여 사용해야 한다.
   5. 앱 사용 권장 이유: 웹 버전은 렉이 걸리거나 반응이 느릴 수 있어, 디자이너들은 거의 100% 앱으로 작업한다.
   6. 강의 진행 방식: 강사는 모니터 크기 및 폰트 조절 문제로 웹 버전으로 진행한다.
   7. 학습자 권장: 빠른 학습을 위해 웹 버전을 사용해도 무방하다.

5. Figma 인터페이스 및 기본 기능

5.1. Figma 홈 화면 구성

1. 홈 화면 메뉴:
   1. Design: 디자인 작업을 시작하는 곳이다.
   2. FigJam: 화이트보드 기능이다.
   3. Slides: 프레젠테이션 기능이다.
   4. FigBuzz: Canva와 유사한 디자인 툴이다.
   5. Figma Site: 웹사이트 제작 및 게시 기능이다.
   6. Make: 바이브 코딩 기능이다.

1. 파일 가져오기 (Import):
   1. 버튼 위치: 홈 화면 오른쪽 상단에 있는 'Import' 버튼을 사용한다.
   2. 파일 형식: Figma 파일의 확장자는 .fig이다.
   3. 파일 로딩: 제공된 Figma 파일을 드래그하여 로딩한다.
   4. 실습 준비: 로딩된 파일 중 첫 번째 페이지를 더블 클릭하여 열고, 'Final' 페이지에서 실습을 진행한다.

5.2. Figma 작업 화면 구성 및 기본 요소

1. 작업 화면 시작:
   1. 'Design'을 클릭하거나 'Drafts'에서 '+' 버튼을 눌러 새 작업 화면을 연다.
   2. 페이지: 기본적으로 'Page 1'이 생성되며, '+' 버튼으로 페이지를 추가할 수 있다.

1. 주요 디자인 요소:
   1. 섹션(Section): 페이지 안에 섹션을 만들 수 있으며, 가로 크기를 자유롭게 조절 가능하다.
      1. 색상 조절: 'Fill' 기능을 통해 섹션의 색상을 변경할 수 있다.
   2. 프레임(Frame): 디자인, 그림, 텍스트 등을 넣을 때 주로 사용되는 영역이다.
      1. 프레임과 섹션의 관계: 섹션 안에 프레임이 포함될 수 있다.
   3. 도형: 네모, 동그라미(Shift 누르면 정원), 별, 선 등을 만들 수 있다.
   4. 텍스트(Text): 'T' 버튼을 눌러 텍스트를 입력한다.

1. 인터페이스 패널:
   1. 왼쪽 패널: 레이어(Layer)나 페이지(Page) 이름이 표시된다.
   2. 중앙 작업 창: 실제 디자인 작업을 하는 공간이다.
   3. 오른쪽 속성 패널: 선택된 요소의 속성(글자, 레이아웃, 투명도, 색상, 테두리 등)을 조절한다.

1. 이미지 삽입 방법:
   1. 로컬 이미지 삽입:
      1. 'P' 버튼을 누르고 네 번째 'Image'를 선택한다.
      2. 원하는 이미지를 선택하여 삽입하고, 'Crop' 기능을 통해 위치를 조절한다.
      3. 프레임이나 도형 안에 이미지를 넣을 수 있다.
   2. 플러그인을 통한 이미지 삽입 (Unsplash):
      1. Actions (플러그인) 메뉴: 'Actions' 메뉴에서 'Unsplash' 플러그인을 검색하여 실행한다.
      2. 이미지 검색 및 삽입: Unsplash에서 원하는 이미지를 검색(예: "cat")하여 선택된 프레임이나 도형 안에 바로 삽입할 수 있다.
      3. 위치 조절: 'Crop' 기능을 통해 이미지 위치를 조절한다.

1. 작업 편의 기능:
   1. 핸드 툴(Hand Tool): 작업 화면을 움직일 수 있는 기능으로, 'Space' 키를 눌러서도 동일하게 작동한다.

5.3. Figma의 핵심 기능 3가지: 오토 레이아웃, 컴포넌트, 컨스트레인트

1. 오토 레이아웃(Auto Layout):
   1. 기능: 요소들을 자동으로 정렬하고 간격을 조정하는 기능이다.
   2. 장점: 일일이 위치를 맞출 필요 없이 규칙을 정해주면 전체 디자인이 일정한 간격으로 깔끔하게 유지된다.
   3. 적용 방법: 요소를 선택한 후 레이아웃 창의 오토 레이아웃 아이콘을 클릭하거나 Shift + A를 누른다.
   4. 예시:
      1. '노트북' 텍스트를 'TV'로 변경 시, 글자 크기가 작아지면서 왼쪽으로 치우치는 현상이 발생한다.
      2. 오토 레이아웃 적용 후 'TV', '김치 냉장고', '냉장고, 김치 냉장고 세트' 등 텍스트 길이에 따라 좌우 간격이 자동으로 조절된다.
      3. 여러 요소를 전체로 묶어 오토 레이아웃을 적용하면, 요소들을 대충 배치해도 일정한 간격으로 자동 정렬된다.
      4. 가로뿐만 아니라 세로 방향으로도 정렬 방식을 변경할 수 있다.

1. 컴포넌트(Component):
   1. 기능: 반복적으로 사용되는 UI 요소를 재사용하고 관리하는 기능이다.
   2. 장점: 버튼이나 내비게이션 바처럼 자주 등장하는 요소를 컴포넌트로 만들면, 나중에 한 번만 수정해도 전체 디자인에 바로 반영되어 편리하다.
   3. 적용 방법:
      1. 먼저 오토 레이아웃을 적용한다.
      2. 프레임 옆의 컴포넌트 마크(Create Component)를 클릭한다.
   4. 예시:
      1. 컴포넌트로 저장된 부모 요소를 복사하여 자식 요소들을 만든다.
      2. 부모 컴포넌트의 색상을 변경하면, 모든 자식 컴포넌트의 색상이 동시에 변경된다.
      3. 상세 페이지에서 통일성을 위해 많은 버튼을 컴포넌트로 묶어 작업하면, 수정 시 노동 집약적인 작업을 피할 수 있다.

1. 컨스트레인트(Constraint):
   1. 기능: 상위 프레임의 크기가 변하더라도 하위 요소의 위치와 크기가 일정하게 유지되도록 돕는 기능이다.
   2. 활용: 반응형 디자인에 특히 유용하다.
   3. 적용 방법: 속성 창의 'Constraint' 섹션에서 위/아래/왼쪽/오른쪽 고정 여부를 설정한다.
   4. 예시:
      1. 왼쪽 상단 고정: 위와 왼쪽이 고정된 요소를 프레임 크기 변경 시, 왼쪽 상단에 고정되어 유지된다.
      2. 오른쪽 하단 고정: 오른쪽과 아래쪽에 고정된 요소를 프레임 크기 변경 시, 오른쪽 하단에 고정되어 유지된다.
      3. 좌우 고정 및 상단 고정: 버튼과 같이 좌우가 고정되고 위쪽에 위치한 요소는 프레임 크기 변경 시, 위쪽에 고정된 채 좌우 간격이 유지된다.
      4. 좌우 고정 및 하단 고정: 좌우가 고정되고 아래쪽에 위치한 요소는 프레임 크기 변경 시, 아래쪽에 고정된 채 좌우 간격이 유지된다.
      5. 프레임 내 그림 고정: 프레임 안에 있는 그림이나 속성도 왼쪽/오른쪽 고정 및 상단(Top) 또는 하단(Bottom) 고정을 통해 반응형으로 조절할 수 있다.

6. ChatGPT와 파일럿 AI를 활용한 상세 페이지 제작 실습

6.1. 상세 페이지 기획을 위한 벤치마킹

1. 아이템 선정: 무드등을 상세 페이지 제작 아이템으로 선정한다.

1. 벤치마킹 대상 선정:
   1. 네이버 스토어에서 '무드등' 검색 후, 현재 가장 잘 팔리는 아이템의 상세 페이지를 벤치마킹 대상으로 선정한다.
   2. 벤치마킹의 중요성: ChatGPT나 LLM을 통해 기획안을 받을 수도 있지만, 현재 가장 잘 팔리는 아이템의 상세 페이지 구조를 먼저 보고 따라하는 것이 중요하다.

1. 벤치마킹 상세 페이지 분석:
   1. 초반 구성: 동영상과 함께 예쁜 그림과 임팩트 있는 문구를 배치하여 고객의 시선을 사로잡는다.
   2. 제품 소개: 화이트, 우드 등 제품의 종류를 소개한다.
   3. 문제점 제시: 고객이 겪을 수 있는 문제점(예: 사이즈, 조작 편의성, 색상 다양성 부족)을 제시한다.
   4. 해결책 제시: 내 상품이 이러한 문제점을 해결할 수 있음을 나열한다(예: 더 큰 사이즈, 리모컨 조작, 다양한 색 온도, 긴 사용 시간, 차일드락).
   5. 기능 상세 설명: 각 기능을 'Check 1', 'Check 2' 등으로 나누어 GIF 이미지와 함께 상세히 설명한다(예: 배터리, 리모컨, 색 온도, 밝기 조절, 타이머, 차일드락).
   6. 부가 정보: 선물용 프리미엄, 사은품 등 부가적인 내용을 포함한다.

1. 상세 페이지 기획 포맷 정리:
   1. 초반: 예쁜 그림과 임팩트 있는 문구.
   2. 두 번째: 문제점 제시.
   3. 세 번째: 내 아이템이 문제점을 해결함을 제시.
   4. 이후: 제품의 기능을 1, 2, 3, 4로 나열하여 설명.

6.2. ChatGPT를 활용한 상세 페이지 기획안 작성

1. 필요 자료:
   1. 내 제품 설명서: 제품에 대한 상세 설명서가 필요하다.
   2. 벤치마킹 상세 페이지 내용: 분석한 대표 상세 페이지의 내용을 필사하여 준비한다.
      1. 예시: 강사는 셀러가 아니므로, 벤치마킹 페이지를 참고하여 가상의 제품 설명서를 만들었다.
      2. 차이점: 타겟 고객 정보 추가, 색상 종류(화이트, 우드 외 핑크, 딥그린, 스카이블루 추가)만 변경했다.
      3. 실제 셀러: 실제 셀러는 기존 인기 제품과 내 제품의 차이점을 상세히 기획해야 한다.

1. ChatGPT 프롬프트 구성:
   1. 참고 자료: Figma 유튜버 '디선 제압'의 프롬프트를 변형하여 사용한다.
   2. 프롬프트 내용:
      1. 역할 부여: "너는 10년 경력의 이커머스 마케터이자 상세 페이지 기획 전문가이다."
      2. 참고 자료: "내 제품 파일과 대표 상세 페이지 파일을 참고하여 상세 페이지 구성안을 작성해 줘."
      3. 작성 조건: "이미지 삽입 전제로 디자인 기획과 카피 구성을 함께 해 줘."
      4. 목적: "카피라이팅과 디자인 섹션 구성안을 동시에 완성하는 것이다."
      5. 구매 유도: "구매 전환율을 높일 수 있는 구매 유도 문구(CTA: Call to Action)를 적절히 삽입해 줘."
      6. 구조: "헤드라인과 바디 부분은 초입, 중간, 후반, 마무리 구도로 짜주고, 제목과 프레임 번호를 입력해 줘."
      7. 세부 구성: "프레임별 카피 문구와 이미지 기획안을 작성해 주고, 주요 기능은 각 기능별로 하나의 프레임을 구성해 줘."
      8. 헤드라인: "강력해야 하며, 이쁜 그림(가능하면 GIF 동영상), 리브 포인트, 혜택, 환불 보장, 판매량, 한정 수량, 앵콜 같은 키워드를 넣어 짧고 강렬한 헤드 문구를 제시해 줘."
      9. 초입: "왜 이 제품이어야 하는지 설득할 수 있도록 문제점(1, 2, 3)을 바디 부분 초입에 넣어 줘."
      10. 중간: "이러한 문제점을 내 제품이 어떻게 해결할 수 있는지 중간 부분에 적어 줘."
      11. 후반: "내 제품이 가진 기능을 1, 2, 3으로 나열하여 각각 프레임별로 정리해 줘."
      12. 마무리: "내 제품을 사 달라는 콜 투 액션 문구를 재삽입하여 행동을 유도해 줘."
      13. 콜 투 액션 문구 예시: "지금 구매하면 20% 할인", "수량 조기 품절 주의", "A사 대비 두 배 성능", "같은 가격에 더 강력하게 지금 확인해 보세요", "100% 국내 생산 무상 2년 품질 보증 안심하고 사용하세요", "단 3일 특별 세일 지금이 기회입니다" 등.
      14. 최종 구성: "제일 마지막에는 Q&A를 넣어 줘."

1. ChatGPT 기획안 결과 (예시):
   1. 헤드 섹션: "언제 어디서나 은은한 빛으로 내 아기를 위한 수면 루틴 완성", "한정수량 20% 할인 조기품절 주의" 등 강력한 문구와 기획안, 실사용 후기(예: "수유 중 불 끄러 안 가도 돼서 너무 편해요", "타이머 기능 덕분에 아이랑 같이 꿀잠")를 포함한다.
   2. 초입 (문제 인식): "밤마다 아기 깨지 않게 불 끄러 갔다가 스트레스", "손전등으로 수유하다가 눈부심에 울던 아기", "무드 등은 감성은 좋은데 기능은 부족" 등 문제점을 제시한다.
   3. 문제 해결: "그런 분들을 위해 엄마의 말에 귀 기울인 수유 등이 돌아왔습니다"와 같이 문제 해결을 위한 제품임을 강조한다.
   4. 중간 (기능별 나열): 'Check 1'부터 'Check 6'까지 배터리, 리모컨, 색 온도, 밝기 조절, 타이머, 차일드락 등 각 기능을 하나씩 나열한다.
   5. 후반부: 전체 기능을 다시 한번 정리하고, 신혼, 1인 직장인, 감성 선물용 등 활용 가능한 예를 제시한다.
   6. 마무리: 다시 한번 구매 유도 문구(콜 투 액션)와 Q&A를 포함한다.

1. 기획안 수정 및 보완:
   1. 헤드라인 강화: 초기 기획안의 헤드라인 섹션이 약하다고 판단하여, 한두 프레임에서 세 프레임으로 늘려 강조하도록 수정 요청한다.
   2. 이후 진행: 4번 프레임부터는 기존 기획안대로 진행한다.
   3. 실습 자료 제공: 학습자들이 ChatGPT를 직접 돌려보거나, 강사가 미리 만들어 둔 기획안을 활용할 수 있도록 제공한다.

6.3. 파일럿 AI를 활용한 상세 페이지 초안 제작

1. Figma 작업 환경 준비:
   1. 새 페이지 대신 기존 파일 활용: 새로운 페이지에 작성하는 대신, 강사가 제공한 Figma 파일('Final' 페이지)을 열어 작업하는 것을 권장한다.
   2. 작업 위치: 'Final' 페이지를 열고 스크롤을 위로 올려 빈 화면에 작업한다.

1. UX 파일럿 AI 플러그인 사용 방법:
   1. 플러그인 실행: Figma의 'Actions' 메뉴에서 'UX Pilot' 또는 'UX 파일럿'을 검색하여 실행한다.
   2. 회원 가입: 구글 계정으로 회원 가입을 진행한다.
   3. 설정:
      1. 디바이스: 기본 설정인 'Desktop'과 '2개' 대신, 'Mobile'과 '1개'로 변경하여 크레딧 소모를 줄인다.
      2. 크레딧: UX 파일럿은 무료가 아니며, 초기 90 크레딧이 제공되고 한 번 사용 시 6 크레딧이 차감된다.
   4. 프롬프트 입력: ChatGPT에서 생성한 상세 페이지 기획안 내용을 복사하여 입력란에 붙여넣는다.
   5. 생성: 'Generate' 또는 'Generate High Design' 버튼을 누르면 상세 페이지 초안이 생성된다.
      1. 생성 시간: 생성에는 다소 시간이 소요될 수 있다.
      2. 결과: AI가 자동으로 상세 페이지 초안을 만들어 준다.

1. 생성된 초안의 한계 및 2차 수정 필요성:
   1. 내용 부족: AI가 생성한 초안은 15프레임으로 구성되지만, 그림이 부족하고 기능 설명 부분이 부실할 수 있다.
   2. 2차 수정: 생성된 초안을 그대로 사용하기보다는 2차 수정이 필요하다.

1. 모바일 초안을 PC 버전으로 확장 및 분할:
   1. 크기 확장:
      1. 모바일 버전(가로 390px)을 PC 버전(가로 860px)으로 확장한다.
      2. 프레임을 선택하고 Alt 키를 누른 채 드래그하여 복사한다.
      3. 'Scale' 기능을 사용하여 가로 크기를 390px에서 860px로 늘린다.
   2. 프레임 분할 (Split):
      1. 길게 이어진 상세 페이지를 프레임별로 쪼개어 수정하기 편리하게 만든다.
      2. 분할된 프레임은 디자인 수정 시 특정 부분만 늘리거나 줄이는 등 유연한 작업이 가능하다.

1. 상세 페이지 최종 완성 (AI Final):
   1. 원본 및 수정본 비교: AI가 생성한 원본, PC 사이즈로 늘린 버전, 그리고 분할 후 수정된 최종 버전을 비교한다.
   2. 그림 및 문구 교체: AI가 만든 그림 대신 내 제품의 실제 그림으로 교체하고, 벤치마킹한 문구를 참고하여 텍스트를 수정한다.
   3. 내용 추가: 제품의 색상 종류(5가지)와 같이 AI 초안에 없던 내용을 추가한다.
   4. 최종 플로우:
      1. 초반: 강력하고 예쁜 그림(GIF 동영상 권장), 20% 할인, 한정 수량, 조기 품절 등 임팩트 있는 문구, 실제 후기, 핵심 기능 요약.
      2. 문제점 제시 및 해결: 고객의 문제점을 제시하고, 내 제품이 이를 해결할 수 있음을 강조.
      3. 제품 종류 소개: 내 제품의 5가지 색상 소개.
      4. 기능 설명: 'Check 1'부터 'Check 6'까지 배터리, 리모컨, 색 온도, 무드 맞춤, 타이머, 차일드락 등 각 기능을 상세히 설명.
      5. 핵심 기능 정리 및 활용: 핵심 기능을 다시 정리하고, 제품의 활용 예시를 제시.
      6. 구매 유도 및 Q&A: 콜 투 액션 문구와 Q&A를 포함하여 마무리.
   5. 벤치마킹 구조 유사성: 최종 완성된 상세 페이지는 벤치마킹 대상의 구조와 유사하게 만들어진다.
   6. 결론: Figma 플러그인인 UX 파일럿 AI에 ChatGPT 기획안을 입력하여 상세 페이지 초안을 만들고 완성하는 방법을 학습했다.

7. Figma의 AI 기반 디자인 자동화 플러그인 활용

7.1. Make를 이용한 바이브 코딩

1. Make 업데이트: 2024년 5월 Figma 업데이트를 통해 Make 사용법이 공개되면서 많은 관심을 받았다.

1. 대시보드 생성 예시:
   1. 프롬프트 제공: 대시보드 생성을 위한 프롬프트가 제공된다.
   2. 사용 방법: Figma 홈 화면의 'Make'를 클릭하고 프롬프트를 입력 후 실행한다.
   3. 생성 시간: 생성에는 약 3분 정도 소요될 수 있다.
   4. 결과: 대시보드 디자인이 자동으로 생성된다.
   5. 오류 가능성: 현재 Figma에 렉이 발생하여 Make 사용 시 오류가 발생할 수 있다.
   6. 사용 주의: Make는 몇 번 사용하면 더 이상 사용하지 못할 수 있으므로 신중하게 사용해야 한다.

1. 컨퍼런스 등록 페이지 생성 예시:
   1. 프롬프트 내용: 인터랙티브한 좌석 예약 선택기를 포함하는 컨퍼런스 등록 페이지를 생성한다.
      1. 기능: 기본 티켓 가격(120)에서수량에따라총액이증가하는기능(예:2개선택시120)에서수량에따라총액이증가하는기능(예:2개선택시$120)에서 수량에 따라 총액이 증가하는 기능(예: 2개 선택 시 $240)을 구현한다.
   2. 언어: 한글 프롬프트도 가능하지만, 복잡한 내용은 영어 프롬프트가 더 효과적이다.
   3. 사용 방법: 'Make'에 프롬프트를 입력하고 실행한다.
   4. 결과: 수량에 따라 가격이 자동으로 계산되는 등록 페이지가 생성된다.

1. Make의 고급 기능: 커서 편집 (Cursor Editing):
   1. 기존 방식의 한계: 일반적인 프롬프트 수정은 코드 전체를 다시 생성해야 하므로 번거롭다.
   2. 커서 편집의 장점: 특정 부분만 편집이 가능하여 비교적 빠르게 수정할 수 있다.
   3. 사용 방법:
      1. 편집할 요소를 선택하고 '커서 편집' 아이콘을 클릭한다.
      2. 팔레트에서 글꼴, 크기, 볼드체, 패딩 등을 조절할 수 있다.
      3. 프롬프트 입력란에 수정 내용을 입력하고 실행하면 해당 부분만 변경된다(예: 2026을 2025로 변경).
   4. 반응형 디자인 확인: PC형과 모바일형 디자인을 전환하며 확인할 수 있다.

1. Make의 연동성 및 활용:
   1. 코드 생성: 다양한 코드(HTML, CSS 등)를 생성해 준다.
   2. 공유 및 게시: 'Share' 버튼으로 다른 사람과 공유하거나 'Publish'로 게시할 수 있다.
   3. Figma 디자인 연동: Figma에서 디자인한 일부를 캡처하여 Make에 올리고 코드를 생성하거나, Make에서 만든 코드를 Figma 디자인에 삽입할 수 있다.
   4. 강점: 이러한 연동성 때문에 Figma의 Make 기능이 강력하다.

7.2. HTML to 디자인 플러그인

1. 기능: 웹사이트 주소만 입력하면 해당 웹사이트를 그대로 복사하여 Figma 디자인으로 만들어 주는 기능이다.

1. 사용 방법:
   1. 새 페이지를 복사하여 'HTML to 디자인' 페이지를 만든다.
   2. 'Actions' 메뉴에서 'HTML to Design' 플러그인을 검색하여 실행한다.
   3. 추천 사이트: 플러그인에서 추천하는 'Apple' 웹사이트를 임포트하면 그대로 복제된다.
   4. 사용자 지정: 협회 웹사이트 주소를 입력하고 임포트하면, 해당 웹사이트의 글꼴 중 Figma에서 지원하지 않는 글꼴에 대해 대체 글꼴 사용 여부를 묻는다.
   5. 결과: 웹사이트 디자인이 Figma 파일로 그대로 생성된다.

1. 활용 방안:
   1. 비디자이너 활용: 벤치마킹하고 싶은 웹사이트를 복제하여 디자인 초안으로 활용할 수 있다.
   2. 2차 수정: 복제된 디자인을 그대로 사용하기보다는 톤앤매너, 그림, 텍스트 등을 수정하여 사용해야 한다.

1. 저작권 문제: 저작권 문제로 인해 조만간 기능이 제한될 가능성이 있다.

1. 사용 제한: 한 달에 5번 무료로 사용 가능하다.

7.3. 퍼스트 드래프트(First Draft) 플러그인

1. 비용: 유료 플러그인으로, 무료 사용자는 직접 사용이 불가능하다.

1. 가능한 디자인 예시: 음악 스트리밍 앱, 항공권 비교 앱, 식료품 배달 앱, 쇼핑 앱 등을 만들 수 있다.

1. 사용 방법:
   1. 플러그인 실행: Figma의 'Actions' 메뉴에서 'First Draft'를 검색하여 실행한다.
   2. 앱/사이트 선택: 앱을 만들 것인지, 사이트를 만들 것인지 선택한다(예: Basic App).
   3. 프롬프트 입력: 만들고자 하는 앱에 대한 프롬프트를 입력한다(예: "Grocery Delivery App").
   4. 초안 생성: 'Create it'을 클릭하면 1차적인 초안이 생성된다.
   5. 색상 수정: 전반적인 색상을 갈색, 녹색, 파란색 등 원하는 색상으로 조절할 수 있다.
   6. 추가 수정: 변경하고 싶은 내용을 다시 프롬프트로 입력하여 수정한다(예: 식료품 디스플레이 창 추가, 텍스트 크기 확대).
   7. 결과: 프롬프트에 따라 디스플레이 창이 추가되고 텍스트 크기가 커지는 등 수정된 디자인이 생성된다.

2025년 꼭 써봐야할 AI 필수 툴 9가지 총정리

2025년 꼭 써봐야할 AI 필수 툴 9가지 총정리 - 하나이프 블로그