소개
Lovable에 대한 극찬을 반복해서 듣다가, 문득 Figma ai와 성능을 비교해 보고 싶었음.
'25년부터 Figma 내 Figma ai 서비스가 시작되었는데 Figma ai를 지피터스 여러분들께 보여드리기 위해 1달만 유료계정을 사용해 보기로~^^
* 현재 사용중인 교육계정(학교/학원용)과 기관(Organization/회사 및 기관용) 계정은 Figma ai 미지원
아래 Figma 요금제 화면으로 Professional 선택~! (디지털 월세ㅠㅠ)
참고로, Figma는 웹 기반 디자인 도구로, 웹사이트/앱의 UI 등을 디자인하고 프로토타입을 제작할 수 있는 플랫폼로 Figma ai 기능은 '24. 6월 Figma 연례 컨퍼런스(샌프란시스코)에서 신기능으로 처음 소개가 되고 나서 '24년에는 일부 사용자들에 게만 서비스를 제공함.
위 요금제에 나온 Full seat, Dev seat, Collab Seat 에 대한 설명은 아래 화면 참고하세요.
* Collab(협업용) : 협업 기능 FigJam + 프리젠테이션 기능 Figma slides
* Dev(개발자용) : Collab + Dev Mode(Figma Design 내 Dev mode)
* Full(전체기능) : Collab + Dev Mode + Figma Design
진행 방법
사용한 도구 : Figma ai, lovable ai, Builder io
실시 사항
UI 제작을 위한 제품요구서(PRD)를 클로드에게 생성 요청
UI 제작용 제품요구서(PRD) 바탕으로 Figma ai와 lovable ai 각자 UI 제작
Figma ai 디자인에서 code를 Builder io 플러그인을 통해 lovable ai에게 전달해 보기
(Figma는 디자인 전용 툴이나 lovable ai는 풀스택 툴이라 연동을 통해 Figma에서 개발한 디자인으로 lovable에서 백엔드 부분 완성 가능)
(1단계) UI 제작용 제품요구서(PRD) 제작
PRD 자체는 크게 힘을 쓰지 않고, 클로드를 통해 하나 가볍게 만들어 달라고 요청함.
UI 제작용 제품요구서(PRD) 결과물
에코홈(EcoHome) 스마트 홈 솔루션 랜딩 페이지 PRD
## 1. 개요
### 1.1 제품 소개
에코홈(EcoHome)은 에너지 효율성과 지속 가능성에 중점을 둔 종합 스마트 홈 솔루션입니다. 사용자의 생활 패턴을 학습하여 에너지 사용을 최적화하고, 탄소 발자국을 줄이면서도 편안하고 현대적인 주거 환경을 제공합니다.
### 1.2 목표 고객
- 25-45세 기술 친화적인 홈 오너
- 환경 지속 가능성에 관심이 있는 소비자
- 에너지 비용 절감을 원하는 가정
- 스마트 홈 기술을 처음 도입하려는 사용자
### 1.3 랜딩 페이지 목적
- 에코홈 솔루션의 주요 기능과 혜택을 명확하게 전달
- 사용자 등록 및 무료 상담 신청 유도
- 브랜드의 친환경 가치와 기술 혁신을 표현
- 모바일과 PC 환경 모두에서 최적화된 사용자 경험 제공
## 2. 핵심 메시지
### 2.1 주요 가치 제안
- **스마트한 에너지 관리**: AI 기반 시스템으로 에너지 소비 최대 30% 절감
- **편리한 생활**: 모든 가전제품의 통합 제어와 자동화
- **환경 보호**: 실시간 탄소 발자국 모니터링 및 감소
- **맞춤형 경험**: 개인화된 추천과 자동 최적화
### 2.2 차별화 포인트
- 업계 유일의 탄소 상쇄 프로그램 내장
- 99.9% 재활용 가능한 하드웨어 구성품
- 타 스마트 홈 제품과의 호환성
- 직관적인 모바일/음성 제어 시스템
## 3. 디자인 요구사항
### 3.1 시각적 아이덴티티
- **컬러 팔레트**: 친환경을 상징하는 녹색 계열과 중립적인 회색/흰색 배합
- 주 컬러: #2E8B57 (바다 녹색)
- 보조 컬러: #F5F5F5 (오프 화이트), #333333 (다크 그레이)
- 액센트 컬러: #4CAF50 (영롱한 녹색), #03A9F4 (밝은 파란색)
- **타이포그래피**:
- 제목: Montserrat, 굵은 체
- 본문: Roboto, 일반/가벼운 체
- 강조: Roboto, 중간 체
- **이미지 스타일**: 밝고 깨끗한 인테리어, 자연과 기술의 조화를 보여주는 사진
### 3.2 UI/UX 요구사항
- 미니멀하고 깔끔한 인터페이스
- 부드러운 스크롤 애니메이션
- 데이터 시각화를 통한 에너지 절약 효과 표현
- 모든 기기에서 완벽하게 반응형으로 작동
## 4. 콘텐츠 구조
### 4.1 헤더 섹션
- 로고 및 네비게이션 메뉴
- 주요 CTA 버튼: "무료 체험 신청하기"
- 간결한 헤드라인: "스마트한 집, 건강한 지구"
- 서브헤드라인: "에너지는 절약하고, 편안함은 높이는 AI 스마트 홈"
### 4.2 히어로 섹션
- 감각적인 배경 이미지/비디오: 에코홈이 적용된 현대적 주택 내부
- 주요 가치 제안 (30% 에너지 절감, 편리한 생활)
- 주요 CTA 버튼: "지금 시작하기"
- 선택적 애니메이션: 에너지 사용량 감소 그래프
### 4.3 제품 소개 섹션
- 3-4개의 주요 기능 소개 카드
1. **스마트 에너지 관리**
- 아이콘: 에너지 미터 또는 잎 모양
- 설명: AI가 생활 패턴을 학습하여 최적의 에너지 사용 제안
2. **통합 제어 시스템**
- 아이콘: 스마트폰과 연결된 집
- 설명: 모든 가전제품을 하나의 앱에서 제어
3. **환경 모니터링**
- 아이콘: 지구본 또는 그래프
- 설명: 실시간 탄소 발자국 추적 및 개선 제안
4. **맞춤형 자동화**
- 아이콘: 톱니바퀴 또는 퍼즐 조각
- 설명: 사용자 선호도에 맞춘 자동화 시나리오 설정
### 4.4 작동 방식 섹션
- 단계별 설명 (3-4단계)
1. 간편 설치: 플러그앤플레이 방식의 쉬운 설치
2. 앱 연결: 스마트폰 앱과 연동하여 초기 설정
3. 학습 기간: AI가 1-2주간 생활 패턴 학습
4. 최적화 시작: 맞춤형 에너지 절약 모드 가동
- 애니메이션 또는 인포그래픽으로 시각화
### 4.5 고객 후기 섹션
- 3-4개의 고객 증언
- 각 후기마다 사진, 이름, 직업, 평가(별점) 포함
- 실제 에너지 절감 데이터와 함께 제시
- 슬라이드 또는 캐러셀 형태로 구현
### 4.6 요금제 섹션
- 3가지 요금제 옵션 (기본, 프리미엄, 기업용)
- 각 요금제별 포함 기능과 혜택
- 가격 정보와 결제 주기
- CTA 버튼: "시작하기" 또는 "문의하기"
### 4.7 FAQ 섹션
- 설치, 호환성, 비용 절감, A/S 관련 자주 묻는 질문
- 아코디언 스타일 UI로 구현
- 추가 질문을 위한 고객 지원 링크
### 4.8 뉴스레터 구독 섹션
- 간결한 이메일 입력 폼
- 에너지 절약 팁과 업데이트 정보 제공 약속
- 개인정보 보호정책 링크
### 4.9 푸터 섹션
- 회사 정보 및 연락처
- 소셜 미디어 링크
- 법적 고지 및 이용약관
- 사이트맵
## 5. 주요 기능 요구사항
### 5.1 PC 버전 (데스크톱)
- 풀스크린 히어로 섹션
- 스크롤에 반응하는 애니메이션
- 복잡한 데이터 시각화
- 호버 효과가 있는 인터랙티브 요소
- 내비게이션 고정 메뉴
### 5.2 모바일 버전
- 단일 컬럼 레이아웃
- 터치 친화적인 큰 버튼
- 간소화된 메뉴 (햄버거 메뉴)
- 가로 스와이프 캐러셀
- 빠른 로딩을 위한 최적화된 이미지
### 5.3 공통 기능
- 뉴스레터 구독 양식
- 문의 양식
- 소셜 미디어 공유 버튼
- 쿠키 동의 배너
- 다국어 지원 (한국어, 영어)
## 6. 기술적 요구사항
### 6.1 성능 목표
- 페이지 로드 시간: 3초 미만
- Google PageSpeed 점수: 90+ (모바일 및 데스크톱)
- 모든 기능이 JavaScript 없이도 기본 작동
### 6.2 브라우저 지원
- Chrome, Firefox, Safari, Edge 최신 버전
- iOS 14+ 및 Android 10+
### 6.3 접근성
- WCAG 2.1 AA 기준 준수
- 스크린 리더 호환성
- 키보드 네비게이션 지원
- 적절한 색상 대비
### 6.4 분석 및 트래킹
- Google Analytics 4 통합
- 전환 이벤트 트래킹
- 히트맵 분석
- A/B 테스트 준비
## 7. 성공 지표
### 7.1 주요 성과 지표 (KPI)
- 방문자 대 무료 체험 신청 전환율: 5% 이상
- 뉴스레터 구독률: 방문자의 10% 이상
- 페이지 체류 시간: 평균 2분 이상
- 바운스 레이트: 40% 미만
### 7.2 측정 방법
- Google Analytics를 통한 트래픽 및 전환 추적
- 히트맵을 통한 사용자 행동 분석
- 사용자 피드백 설문조사
- A/B 테스트를 통한 최적화
## 8. 일정 및 마일스톤
### 8.1 디자인 단계
- 와이어프레임 승인: 1주차
- 디자인 컨셉 검토: 2주차
- 최종 디자인 확정: 3주차
### 8.2 개발 단계
- 프론트엔드 개발: 4-5주차
- 콘텐츠 통합: 5주차
- 내부 테스트: 6주차
### 8.3 출시 준비
- QA 및 버그 수정: 7주차
- 성능 최적화: 7주차
- 최종 승인 및 출시: 8주차
## 9. 참고 자료 및 예시
### 9.1 디자인 인스피레이션
- [Nest](https://store.google.com/product/nest_learning_thermostat_3rd_gen) - 깔끔한 UI와 제품 중심 디자인
- [Tesla Energy](https://www.tesla.com/energy) - 미니멀한 디자인과 강력한 시각적 요소
- [Philips Hue](https://www.philips-hue.com) - 제품 사용 경험을 보여주는 이미지 활용
### 9.2 기술 스택 제안
- Front-end: React.js 또는 Next.js
- 애니메이션: GSAP 또는 Framer Motion
- CSS: Tailwind CSS 또는 Styled Components
- 반응형 디자인: CSS Grid 및 Flexbox
## 10. 추가 고려사항
### 10.1 다국어 지원
- 초기 한국어 및 영어 지원
- 향후 중국어, 일본어 확장 고려
### 10.2 지속적인 개선
- 사용자 피드백 수집 방법
- A/B 테스트 계획
- 콘텐츠 업데이트 주기
### 10.3 마케팅 통합
- GTM 태그 설정
- 리마케팅 픽셀 설치
- 소셜 미디어 공유 최적화(2단계) Figma ai vs. lovable ai / 랜딩 페이지 제작
Figma ai
결과물
Figma ai 첫 번째 시도 : 다소 실망스러움
Figma ai 두 번째 시도
첫 번째 시도 결과물과 사진 빼고 레이아웃이 너무 비슷하여 재실망. 심지어 두 번째 사진은 구도가 너무 비슷한 사진 사용
첫 번째 시도(좌측), 두 번째 시도(우측) UI 산출물 너무 비슷...
PRD가 같아도 이렇게 결과물이 같을 수 있나???
제작 영상(Figma ai 생성과정 / 두 번째 시도)
Lovable ai
같은 PRD를 제공했는데 확실히 lovable ai 결과물이 좀 더 보기 좋았음.
아무래도 Figma ai가 더 개선되지 않으면, 경쟁력을 갖추기 쉽지 않겠는 걸?
바로가기 링크 👉 Lovable로 만든 결과물
Lovable ai로 같은 PRD를 적용하여 랜딩 페이지를 제작한 영상(전반부)
Lovable ai로 같은 PRD를 적용하여 랜딩 페이지를 제작한 영상(후반부)
(3단계) Figma UI 결과물을 Lovable ai로 Export(Builder io 플러그인 이용)
Figma 디자인 파일 --> (Builder io 플러그인 이용 Export) --> Lovable ai 로 export (Lovable ai에서 백엔드까지 완성하기 위한 목적)
Figam 우측 작업 패널에서 Plugins -> Builder.io를 선택하면 Open in Lovable이란 버튼이 함께 뜬다.
Builder.io Plugin을 통해 Figma ai에서 Lovable ai로 코드일체가 넘어가는 화면
Builder io 이용 Figma 디자인파일을 lovable ai로 export 하는 과정에서 3가지 중 하나를 고르라고 나온다~ 그런데 3가지 모두 마음에 들지 않았다. Figma ai에서는 줄바꿈이 제대로 되었던 '건강한 지구'가 '건' 다음에 줄바꿈이 되어 있는 등 다소 그대로 넘어가지 않는 부분이 식별되었음.
Figma 작업물을 lovable ai로 export 완료!!
랜딩 페이지 좌측 상단에 개발자 모드전환 토글 스위치를 켜면 아래와 같이 UI파일이 코드 형태로 보임.
위에서는 랜딩 페이지 제작 시도를 해봤고, 모바일 UI 제작 성능도 궁금하여 아래와 같이 시도
'나모해'라고 내가 14기 때 기획한 모바일 앱의 일부 화면을 제작 요청 해봄.
프롬프트를 어떻게 주던 Figma ai는 한 번의 대화에 모바일 화면 하나만 제작 가능.
반면 Lovable ai와 클로드는 똑같은 PRD를 갖고 모바일 화면 각 메뉴 화면까지 누르면 각 메뉴로 이동하는 수준으로 제작함.
종합적으로 Lovable ai보다 클로드가 더 표현력이나 구현력이 살짝 더 좋았다고 느껴짐.
(Figma ai에는 화면을 여러개 만들면 그것을 이어주는 Add Interactions 기능이 별도로 있어서 화면만 모두 제작하면 자동으로 화면 전환을 이어주는 기능이 별도로 있음)
Figma ai
Lovable ai
Claude 아티팩트
결과와 배운 점
배운 점과 나만의 꿀팁을 알려주세요.
Figma ai에 대한 지나친 기대는 금물.
(Figma는 기존 디자인 시스템을 사용해서 유지보수가 용이한 점이 장점)
(Figma는 시각적 툴이라 코드 중심의 Lovable보다 디자이너 관점에서 섬세한 수정에 방점)
react 기반 실제 페이지와 같이 구현하는 능력은 클로드가 제일 우수하다고 생각됨. 백엔드와 결합한 툴인 Lovable은 사용자 만족도가 높은 UI 초안을 제시해 주었음.(개인적으론 클로드 아티팩트가 살짝 더 낫다 생각)
(Lovable은 신규 개발, 단 시간 내 MVP 제작 시 유리, 세밀한 것은 AI가 알아서 해주고 전체적인 것을 빨리 구현하고 싶은 사용자에게 적합)
많은 발표들이 프론트엔드는 어떻게든 LLM을 통해 그려봤는데,
그 다음 백엔드 연결은 어떻게 하는지에 대해 다소 사례 발표가 적다고 생각되어,
다음엔 LLM을 통한 백엔드 연결 방법에 대해 시도해 보고 가져와 보겠습니다.
도움 받은 글 (옵션)
Lovable 이용한 홈페이지 제작 글들로부터 영감 얻음
여기서는 Figma ai 기능 중 First Draft 기능을 중심으로 Lovable과 비교를 하였고, Figma ai의 다른 기능들에 대해서는 앞서 영인님께서 그래서 피그마 AI로 뭘 할 수 있나요? 라는 사례글에서 잘 작성해 주셨으니 궁금하신 분들은 참고 바랍니다.
읽어 주셔서 감사합니다.