첫 번째 서비스는 venus. react-router, dnd-kit 기반으로 만들었다. 1 컬럼 리스트 레이아웃으로 sortable하게 위젯의 순서를 변경할 수 있게 만들었다. 대시보드가 아닌 인-페이지 편집이며 모바일 레이아웃만 구현했다. 필수 기능은 모두 구현했지만 1 컬럼 리스트 레이아웃은 위젯이 쌓이면 편집이 어려웠다. 또한, react-router는 문서가 빈약해서 사용하기가 어려웠고 인증 라이브러리인 clerk도 프로덕션 환경에서 너무 무거웠다. 비슷한 문제를 겪는 사람들은 많았지만 뚜렷한 해결책이 없어서 사용하기 어렵다고 판단해 폐기했다
두 번째 서비스는 justsouknow. next.js, dnd-kit, better-auth 기반으로 만들었다. 이때까지는 1 컬럼 리스트 레이아웃이 크게 문제라고 생각하지 않았다. 그래서 이전 서비스와 동일하게 레이아웃을 만들었다. 막상 만들고나니 dnd-kit으로는 원하는 그림을 만들기에는 어렵고 만족스럽지가 않았다. 이때, 괜히 만든 것 같고 시간 낭비라는 생각에 의욕을 잃었다.
세 번째 서비스는 indiefans. bio sites라는 서비스를 우연이 접하고, 대시보드 레이아웃도 꽤 매력적일 수 있겠다고 생각하고 정말 마지막이라는 생각으로 dnd-kit으로 다시 시작했다. 그 동안 next.js를 사용하면서 개발 서버가 너무 느리고 무거웠기에 tanstack start로 변경했다. linktree 같은 대시보드 레이아웃 편집 기반이고 iframe으로 미리보기를 제공하도록 구성했다. 여전히 dnd-kit으로 1 컬럼 리스트 레이아웃이었고, 결과물은 이전 것들보다 좋았지만 스스로 만족이 안됐다. 이때부터 1 컬럼 리스트 레이아웃을 고집하면 도저히 안되겠다고 깨달았다.
네 번째 서비스는 utsuwa. tanstack start, react-grid-layout 기반으로 만들었다. 1 컬럼 레이아웃을 버리고 그리드 레이아웃을 채택해서 구현했다. 모바일과 PC에 따라 서로 다른 레이아웃을 제공했다. 생각했던 그림 그대로 구현은 완성했다. 하지만, AI 활용이 너무 미숙했다. 그저 만들어달라고만 계속 요청하고 승인하고를 반복하다보니 쓰레기 코드가 너무 많이 쌓였다. 더 이상 유지보수가 힘들 정도로 커졌고, 앱 속도도 너무 느려졌다. 코드베이스를 리팩토링하는 것 보다 새로 만드는게 더 빨랐다. 또한, react-grid-layout을 처음 접하다보니 제대로 구현을 못했던 탓 인걸까, 조작감과 편집감이 말도 안되게 별로였다. 느리고 버벅였다. 이때, 링크 인 바이오 서비스에 번아웃이 왔다.
다섯 번째 서비스는 harune. 링크 인 바이오 서비스에 대한 미련을 버리지 못했다. 분명 이제는 더 이상 쳐다도 안보겠다고 했지만, 완성을 하지 못했다는 생각이 나서 다시 만들기 시작했다. tanstack start는 베타였기에 아직 사용하기에는 무린가 싶어서 next.js로 다시 바꿨다. 이번 시도에는 Bento의 대체재로 등장한 많은 서비스들을 사용해봤다. 전부 사용성이 별로였다. 내가 만들어도 이것들 보다 잘 만들 수 있겠다고 생각했다. 찐막(진짜 마지막)이라고 생각하고 개발을 시작했다. react-grid-layout 라이브러리에 대해 분석할 필요가 있었다. 리드미만 보지 않고 레포지토리를 전체 fork해서 AI에게 분석을 시킨 뒤 내가 만든 요구사항에 맞게 구현을 요청했다.
다양한 위젯, 위젯 preset 변경, dynamic height 위젯 구현을 완성했다. 이전과 비교했을 때 가장 완성도 있는 작업물이었다. 하지만 겉보기에만 돌아갈 뿐 내부 코드는 너무나도 지저분했다. 위젯 분기 처리는 확장성이 없었고 if, switch문을 때려 박은 수준이었다. 스타일과 데이터 책임이 한 곳에 혼재해서 유지보수가 어려웠다. 여전히 AI 활용 역량이 부족했다. 나름 brainstorming과 설계를 통해 활용했지만 돌이켜보면 매우 빈약했다.
그래도 나름 얻어가는 것들은 있었다. route handler를 제거하고 hono로 완전 분리된 API 서버를 구축했고, 링크 메타데이터 추출을 위한 서버도 따로 만들어봤다. (물론 설계만 하고 구현은 AI에게 맡겼다. 여러 가지를 시도해봤고 사고의 확장에 의의)
결과적으로는 재구축했다.(내가 만들었지만 손이 잘 안가서 정작 몇 번 사용하지 않았다.)
마지막 서비스인 grabbin. 그 동안은 next.js가 느렸어도 그래도 친숙하고 손에 익었기 때문에 마지막으로 믿어보자! 하며 사용했지만 더 이상은 감당하고 싶지 않았다. next.js를 고집할 필요가 없다는 것을 깨닫고 유연하게 tanstack start로 변경했다.
이번엔 정말 찐찐막(진짜 진짜 마지막)
이전과 다르게 설계에 집중했다. 타 서비스들을 직접 사용해보고 분석하며 해자를 명확히 설정했다. 부가 기능은 모두 쳐내고 핵심 기능만 설계했다. 확장에 용이하고 유지 보수 비용이 낮은 구조에 대해 AI와 논의하며 설계하고, 태스크를 분해해서 하나씩 구현했다. 내가 생각한 그림에서 빼먹은 게 있을 수 있기 때문에 brainstorming을 적극 활용하고 ponytail, hono 등 best practice를 위한 스킬을 적극 활용해서 지저분하지 않은 코드를 만드려고 했다.
부드러운 사용성을 해자로 설정하고 핵심 기능 구현 외에는 해자를 달성하는 것에 온 시간을 쏟았다.
이전에 멀티레포로 API 서버를 분리해서 구축한 것은 약간의 불편함이 존재했다. 프론트와 백엔드 간 타입 공유가 너무 번거로웠다. 매번 OpenAPI 문서를 업데이트해야 하고 Orval로 클라이언트를 재생성해야한다. API 계약이 바뀌면 또 다시 반복해야 했다.
그래서 이번에는 모노레포로 구성했다. packages 로 타입을 공유하니 OpenAPI 문서 작성이 불필요해졌다. 하나의 코드베이스에서 바로바로 서로의 코드를 참고하면서 작업이 가능해져서 편해졌다.
앞으로 남은 것들은 기능 추가는 없고 당분간은 최적화 + 더 부드러운 조작감 + 프레임 드랍 방지 등을 할 것 같다. 위젯은 일부 서비스보다는 풍부하지 않지만 사용성은 내가 만든게 더 낫다. (해자도 명확히 달성했다. 보완은 필요)