잘 오셨습니다 너드 여러분.
저도 개발덕후 답게 이 기록을 통해서 일기 쓰듯 개발 어떻게 했는지 정리해보려 해요.
기획
8월이 되면서 슬슬 샤인 머스켓 페이지 (이하 샤머)를 시작해야겠다고 생각했는데 막상 하려니 아이디어가 안 떠오르더라고요.
작년을 돌아보면 인기가 꽤 좋았던게 아래 인스타 포스팅이었습니다.
올해도 작년과 같은 병맛 + 쌈마이 + (잘 쳐줘서) 키치한 감성으로 가면 좋겠다고 생각했습니다.
디자인
키치 한 거를 어떻게 따라 가지? 생각보다 어려웠습니다.
창작의 고통…
옆에서 고통 받고 있자 아이디어 뱅크인 여자친구가 저를 프롬프트 엔지니어링 했습니다.
“홈 화면에서는 키치하고 병맛인데, 내부는 ㅈㄴ 프로페셔널하고 경험 좋은 페이지로 해봐”
넹 알겠습니다.
그래서 레퍼런스로 삼았던게 뉴진스 홈이었어요. 파워퍼프걸st.
내가 아는 미디어에서 키치한 감성을 가장 잘 잡은 거 같았어요. 그래서 그냥 거의 따라 갔습니다.
(뉴진스 해린같은 딸래미 있으면 좋겠다.)
키치한 감성을 살리기 위해서 나는 그냥 아이콘들을 아이패드 꺼내서 그렸어요.
{{아이패드 사진}}
그래도 좀 모자란 거 같아서 약간 싸이월드 감성, 2000년대 미니홈피, 버디버디 감성? 을 살리기 위해 BGM도 넣었어요.
이거 누르면 노래 나옴
나머지 페이지는 그냥 내가 봤을 때 경험이 좋았던 쿠팡, 배민 등등을 짬뽕했어요.
하다보니 모바일이 좀 더 예쁜거 같아서 모바일 퍼스트로 되어버렸어요.
개발
제일 먼저 생각했던 건 진짜 ‘빨리 만들고 손이 최대한 덜 갔으면 좋겠다’ 라는 걸 만족했으면 좋겠었어요.
아직도 못 고치는 게 새로운 기술 막 써보다가 거기에 빠져서 생각보다 일정이 늦어지는 그럼 참사를 막기위해 (이번에도 근데 사실 좀 그랬던거 같긴해…) 최대한 스택을 가볍게 가져가려 했습니다.
그래서 극단적으로 줄여서 프론트”만” 있는 형태로 개발했어요.
Ticket Management
사이드하면서 사용하는 Linear로 생각날 때마다 할 거 올려놓기
기존 릴리즈 일정 대비 일주일 밀린건 안 비밀.
UI
Next.js + Typescript
Next.js 많이 바꼈더군요… (5년전) App router 처음 써봤는데 고생 좀 했습니다.
Next.js 13.4
Next.js 13.4 moves App Router to stable, Turbopack to beta, and introduces experimental support for Server Actions.
https://nextjs.org/blog/next-13-4
올해 5월에 나왔군요… (흥미롭)
그래도 쓰버릇하니깐 Pages router 보다 나은 거 같기도?
Tailwind CSS
원래 자주 써서 매우 익숙.
Styled component / Emotion? 사치였습니다. 재사용성 필요없어.
Backend
Supabase
백엔드 + DB + Auth 다 하나로 해결!
진짜 이번 개발하면서 가장 재밌게 썼던 SaaS.
1.
Postgres DB를 무료로, 내 맘대로 써먹을 수 있다.
2.
로그인, 로그아웃, 회원가입 코드 거의 안짜고도 가능하게 만들어줌
3.
DB랑 테이블들만 만들면 url로 못하는 게 없음
Toss payment
드디어 토스 페이먼츠 붙혔다.
별거 안하고 위젯만 붙히고 key들만 연결하면 바로 테스트 가능!
개발 상에서는 한거 별로 없는데 이건 현실에서 심사 받고 뭐 제출하고 이런게 더 많았어요.
덕분에 삼촌을 많이 괴롭힘 이거 해달라 저거 해달라… 후…
배포
Vercel로 30초면 바로 배포!
진짜 이건 넘나 편했음. Next.js만 있으면 되서 레포 나눌 필요도 없고 뭐 그냥 바로바로 배포
분석
Retool로 뚝딱
초안임. 나중에 보면 굉장히 별로 겠지? 미래의 나야 힘내
이 때도 supabase가 빛을 발했다.
Postgres DB랑 연결이 아니라 그냥 supabase rest api로 조인 같은 걸 다 걸 수 있더라고요.
거의 graphql임. 아무것도 안짜도 되고 db 테이블이랑 relation만 걸어주면 바로 이용가능.
따로 코드 안짜고 그냥 원하는 분석 쿼리 restapi call이랑 javascript로 짤 수 있었습니다.
근데 저는 db가 더 익숙해서 이게 더 오래 걸린 듯… join + window면 두렵지 않은데… 오랜만에 짜는 javascript map, reduce는 왜 이리 복잡한지…
마치며
오랜만에 재밌게 개발했습니다. 프론트는 언제나 한번 시작하면 진짜 못 멈추네요. 계속 손이가요 손이가.
효도(? 됐나?)도 하고 목 말랐던 개발도 하고 일석이조였지만 생각보다 오래걸리고 고민도 꽤 많이 했습니다. 많이들 사주시길…