🚀 Vooster + FigmaMake 로 랜딩 페이지 만들기 결과는..?

🚀 Vooster + FigmaMake 로 랜딩 페이지 만들기

반갑습니다 17기 Figma 진여진 입니다. 🙇‍♀️
오늘은 Vooster + FigmaMake 를 이용한 시행착고 공유드립니다.

💡 유니님의 잘 만들어진 랜딩 페이지를 보니 저도 개발하고 싶었습니다.

https://www.gpters.org/nocode/post/instructor-portfolio-animation-living-bQsbawHA8ETheW4

ALT

토끼 의상을 입은 소녀와 웹 사이트의 스크린 샷

만드는 김에 Vooster 가 있다면 쉽게 개발하지 않을까? 라는
무한한 생각으로 오늘 하루를 임합니다.

Vooster

Vooster는 대시보드 형태의 PM 툴입니다: PRD, TRD, Todo 관리(추가, 제거, 수정). 오픈 베타이지만 완성도 높은 서비스를 제공하고 있습니다.

🎯 오늘의 목표

Vooster + FigmaMake 를 이용해 퍼스널 랜딩페이지 구현 시행착오

🧩 개인 브랜딩 정의

💭 제가 가진 장점, 컨셉 등을 정의하는 시간을 가졌습니다.

많은 대화 끝에, 커뮤니티를 즐기는 활발한 개발자로 가고 싶다는 마음이 들었고,
보더콜리, 이태리 그레이하운드와 같이 어디에도 빠르게 적응하고
활발한 개발자의 이미지를 주는 사람이 되고 싶었습니다.

ALT

유튜브 "보더로운 생활" 의 "페퍼"

💡 앞으로 개발자 컨셉은 이런 멋진 보더콜리와 같은 컨셉으로 살고 싶습니다.

🎨 기획 - 브랜드 컨셉

우선 좋아하는 것들을 나열했습니다:

• Obsidian으로 메모하기

• 유튜브 시청

  • 보더콜리, 이탈리안 그레이하운드

  • 요리: 감각적이고 재미있는 요리 유튜브

  • 리그오브레전드 인플루언서 팟캐스트

• 커뮤니티 참여와 기여를 좋아함: 커뮤니티 소통형 개발자

• 크로스핏 2년정도 했음: (이건 소개하고 싶지 않아서 생략)

클로드에게 초안을 짜보니 이렇게 나왔습니다:

ALT

한국 텍스트가있는 화면의 스크린 샷

이후 이 컨셉을 들고 UX 진단을 받아보기:

ALT

검은 색 화면에서 한국 UI 스크린 샷

이후 미리 셋팅해둔 PRD + TRD 맥락을 제공했습니다:

ALT

검은 색 화면에서 한국 앱의 스크린 샷

🔑 이미 만들어 둔 PRD를 UX에 제공했습니다:

ALT

한국 PDD 앱의 스크린 샷

초기 구조를 나름 준비했기 때문에
디자인 컨셉을 잡기만 하면 개발에 이어갈 수 있다는게 장점입니다.

이어 만들어 둔 TRD도 제공해줍니다:

ALT

한국 웹 사이트의 스크린 샷

GPT가 아주 놀라네요.

Claude와 대화를 나누며 가볍게 만든 디자인 컨셉, 이미지를 제공합니다:

ALT

개가있는 한국 TV 쇼의 스크린 샷

이렇게 초기 정보 셋팅을 충분하게 하니
처음은 힘들어도 디자인 단에서 정보 제공을 시원시원하게 해서 기분이 좋습니다.

ALT

검은 색 화면에서 한국어의 스크린 샷

⚠️ 그런데 이상합니다.

초기 설계는 좋아하는 것들을 넣었는데 결과는 마음에 안들어요.

왜 그럴까 고민해보니, 담고 싶은 이야기가 많은 것 같습니다.

요리를 컨셉으로 갈지, 강아지를 컨셉으로 갈지 결정해야합니다.

ALT

한국어 문자 메시지의 스크린 샷

브랜드 컨셉을 결정해야 합니다:

1. 요리 메타포 중심: 개발자 전문성이 돋보이는 컨셉

2. 반려견 메타포 중심: 개발과 삶의 균형을 함께하는 사람

   • 공감 + 꾸준함을 드러내며 커뮤니티에 과정을 공유하는

   • 이 컨셉은 채용담당자에게 돋보이는 컨셉은 아니지만

   • 당장 취업을 목표하지도 않고, 성장하고 배우는 커뮤니티를 실제로 하고 있기에

   • 반려견 컨셉을 이어갑니다.

🎯 결론: 성장일지 + 공감대를 유도하는 강아지와 커뮤니티 같은 느낌을 주도록 결정!

이렇게 브랜딩 메타포를 결정하고 진행합니다.
키-스크린, 와이어프레임 이미지를 들고 UI 빌더로 이동합니다.

이렇게 조금씩 완성하고 있는 중입니다. 그리고 오늘의 결과:

전체 컬러감과 폰트도 다듬어야 하고 브랜드 문구나, 효과도 불분명합니다.

오늘 발표를 마치고 추가 작업할 것들이 눈에 많이 보이지만.. 아쉽지만 오늘은 여기까지 합니다.

ALT

'글로벌 글꼴 시스템을 업데이트하여'라는 텍스트가있는 검은 색 화면

간단한 랜딩페이지를 만들기 위해 Version 83을 때렸습니다. 그리고 얻은 결론은 무엇일까요?

💭 느낀 점

🎯 브랜드 컨셉은 확실하고 명확한 "하나"

저는 요리, 강아지 두 개의 컨셉이 겹치다보니
브랜드 컨셉을 잡을 땐 좋다가 막상 최종 제안서를 받으니 ....? 싶은 상황이 생겼습니다.

ALT

한국어 문자 메시지의 스크린 샷

지금처럼 핵심을 전달하는 메세지가 불분명하게 되고,
컨셉은 명확한 "하나"로 해야한다는 교훈을 얻었습니다.

⚠️ Vooster와의 궁합은 생각보다 안좋았다

Vooster는 기능 관점 Task Manager이기 때문에
Cursor와 같은 IDE 기반으로 개발하는게 맞습니다.

디자인 컨셉과 메타포를 중심으로 개발하는
FigmaMake의 웹빌더 프로세스와 어울리지 않습니다.

하지만 도움이 될까? 싶어서 도전적인 시도를 했고, 결과는 예상보다 더 힘들었습니다.

기능구현 안정성을 올리기 위해 상세 기능 구현을 하려면

FigmaMake 에서 문서 생성/수정/명령 전부 편하지 않다보니 고생을 꽤나 했습니다.

🛠️ FigmaMake, 넌 너무 IDE(?) 스럽지 않아

FigmaMake는 프롬프트 기반 웹 빌더입니다.
문서를 생성/수정이 불가능한 도구입니다. 하지만 잡기술을 쓰면 가능하죠.

사진처럼 프롬프트로 문서를 만들어달라고 부탁하면 해주거든요.

ALT

Adobe 코드 편집기의 스크린 샷

이렇게 문서를 만들 수 있긴 하...지..만 이게 쉽지 않습니다 (진짜임).

💭 FigmaMake, 넌 자아가 너무 강해

이유는 FigmaMake 자체의 자아가 너무 강합니다.

• Todo 문서를 만들었고, 사용자가 수정했는데

• 수정한 작업 안하고 다른 일을 하기도 함

커스텀으로 만든 룰을 쓸데없이 너무 잘 지킨다거나
마음대로 사용자가 작성한 문서를 수정하는 경우도 잦습니다.

⚠️ 완벽주의가 낳은 프로세스의 벽

우리의 목표는 FigmaMake를 이용해 빠르게 프로토타이핑을 만드는 겁니다.

완성도를 챙기는 것도 좋지만, 그게 핵심인지 고민해봐야 합니다.

저는 하나의 프로젝트에 PRD/TRD/UX-Brand 문서를 나눠
매 프롬프트에 맥락을 넣어 개발하는 "컨텍스트 엔지니어링"을 해왔습니다.

ALT

한국 버전의 Todo Content Engineering의 스크린 샷

처음 한 두번은 힘들어도 하겠지만
하루종일 이렇게 하니까 정신적/육체적 피로도가 올라오더라구요.
완벽주의로 안전하게 개발해보겠다는 욕심이 저를 힘들게 만들었습니다.

📝 결론

• 처음 컨셉 css, 폰트, 타이포그래피 큰틀에서 시원게 개발 적용해도 괜찮습니다.

• 디자인 컨셉과 폰트, 메타포를 제공하고 FigmaMake의 힘을 믿어도 좋습니다.

• 공식문서를 다시 읽어보고 FigmaMake가 지향하는 방향이 무엇인지 다시 공부해야겠습니다.