디자이너가 만든
세상에서 가장 아름다운 만다라트는 기획부터 제작까지 이틀이 걸렸다.
혹시 모르시는 분들을 위해 제품 링크를 첨부한다.
서버도 안쓰고 비교적 간단한 앱이지만 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와 하니 마구 해볼 수 있어서 새로운 개발 지식을 많이 배웠다. 모바일은 막아뒀다보니 일단 링크를 쉽게 저장할 수 있도록 카톡 공유 기능도 추가했는데 이것 또한 재미있는 배움이었다.
역시 새로운 것을 도전할 때 배움이 생긴다.
이번 해, 다양한 것들을 만들고 도전 하면서 또 많은 것들을 배울 수 있기를.