바이브코딩으로 타로운세 서비스 만들기

https://mystellatarot.figma.site/

 

부트캠프 UI 실습 때 만든 타로운세 서비스 'Stella Tarot' 이다. 선생님이 '별' 에 무슨 의미가 있는건지 물어보셨는데, 타로하면 뭔가 점성술이 떠올라서 넣어봤다. 웹사이트 한정 별들 위에 마우스를 호버링하면 깜박거리는 인터렉션을 체험할 수 있다.

 

글꼴은 엘레강스하면서도 오묘한 느낌이 나는 궁서체로 찾고 싶었다. 그러다가 찾은 건 '국립박물관문화재단'의 전용 서체였다. 다운 받을 수 있는 사이트는 아래에▼

국립박물관문화재단

 

메인페이지의 중앙 부분에는 'marquee'라는 인터렉션을 적용한 붉은 문구들이 우측에서 좌측으로 흘러가고 있다. '운명'과 관련된 명언들을 검색해 넣은 것인데, 타로 결과가 마음에 들지 않더라도 운명은 어차피 본인이 개척하는 것이니 너무 상심치 말라는 의미에서 넣어둔 것이다. 그리고 피그마 Site 의 인터렉션을 최대한 적용해보기 위해 넣은 것도 있다. 내가 찾은 명언들은 아래와 같다.

 

['운명' 관련 명언들]

“운명을 바꾸는 힘은 나에게 있다” - 윌리엄 셰익스피어

“인간은 자기 운명의 설계자이다" - 아리스토텔레스

“운명은 우리가 예상하지 못한 길로 이끈다" - 오 헨리

“운명은 우리가 선택하는 것이고, 선택은 우리를 만든다" - 프란시스 베이컨

“우리는 운명을 받아들일 수 밖에 없지만, 그것을 다스릴 수 있는 힘도 있다" - 토머스 칼라일

“운명은 우리를 특정한 길로 이끌지만, 그 길을 걷는 것은 우리의 선택이다" - 오스카 와일드

 

Figma Make

 

이번 서비스를 만들면서 사용했던 AI 서비스와 거쳤던 작업과정을 기록해두려 한다.

 

🤖 AI: Figma Make, Antigravity, Manus, Claude

🗂️ 작업과정 (2일)
1. Figma Site에서 페이지 디자인 제작 및 인터렉션 연결
2. Figma Site의 CMS 활용하여 타로 결과 페이지 제작 시도
3. Manus에 메인페이지 디자인 첨부하고, 비슷한 무드로 타로카드 78장 제작 요청
4. 타로 결과 내용이 삽입된 CSV 파일을 Claude한테 뽑아서 CMS에 삽입하는 것까진 성공했으나, 결과가 랜덤으로 보여야 하는 기능 구현 실패
5. Figma Make에 디자인한 프레임 붙여넣고 자연어로 인터렉션 구현
6. Antigravity에 요청해서 '랜덤 결과' 페이지를 보여주는 기능 덧붙여 코드 수정
7. 수정한 코드를 Figma Make에 수동으로 붙여넣고 퍼블리싱
8. Figma Make 토큰 부족 이슈로 파일 모두 다운받아 로컬에 저장해두고 Antigravity와 디자인 디벨롭
9. 수정한 코드는 수동으로 Figma Make에 붙여넣고 퍼블리싱 업데이트 (반복x100)
10. 노션 폼 및 노션 페이지 URL 링크로 연결하여 웹사이트 상단의 헤더 활성화
11. 인터렉션으로 인해 발생한(추정) 오류 디버깅