안녕하세요~~ 유니입니다.
오랜만에 인사 드립니다.
나만의 강사 포트폴리오 사이트를 만들고 싶었어요,
“애니메이션 맛집” 같은 역동적인 인터랙션을 꼭 넣고 싶었어요~ 물론 시중에는 프레이머나, 버블이나, 소프터나 다양한 노코드 툴이 있고 또 저희가 사랑하는 러버블 같은걸로 해도 되었겠죠?
하지만 제가 이번에 시도한건 figma make 예요~
저희 스터디장인 Diane 님 OT 때 보여준 데모 덕분에 용기가 뿜뿜! 그날 만든 샘플을 내 정보로 싹 갈아끼워, 애니메이션이 살아 숨 쉬는 포트폴리오를 꿈꾸며 도전을 시작했습니다.
사용툴
Figma Make : 프로토타입 + 인터랙션 올인원 툴
chatGPT : 구성안, 내용 다듬기
진행 방법
1차 – 기본 프레임 구성
OT 때 만든 ‘강의 의뢰’ 템플릿을 가져와 텍스트/이미지를 내 프로필
Diane 님의 UX/UI Builder 사용했습니다.
1차-01 가이드에서 랜딩페이지 만들기를 눌렀습니다.
그럼 어떤 내용을 만들고 싶은지 넘버링해서 내용을 정리합니다.
1차-02 서비스개요, 디자인, 요구사항까지 잘정리해주네요, 그럼 마지막에 ui builder 프롬프트를 줍니다.
프롬프트
Create a modern, SEO-optimized, animated landing page for a professional AI & Microsoft instructor brand named "Youni".
The design should be clean, simple, and stylish with scroll-based reveal animations. Use a dark-themed base (#1f2937)
with accent gradients from blue (#4f46e5) to purple (#9333ea). Typography should use Pretendard or Inter, with bold
headlines and readable body text. Include components like a hero banner, lecture cards, company collaboration slider,
newsletter signup, and contact form. Use icons from lucide-react. Avoid startup-style design and prefer a B2B educational
branding tone. Ensure all content is optimized for SEO and discoverability in AI agents.이제 이걸 figma make 로 넣어서 만들어봅니다.
2차 – 수정 과 애니메이션 폭풍 요청
후~ 이제 부터 수정과 피드백 시작~ 이네요~ 후후
[추가요청 ]
마우스에 유니 이미지 따라다니게 해달라고 요청
강의레퍼런스 추가요청
블로그 관리기능 추가요청
[수정요청]
섹션삭제요청
마우스 호버시 깜빡임 수정요청
이미지 깨진 문제 해결요청
등등의 많은 수정을 거쳤습니다.
결과물
https://bats-speed-54691368.figma.site
3차- 로드맵 설계 (미진행)
강의 관리 페이지: 강의 의뢰건·후기·자료 다운로드 관리 (예정)
블로그 게시판: 실전 노하우 연재, 현재페이지는 등록및 관리기능추가
뉴스레터 페이지: 구독 폼 + 아카이브 (예정)
추가)
1. 팟캐스트 모집페이지를 만들어봤어요!
https://spiny-stunt-95906663.figma.site
추가)
2. 대시보드를 만들어봤어요
결과와 배운 점
Figma Make 미쳤다! 드래그 몇 번으로 인터랙션이 완성돼서 속도감이 장난 아님.
하지만 과하면 독🤯 : 배경 + 커서 + 스크롤 이펙트가 겹치면 가독성이 뚝!
→ 다음 버전에서 ‘애니메이션 다이어트’ 예정.과도한 애니메이션은 지향하는것으로 , 애니메이션 이펙트 잘못넣었다가, 수정만 n번째🥲
도움 받은 글
Diane 님의 노션 페이지
리플렛을 붙여서 블로그글, 뉴스레터글, 강의등록등을 관리하는 대시보드를 만드는게 목표입니다.
원하는 결과를 얻을수있도록 열심히 응원하고 알려주시는 Diane 스터디장님, Inactive Member 스터디장님, 버디 ming 님 감사합니다. 스터디원들 모두 원하는 결과물 만들때까지 화이팅입니다.😉✨
저를 더 만나고 싶다면?
유니가 운영하는 니툴내툴노코드 오픈톡방(암호: gpters)
https://open.kakao.com/o/gW2P1KKf
캔로봇님과 유니가 같이 운영하는 코파일럿 ATOZ (암호: gpters)
https://open.kakao.com/o/gt1Za07f
