소개
*활동명은 Jun을 사용하고 있습니다.
닉네임을 수정하려고 했는데 수정이 안되네요?
** 작성하고 보니 CTO보다는 스타트업 실험실 느낌이네요 ㅠ
시도하고자 했던 것과 그 이유를 알려주세요.
부산에 있는 친구 공장에서 레이저 마킹기가 세팅되면서..
알루미늄 소재 명함을 만들 수 있다고 하는 이야기부터 이야기가 시작됩니다..
제가 홍보하고 주문 받아주면 생산, 배송은 해주겠다고 해서 모양새부터 만들어보자를 시작했습니다.
진행 방법
어떤 도구를 사용했고, 어떻게 활용하셨나요?
lovable : 랜딩페이지 기본 구성
github : 우선 lovable로 만든 코드 cursor와 공유 목적
cursor : 세부수정
chatGPT : 로고생성
firebase : 지금은 문의글 저장(firestore), 배포(hosting), 도메인 연결
naver smart store : 결제 및 판매
기존에 flutterflow를 하면서 firebase는 꽤 많이 다뤄봐서 익숙한지라..
뭔가 db스러운게 있으면 firebase(firestore)부터 손이 갑니다..
그리고 firebase안에서 배포도 되고, analytics도 되니.. 한곳에서 관리하는게 편하기도 합니다.
(supabase도 꽤 좋아서 명분?이 생기면 이것도 써보려고 합니다!)
lovable UI가 cursor보다 나 은 것 같아서(제 질문이 별로라서?)
일단 lovable에 만들어달라고 하고 detail은 cursor로 다듬었습니다.
디지털 월세가 많이 나가는터라.. 일단 lovable은 최대한 무료로 활용해야 했습니다.
하루에 질문 5개, 한달에 30개(4월까지는 100개..)
이 안에서 해결한다..
브랜드 이름은 어떻게 할까.. chatGPT...
... 어쩌고...
그래서 여차저차 carry4block을 만들었습니다.
GPT가 제안해준 아이디어에서는 없었지만
유사한 조합으로 생각하고 도메인 확보가 가능한 브랜드를 잡으니
일단 저정도면 적당하지 않나 생각되요!
역시 chatGPT와 티키타카하면서 로고도 무난하게 뽑아봅니다.
디자이너 분들이 보기엔 별로겠지만 뭐 일단 진행부터 합니다.
선공개.. 후 개발과정 공유합니다.
랜딩페이지는 빨리 만들꺼니까 lovable로 갑니다.
최근엔 PRD정리해서 사용하고 있는데..
이 사례는 묵은지 사례라서.. 체계적인 PRD는 아닙니다..
프롬프트 전문
Create a minimal and elegant landing page for a product called "carry4block".
Product description:
carry4block is a premium aluminum business card that blocks RFID signals. It's designed not only to protect your cards from wireless interference, but also to leave a lasting impression — always carried, always remembered.
Design tone:
Inspired by Apple’s product pages — minimal, clean, full of white space. Typography should be light and modern. The content should be emotionally resonant, simple, and visually balanced.
Sections:
1. Hero Section
- Headline: "Always carried. Always remembered."
- Subtext: "A business card that protects and stays with you."
- Centered product image on white background
2. Features (3 columns, minimal text)
- RFID Shielding → "Prevents wireless interference"
- Made to Last → "Crafted from premium brushed aluminum"
- Memorable Design → "Stays in their wallet — and their mind"
3. Vertical Brand Moment
- Display the brand vertically:
carry
4
block
- With subtle animation or spotlight (optional)
4. CTA
- Headline: "Ready to carry your brand?"
- Button: "Order your first card"
Colors:
White background, dark gray text, a single accent color (deep blue or emerald green)
Font:
Modern sans-serif (e.g., SF Pro, Inter, Helvetica Neue)
Additional:
Include subtle shadows or soft motion to make the product feel tangible.chatGPT가 뽑아줬으니 lovable 잘 만들어줘라!
흠.. 뭔가 밋밋합니다.
chatGPT가 만들어준 로고를 활용해서 넣어달라고 해서 대략 적당하다 싶은 수준까지 정리했습니다.
(아직 밋밋하지만..)
묵은지 사례라..
지금이라면 로고넣고 파비콘 바꾸는 작업은 cursor에서 했을겁니다.
개인적으로 파비콘, OG image같은 것들 default로 들어가는거 싫어해서.. 저런 것부터 바꿉니다 ㅠ
그리고 github를 통해서 cursor로..
firestore db연결해서 문의글 받도록 수정하고,
구매페이지는 네이버 스마트스토어에 링크만 연결했습니다.
사업자가 있는데 통신판매 신고를 안해놔서 그거 하는데 시간이 좀 걸리더라고요 ㅠ
뭐 일단 구색은 갖췄습니다.
도메인 연결하는 것도 낯설진 않아서 firebase에 배포하면서 구매한 도메인도 연결했습니다.
custom domain연결도 몇번 해보면 어렵지 않습니다.
firebase에서 제공하는 기본 도메인도 뭔가 직접 만든 느낌을 주는거 같긴 하지만,
그래도 AI사용한거 안들키(?)려면.. 도메인을 연결해주는게 낫지 않나 싶어요 ㅎㅎㅎ
그리고 firebase 사용하면 왼쪽에 보이는 db(firestore), login(Authentication)도 어렵지 않게 사용할 수 있고,
analytics도 활용할 수 있으니 전 아직 처음은 여기가 좋습니다 ㅎㅎㅎ
이제 매출이 나오려면 뭔가 다른 작업을 해야겠는데..
이건 다음편에 계속..
결과와 배운 점
이걸로 부귀영화를 누릴 수는 없겠지만..
적당히 돌면서 수입원으로 자리잡게 하려고 생각 중입니다.
주문받는 등 반복적인 업무는 n8n 등 자동화를 통해 최대한 손이 덜가게 해보려고 생각 중입니다.
작업하면서 아이디어도 생기고 개발적으로 해보고 싶은 것도 보여서 사례글을 나눠서 작성해볼께요.
(프로젝트 다하고 쓰려면 길어서 쓰다 말거 같기도 합니다 ㅋㅋㅋ 그리고 drop할 가능성도 있으니 경험 공유 차원에서?)
도움 받은 글 (옵션)
분명 많은 글들을 읽고 영상도 보면서 도움을 받았을텐데..
GPTers의 수많은 글들이 도움이 되었습니다!
