<div id="readability-page-1" class="page"><div><h2 id="notebrew-노트브루-프로젝트-후기">Notebrew (노트브루) 프로젝트 후기</h2>
<blockquote>
<p>노트브루(Notebrew)는 공부나 작업하기 좋은 카페를 지역 기반으로 검색할 수 있는 서비스입니다. 이 포스팅에서는 프로젝트를 진행하면서 고민했던 부분과 기술적인 선택들을 간단히 소개합니다.</p>
</blockquote>
<p><a href="https://notebrew.kr/app">노트브루(Notebrew) 서비스 열기</a></p>
<p><img src="https://velog.velcdn.com/images/tmmoond8/post/bad47b22-fe4b-474d-a7b3-0ac3ad880320/image.png"><br>
<img src="https://velog.velcdn.com/images/tmmoond8/post/253a88f6-4a43-4dfb-a76d-5fa77efac61e/image.png"></p>
<h2 id="프로젝트를-시작한-이유"><strong>프로젝트를 시작한 이유</strong></h2>
<p>저는 카페에서 작업하는 것을 좋아합니다. 대부분의 카페는 노트북을 켜놓고 작업하기에 무리가 없지만, 장시간 집중해야 할 때는 조금 더 환경이 좋은 곳을 찾게 됩니다. 이왕 가는 거라면, "공부하기 좋은" 조건을 갖춘 카페를 찾아가고 싶다는 생각이 이 프로젝트의 출발점이었습니다.</p>
<h2 id="기술-스택">기술 스택</h2>
<ul>
<li>Next.js 14 (Page Router)</li>
<li>TypeScript</li>
<li>Tailwind CSS</li>
<li>Zustand</li>
<li>React Query</li>
<li>NextUI (지금은 Heroui)</li>
<li>Naver Maps</li>
<li>Tiptap</li>
<li>Framer Motion</li>
</ul>
<p>Next 14버전을 쓰면서 아직은 App Router를 주력으로 사용하지는 않고 있습니다. 제 개인적인 견해로는, App Router로 개발할 때 중간중간 신경 쓸 부분이 있었습니다. 물론, 제가 익숙하지 않기 때문이기도 합니다. </p>
<p>Tiptab이라는 에디터를 처음 사용해 보았는데, 가볍고 좋은 느낌을 받았습니다. 리치 텍스트 에디터는 끝없이 새로운 방식이 나오네요.</p>
<h2 id="주요-기능-소개">주요 기능 소개</h2>
<ul>
<li>지하철 역 또는 지역 기반으로 카페 탐색</li>
<li>지도 기반으로 카페 탐색</li>
<li>네이버 장소 페이지로 카페 정보 조회</li>
<li>통합 검색 (역 또는 카페이름)</li>
<li>커뮤니티(게시판)</li>
</ul>
<h2 id="서버-구성--strapi-활용">서버 구성 : Strapi 활용</h2>
<p>복잡한 백엔드 구성 대신&nbsp;<a href="https://strapi.io/">Strapi</a>를 활용해 API를 구축했습니다. Strapi는 오픈소스 Headless CMS로, UI 기반의 관리 화면과 API 구성이 쉬워 빠르게 서비스 구조를 만들 수 있었습니다.</p>
<p>특히 카페 데이터를 쉽게 추가/수정하고 검색할 수 있어, 콘텐츠 기반 서비스와 잘 어울린다고 느꼈습니다. 요즘은 Supabase도 인기지만 DB에 초점이 맞춰져 있어서 추가적인 로직을 개발하는데에는 한계가 있는것 같았습니다. 저는 미니 PC 하나 구입해서 Strapi를 올려두고 직접 배포도 하고 관리하는데 편하게 잘 사용하고 있습니다.</p>
<h2 id="프로젝트-의사-결정">프로젝트 의사 결정</h2>
<h3 id="지역-정의-방식-시동가-아닌-역-기준">지역 정의 방식: '시/동'가 아닌 '역' 기준</h3>
<p>카페를 지역 단위로 묶기 위해 처음에는 시/동 기준을 고려했지만, 한국의 지하철 인프라를 생각했을 때,&nbsp;<strong>지하철역 중심으로 묶는 것이 사용자에게 더 직관적이고 친숙하다</strong>고 판단했습니다. 접근성도 좋고, 주변에 카페도 밀집해 있는 경우가 많기 때문입니다.</p>
<h3 id="국내-모든-지하철-정보">국내 모든 지하철 정보</h3>
<p>이를 위해 국내 모든 지하철역 정보를 위도/경도 기반으로 구성하여, 사용자 위치 혹은 검색 기준과 가까운 역을 탐색하는 기능을 구현했습니다.</p>
<h3 id="카페-기본-정보">카페 기본 정보</h3>
<p>사용자 누구나 로그인 후 카페 정보를 직접 등록하고 수정할 수 있도록 설계했습니다. 실수 없이 간단히 입력할 수 있도록 최소 입력 항목만 받도록 구성했습니다.</p>
<p>카페 상세 정보는 직접 UI를 구성하는 대신,&nbsp;<strong>네이버 장소 페이지를 활용</strong>했습니다. 이 방식은 신뢰성 있는 최신 정보를 유지하는 데 효과적이었고, 구현 측면에서도 효율적이었습니다.</p>
<p><img src="https://velog.velcdn.com/images/tmmoond8/post/869ad3d8-02fa-40f6-97b3-b5cf109c6b7c/image.png"></p>
<h2 id="소감">소감</h2>
<p>이 프로젝트는 오랫동안 머릿속에 떠돌던 아이디어를 2주라는 짧은 시간 안에 구체화해 완성한 결과물입니다. 첫 커밋은 4월 20일, 마지막 수정은 5월 4일로, 약 2주간 집중해서 개발했습니다. 기존에 작업했던 프로젝트 구조를 활용했기에 빠르게 만들 수 있었고, 짧지만 의미 있는 경험이었습니다.<br>
국내에 공부하기 좋은 카페를 등록해주세요. 더 자세한 카페 정보를 입력해주시는 것도 환영입니다.!</p>
<h2 id="tim">TIM</h2>
<p><img src="https://noticon-static.tammolo.com/dgggcrkxq/image/upload/v1746362742/noticon/mqm0b734nsnjh89y8wjq.png"></p>
<p>이 로고는 커피를 간략히 추상화 한 로고 입니다. 굉장히 간결한 형태이기 때문에 chat gpt에게 의뢰를 했습니다. 그런데 깔끔한 선이 있는 이미지로 만들지도 못하고, 제가 요청한 대로 이미지를 개선도 못해줬습니다.</p>
<p>저는 gpt pro를 쓰기 때문에 그래도 계속 명령하면 결과물이 나올 줄 알았는데, 그게 아니었습니다.<br>
이 로고는 keynote(맥의 파워포인트) 를 사용해서 만들었으며, 4시간 이상 쓴것 같으니 아마 가장 오랜 시간 소요한 작업이지 않을까 싶습니다.</p>
<p><img src="https://velog.velcdn.com/images/tmmoond8/post/0ecd2a08-a6d5-4cdb-9930-9b797a6d4d89/image.png"></p></div></div>

tmmoond8.log

Notebrew (노트브루) 프로젝트 후기
노트브루(Notebrew)는 공부나 작업하기 좋은 카페를 지역 기반으로 검색할 수 있는 서비스입니다. 이 포스팅에서는 프로젝트를 진행하면서 고민했던 부분과 기술적인 선택들을 간단히 소개합니다.
노트브루(Notebrew) 서비스 열기
프로젝트를 시작한 이유
저는 카페에서 작업하는 것을 좋아합니다. 대부분의 카페는 노트북을 켜놓고 작업하기에 무리가 없지만, 장시간 집중해야 할 때는 조금 더 환경이 좋은 곳을 찾게 됩니다. 이왕 가는 거라면, "공부하기 좋은" 조건을 갖춘 카페를 찾아가고 싶다는 생각이 이 프로젝트의 출발점이었습니다.
기술 스택
Next.js 14 (Page Router)
TypeScript
Tailwind CSS
Zustand
React Query
NextUI (지금은 Heroui)
Naver Maps
Tiptap
Framer Motion
Next 14버전을 쓰면서 아직은 App Router를 주력으로 사용하지는 않고 있습니다. 제 개인적인 견해로는, App Router로 개발할 때 중간중간 신경 쓸 부분이 있었습니다. 물론, 제가 익숙하지 않기 때문이기도 합니다. 
Tiptab이라는 에디터를 처음 사용해 보았는데, 가볍고 좋은 느낌을 받았습니다. 리치 텍스트 에디터는 끝없이 새로운 방식이 나오네요.
주요 기능 소개
지하철 역 또는 지역 기반으로 카페 탐색
지도 기반으로 카페 탐색
네이버 장소 페이지로 카페 정보 조회
통합 검색 (역 또는 카페이름)
커뮤니티(게시판)
서버 구성 : Strapi 활용
복잡한 백엔드 구성 대신 Strapi를 활용해 API를 구축했습니다. Strapi는 오픈소스 Headless CMS로, UI 기반의 관리 화면과 API 구성이 쉬워 빠르게 서비스 구조를 만들 수 있었습니다.
특히 카페 데이터를 쉽게 추가/수정하고 검색할 수 있어, 콘텐츠 기반 서비스와 잘 어울린다고 느꼈습니다. 요즘은 Supabase도 인기지만 DB에 초점이 맞춰져 있어서 추가적인 로직을 개발하는데에는 한계가 있는것 같았습니다. 저는 미니 PC 하나 구입해서 Strapi를 올려두고 직접 배포도 하고 관리하는데 편하게 잘 사용하고 있습니다.
프로젝트 의사 결정
지역 정의 방식: '시/동'가 아닌 '역' 기준
카페를 지역 단위로 묶기 위해 처음에는 시/동 기준을 고려했지만, 한국의 지하철 인프라를 생각했을 때, 지하철역 중심으로 묶는 것이 사용자에게 더 직관적이고 친숙하다고 판단했습니다. 접근성도 좋고, 주변에 카페도 밀집해 있는 경우가 많기 때문입니다.
국내 모든 지하철 정보
이를 위해 국내 모든 지하철역 정보를 위도/경도 기반으로 구성하여, 사용자 위치 혹은 검색 기준과 가까운 역을 탐색하는 기능을 구현했습니다.
카페 기본 정보
사용자 누구나 로그인 후 카페 정보를 직접 등록하고 수정할 수 있도록 설계했습니다. 실수 없이 간단히 입력할 수 있도록 최소 입력 항목만 받도록 구성했습니다.
카페 상세 정보는 직접 UI를 구성하는 대신, 네이버 장소 페이지를 활용했습니다. 이 방식은 신뢰성 있는 최신 정보를 유지하는 데 효과적이었고, 구현 측면에서도 효율적이었습니다.
소감
이 프로젝트는 오랫동안 머릿속에 떠돌던 아이디어를 2주라는 짧은 시간 안에 구체화해 완성한 결과물입니다. 첫 커밋은 4월 20일, 마지막 수정은 5월 4일로, 약 2주간 집중해서 개발했습니다. 기존에 작업했던 프로젝트 구조를 활용했기에 빠르게 만들 수 있었고, 짧지만 의미 있는 경험이었습니다.
 국내에 공부하기 좋은 카페를 등록해주세요. 더 자세한 카페 정보를 입력해주시는 것도 환영입니다.!
TIM
이 로고는 커피를 간략히 추상화 한 로고 입니다. 굉장히 간결한 형태이기 때문에 chat gpt에게 의뢰를 했습니다. 그런데 깔끔한 선이 있는 이미지로 만들지도 못하고, 제가 요청한 대로 이미지를 개선도 못해줬습니다.
저는 gpt pro를 쓰기 때문에 그래도 계속 명령하면 결과물이 나올 줄 알았는데, 그게 아니었습니다. 
 이 로고는 keynote(맥의 파워포인트) 를 사용해서 만들었으며, 4시간 이상 쓴것 같으니 아마 가장 오랜 시간 소요한 작업이지 않을까 싶습니다.

개인 프로젝트 후기 - 노트브루(Notebrew)

댓글