제작 과정

2

Quollect, 수요 검증과 리드 확보를 위한 랜딩페이지 배포 🚀

"Quollect" 라는 이름의 독서 기록 앱을 만들고 있다. 디자인을 어느정도 마치고 이제 개발에 들어가려는데, 수요 재확인과 리드 확보를 위해 랜딩페이지를 만들었다. Quollect의 랜딩페이지 구경하기 독서 기록을 하려고 여러가지 앱을 사용해봤다. 무려 14개 🫨 근데 마음에 꼭 드는 앱이 없었다. 아래는 내가 14개의 앱을 비교평가 하기 위해 만든 분석표. 내가 원하는 건 딱 두 가지 인데, 쉽고 간편한 기록 적당한 통계 일단 기록이 있어야 통계도 보여줄 수 있다. 근데 사용해본 앱들 중 두 세 개 외에는 모두 문장 기록 뎁스가 너무 깊어서 불편했다. 책 읽는 흐름을 방해하지 않도록, 문장 기록은 최대한 간편해야한다. 통계도 없는 앱들이 많았다. 있더라도 디자인이 아쉬웠다. 독서를 하는 디자이너들도 많고 개발자들도 많을텐데.. 그리고 시중에 많은 앱들이 나와있는데 이렇게 마음에 드는 것이 없다니? 그래서 직접 만들기 시작했다. 기록과 통계에 집중하면서, 단순하고 사용성 좋은 앱을 만드는 것이 목표. 랜딩페이지, 수요의 검증과 리드 확보 보통 제품 아이디어는 머리속에 존재한다. 그리고 생각 해볼 땐 너무 좋은 아이디어라 굳이 수요 검증을 안해도 대박 날 것 같은 느낌이 든다. 나도 그런 생각에 먼저 디자인하고 개발구조를 어떻게 짤지 생각했다. 그러다가 나를 정신차리게 만든 하나의 Thread 포스트. 맞다. 살 사람이 없는데 제품을 만들면 뭐하나? 이승건 대표도 토스를 만들기 전에 여러번 실패하면서 계속 랜딩페이지로 수요 검증을 했다고 하니까. 사실 독서 기록 앱에 대한 수요 조사를 직접 하진 않았지만, 수요가 있다는 것을 확인하긴 했다. 어떤 개발자분이 독서 기록 앱을 만든다는 글에 엄청난 반응을 보고 굳이 내가 직접 하지 않아도 될것 같다는 생각을 했다. 그리고 14개의 앱을 사용해보면서 사람들이 남긴 앱 리뷰를 보면서도, 수요는 충분하다고 생각했다. 그럼에도 굳이 랜딩페이지를 만든 이유는 두 가지다 한 번 더 수요를 직접 확인하기 위함 리드를 확보하기 위함 제품을 잘 만드는 것도 중요하지만 고객에게 잘 닿는 것도 중요하다. 보통은 마케팅을 후순위로 생각하지만, 사실 마케팅은 제품 제작 전 단계에 이미 실행되어야한다. 시장에서의 어떤 포지션, 키워드를 선점할지 정하고, 그에 맞는 방향으로 제품을 개발해야하기 때문이다. Quollect의 랜딩페이지 구경하기 이것이 어제 하루 동안 만든 랜딩페이지다. Quollect를 시작하게 된 이유와 그려뒀던 화면들을 예쁘게 정리해 특징들을 나열. 랜딩페이지의 목적은 수요 확인과 리드 확보이므로 간단하게 노션과 Tally를 사용했다. 폭발적으로 빨리 늘고 있진 않지만 27분이 출시 알림을 신청해주셨다. 🔥 일단 개별 잠재 고객이 보여주는 반응은 너무 좋고, 리드가 폭발적으로 늘지 못하는 것은 도달율이 높지 않아서 그런 것 같다고 생각된다. 일단 제품 개발은 계속 해도 될것 같다는 생각. Quollect 인스타 계정 이렇게 모은 리드들, 반응을 보인 잠재 고객들을 팬으로 만드는 것이 중요하다. 앞으로 AI로 인해 제품간 퀄리티 차이가 줄어들면, 더 정이 가는 제품에 정착할 가능성이 높다. 그런 측면에서 제품 개발을 하면서도 고객들과 유대감을 쌓는 것이 중요하다. 인스타 계정에도 간단한 제품 컨셉 자료들을 올려두었고, 이제는 제작과정을 공유하면서 잠재 고객들과 소통하는 채널로 사용해 볼 예정이다. 이제 열심히 만들 일만 남았다 🔥

2025.02.08·2분 읽기·제작 과정

디자이너의 만다라트 제작기

디자이너가 만든 세상에서 가장 아름다운 만다라트는 기획부터 제작까지 이틀이 걸렸다. 혹시 모르시는 분들을 위해 제품 링크를 첨부한다. 디자이너의 만다라트 써보기 서버도 안쓰고 비교적 간단한 앱이지만 GPT를 사용해서(Cursor 아니고 GPT 4o) 얼마나 빠르게 제품을 만들 수 있을지 확인했던 아주 중요한 경험이다. 후기로 한 마디 하자면, 일단 본인이 프로덕트 디자이너인데 코딩 배우길 망설여 왔다면 이제는 꼭 코드의 기본을 배우고 AI 작성해주는 코드를 읽는 연습을하자. 정말 다른 세상이 펼쳐질 것이다. 제작 과정, 이제 시작한다. 총 8단계다. #1. 동료가 만다라트 얘길 꺼냄 1월 2일 목요일, 회사에서 동료들과 점심을 먹으며 신년 계획을 나누다 만다라트 얘기가 나왔다. 얘기는 많이 들었으나 작성해 본 적은 없어서 찾아보니 모두 투박한 템플릿들 뿐. 새해 나의 목표 중 하나가 "작은 제품 여럿 만들기"라서, 만다라트를 만들되 심미성과 사용성을 극대화해보자 생각함. #2. 디자인 시작 같은 날 저녁, 퇴근 후 디자인 시작. 만다라트 기본 구조에 파스텔 톤의 색을 입히고 필요한 기능들을 고려하며 빠르게 시안 잡음. 만다라트 그리드가 크기도 하고 계획은 주로 큰 화면으로 할 것 같아서 모바일은 제외. #3. GPT와 개발 시작 같은 날 밤, React + 개인 개발 템플릿으로 개발 시작. 간단한 것들, 템플릿에 수정이 필요한 것들은 직접 했지만 귀찮은 것들은 모두 GPT를 시켰다. 만다라트는 가운데 그리드 셀들이 바깥 그리드의 중앙 셀의 값들과 같은 값을 갖도록 로직을 짜야한다. GPT에게 시켰봤더니 가운데 그리드 셀들 데이터 안에 Nested 된 그리드가 있는 형식으로 구성해줬다. 근데 개발 복잡도만 올라가서 그냥 9개의 그리드 데이터를 단순하게 펼쳐 만들었다. (설명을 잘 한건지 모르겠지만 암튼 GPT 코드가 이 로직 짤 때 별로 도움되지 않았단 얘기 😂) 그러나 그 외에는 정말 많은 도움을 받았다. #4. Firebase로 호스팅 1월 3일 금요일 퇴근 후부터 토요일 저녁까지 생각했던 모든 기능을 개발했다. 사이드 프로젝트는 빨리 끝내지 않으면 마음의 짐이 되므로 속도가 생명. 그래서 익숙한 Firebase로 호스팅 했다. 데이터베이스도 안쓰기 때문에 비용 걱정은 없다 Firebase 프로젝트 생성하고 프로젝트 세팅해준 뒤 배포하면 끝. #5. 도메인 구입 토요일 밤, projact.kr 도메일을 가비아에서 구입. 프로젝트마다 도메인을 사는 대신 하나만 사고 subdomain을 활용해 다양한 프로젝트 도메인 비용을 아끼려고 했다. projact 오타난것 아니냐는 얘기를 종종 듣고 있는데, project 는 너무 비쌌고 project + act 를 합친거라고 생각하니 나쁘지 않았다. "프로젝트를 실행한다"는 의미로 읽히는 것 같아서 그렇게 의미 부여했다 😂 #6. Firebase & 도메인 연결 더 늦은 토요일 밤, Firebase에 mandalart.projact.kr 로 커스텀 도메인을 추가했다. Firebase에서 제공하는 DNS 정보를 가비아 내 도메인 DNS Record에 추가하면, Firebase로 호스팅 한 나의 프로젝트가 mandalart.projact.kr 에도 호스팅 된다. 원래 여기에서 끝나야 정상인데 SSL 인증서가 발급되지 않아 "위험한 사이트" 낙인이 찍혀있었다. Thread에 관련 글을 올렸다가 귀인이 나타나셔서 Cloudflare의 존재를 알려주셨고, 가비아 대신 Cloudflare로 DNS를 관리하도록 변경하니 밤 11시쯤, 인증서 문제가 해결되었다. (너무 감사드립니다 @back.chanhee 님 🙇🏻‍♂️) #7. 제품 출시 영상 제작 SSL 인증서 발급을 기다리며 출시 포스팅에 올릴 영상을 준비. 저작권 문제 없는 Youtube Audio Library에서 음악을 고르고 영상을 촬영 한 뒤, Premier Pro로 컷 편집해서 마무리 . #8. 제품 출시 포스팅 & 홍보 밤 늦은 시간이라 일요일 아침, Thread에 출시 포스팅. 제작 기간만 따지면 목요일 밤부터 토요일 밤까지 만 이틀만에 2025년 첫 제품인 "디자이너의 만다라트"가 완성되었다. 느낀점 직접 구현 시 드는 시간이 아까워 못했던 것들은
GPT와 하니 마구 해볼 수 있어서 새로운 개발 지식을 많이 배웠다. 모바일은 막아뒀다보니 일단 링크를 쉽게 저장할 수 있도록
카톡 공유 기능도 추가했는데 이것 또한 재미있는 배움이었다. 역시 새로운 것을 도전할 때 배움이 생긴다. 이번 해, 다양한 것들을 만들고 도전 하면서 또 많은 것들을 배울 수 있기를.

2025.01.30·3분 읽기·제작 과정