1. 프롬프트 입력해서 디자인 시안 뽑아내기
프롬프트 상세
# “Figma pedia”라는 제목의 앱에 대해 깔끔하고 현대적인 모바일 UI 화면(iOS 스타일)을 디자인해줘
레이아웃은 아래의 구조화된 섹션을 따라줬으면 좋겠어. 그리고 모든 텍스트 폰트패밀리는 ’pretendard’로
설정해줘. 화면에 반영된 텍스트는 한글이어야 함.
1. 상태 표시줄(상단)
•
스타일: 표준 iOS 레이아웃을 따름
2. 헤더 섹션
•
중앙 로고: `Figma Pedia’
•
글꼴: 중간 굵기, 작은 크기
•
색상: 파란색 텍스트
3. 추천 코스 캐러셀(수평 스크롤 가능)
•
스타일: 둥근 모서리와 부드러운 그림자가 있는 스와이프 가능한 카드
•
카드:
◦
카드 1
▪
제목 : 피그마 디자인 기초
▪
자막 : 4월 2일 시작
▪
비주얼: 애니메이션 썸네일
◦
카드 2
▪
제목: 프리랜서 디자이너를 위한 피그마 코스
▪
자막 : 3월 31일 시작
▪
시각적: 생산성 아이콘
4. 탐색 탭
•
탭:
◦
트렌드 (활성, 굵은 레이블과 파란색 밑줄)
◦
추천
◦
등록됨
◦
저장됨
5. 행 필터링
•
필터(드롭다운):
◦
지난 7일 (시간 기반)
◦
모든 주제 (카테고리)
◦
모든 레벨 (난이도)
6. 인기 강좌 목록
•
레이아웃: 반복 가능한 과정 항목의 수직 스택:
◦
왼쪽: 둥근 썸네일
◦
중앙:
▪
과목명
▪
레벨(예: 초급, 중급 등)
◦
오른쪽: 저장 아이콘
◦
하단: 등록 수 + 추세(예: 2.4k 등록, +12%)
7. 하단 탐색 바
•
탭:
◦
홈 (활성, 강조된 색상)
◦
찾다
◦
이벤트
◦
프로필
•
스타일:
◦
아래 라벨
2. 디자인 베리에이션 요청
디자인 콘텐츠를 유지하면서 아래 설명에 따라 강조하는 부분을 다르게 구성해달라고 요청한다.
다음 설명에 따라 동일한 핵심 콘텐츠를 사용하지만 레이아웃, UI 요소 및 시각적 강조를 변경하세요.
옵션 1. 대담하고 매력적인
- 시각적 효과와 브랜드 표현을 우선시합니다.
옵션 2. 기능적이고 빠름
- 속도, 명확성, 생산성을 우선시하세요
- 더 작은 카드와 조밀한 정보 계층을 갖춘 컴팩트한 UI
옵션 3. 개인화 및 따뜻함
- 연결, 신뢰, 개인화를 우선시합니다.
- AI가 큐레이팅한 코스 제안이 있는 "For You" 캐러셀
- 사회적 증거(아바타, 배지, 친구 활동)
3. 코딩까지 마쳐달라고 하면 캔버스 창이 열리며 코딩 시작
4. figma에 이미지 가져와서 Codia Ai같은 플러그인을 활용해 원본으로 만들면 끝
(단 이 단계 진행 시 유료 플러그인이라 1회 정도만 무료 테스트 가능하며,
디자인이 완전히 유지되는것은 아님)