소개
새롭게 개편되는 학원 교육과정에 맞춰, 학원에서 사용할 공식 홈페이지를 빠르게 제작해야 했습니다. 하지만 저는 웹사이트 제작 경험이 거의 없었기 때문에 Figma AI를 활용해 이번 작업을 시도해보았습니다.
진행 방법
🔧 사용한 도구
Figma AI
자동 레이아웃 생성 기능
AI 기반 페이지 생성 기능
🚀 작업 과정
기본 페이지 구조를 생성하기 위해 Figma AI에 간단한 요구사항을 입력했습니다.
AI가 만들어 준 기본 레이아웃을 기반으로 학원 분위기에 맞게 수정했습니다.
하지만 원하는 느낌이 잘 나오지 않아, 처음부터 전체 구성을 갈아엎고 다시 생성했습니다.
재생성된 인터페이스가 목표에 더 적합해 빠르게 완성할 수 있었습니다.
💬 사용한 예시 프롬프트
**[1. 기본 설정 및 역할]**
- 역할: 최고의 UI/UX 디자이너
- 프로젝트: "Embodied AI (구현된 AI)" 전문 교육 아카데미 웹사이트
- 핵심 목표: AI 두뇌(LLM)와 로봇 신체(Physical AI)를 한번에 배운다는 학원의 철학 전달 및 커뮤니티 활성화
**[2. 디자인 톤 & 매너]**
- 스타일: 모던, 전문적, 하이테크, 미니멀
- 분위기: 밝고 창의적이며 신뢰감 있는 톤
- 색상 팔레트: 화이트/라이트그레이 배경, 일렉트릭 블루/아쿠아 그린 포인트
- 글꼴: Pretendard Bold/Regular
**[3. 필수 페이지 구성]**
1. 홈(Home)
2. 교육 철학(Our Philosophy & Curriculum)
3. 프로젝트 허브(Project Hub)
4. Q&A 게시판
5. 학원 소개 및 문의(About & Contact)
**[4. 상세 페이지 요구사항]**
- (홈) 히어로 섹션, 3단계 커리큘럼 카드, 프로젝트 하이라이트, CTA
- (교육 철 학) Embodied AI 설명, 3단계 로드맵 상세
- (프로젝트 허브) 카드형 프로젝트 갤러리, 검색/필터, 업로드 기능
- (Q&A) 테이블형 게시판, 태그, 검색/질문 버튼
- (학원 소개) 강사진/시설 소개, 문의 폼, 지도
결과와 배운 점
홈페이지 제작 지식이 거의 없어도 몇 분 만에 기본 형태를 완성할 수 있었습니다.
원하는 UI가 나오지 않아 전체 재구성하는 시행착오도 있었지만, 다시 만들면 된다는 점에서 부담이 적었습니다.
이제는 간단한 웹페이지라면 하루에 5개도 만들 수 있을 것 같다는 자신감이 생겼습니다.
웹 제작의 진입장벽이 정말 낮아졌다는 것을 실감했습니다! 😊
