#individual #Claudecode #web | 🗓️ | 2026.04 | | ----- | ------------------------------------------------------------------------------------------ | | 유형 | 개인 프로젝트 (1인 기획·UX·개발 전담) | | 담당 | 서비스 기획 · UX 설계 · 개발 총괄 (API 선정·연동 포함) | | 도구 | Claude Code (바이브코딩) | | URL | https://priority-tau.vercel.app/ | | 기술 스택 | Next.js · React · TypeScript · Supabase · OpenAI API · Firecrawl | | 소개 | 유저의 우선순위 따라 연구 콘텐츠를 매일 수집하는 웹사이트. 콘텐츠를 읽는 것에 그치지 <br>않고 요약을 해서 기억을 강화하고 라이팅 실력까지 향상할 수 있다. | 로봇에 관심을 갖게 된 이후로 해외 여러 연구들을 보며 지식을 습득했고 흐름을 알 수 있었다. 하지만 매번 여러 사이트를 번갈아가면서 업데이트 된 내용을 보는 것은 번거롭기도 했고, 이 콘텐츠의 출처가 어디였는지 기억하기도 어려웠다. 이런 불편함을 해결하고자 매일 업데이트 되는 원하는 정보를 한 곳에서 볼 수 있는 웹사이트를 제작하고자 했다. 하지만 단순히 정보를 모으는 웹사이트가 아닌 습득한 정보를 내것으로 만드는 것 또한 중요했다. >[!tip] Purpose >사용자가 관심있는 분야의 정보를 매일마다 한곳에서 업데이트 받고 효율적으로 정보를 습득할 수 있다. 또한 콘텐츠를 단순히 한번 읽고 끝내기 보다 요약을 해봄으로써 그 정보를 온전히 내 것으로 만들 수 있다. ## Key features 1. **Collect Research**: Ver.1에서는 나의 관심분야인 로봇, 물리적 인터렉션 등 관심분야 카테고리를 위주로 수집하는 것을 목표로했다. 2. **Priority Setting**: 사용자는 수집하고 싶은 콘텐츠의 우선순위를 설정할 수 있다. 또한 이미 수집한 콘텐츠를 우선순위 별로 확인할 수 있다. 3. **Writing Practice**: 각 정보를 읽은 후 요약하기를 통해 내용을 되짚어 볼 수 있는 기능이 필요하다고 생각되었다. 4. **AI Review**: 내가 요약한 내용을 AI 리뷰를 통해 보완점에 대한 피드백을 받을 수 있다. 이를 통해 사용자는 읽는 것에서 그치지 않고, 쓰기 실력도 향상시킬 수 있다. 나는 이 사이트를 지식 습득과 더불어 영어능력을 향상하는데 이용해보기로 했다. 원문을 읽은 후 요약을 해봄으로써 새로운 문장 구조와 어휘를 사용해보기도 하고, AI리뷰를 통해 어떤 점이 개선되어야 하는지 피드백을 받음으로써 라이팅 공부까지 함께 할 수 있다. ## Planning #### 서비스 정의 **Priority**는 Physical AI 인터페이스 기술 분야(AI, HCI, HRI, Embodied Design, Mobility 등)의 논문·뉴스·기관 보고서를 자동 수집하고, 사용자의 토픽 관심도에 따라 개인화된 피드로 제공하는 콘텐츠 플랫폼이다. <br> #### 토픽 분류 체계 카테고리를 크게 세 가지로 분류했고, 그 안에 세부 토픽 별로 우선순위를 정할 수 있다. 우선순위에 따라 업데이트 되는 토픽의 비중이 달라진다. | 카테고리 | 토픽 | | -------------- | -------------------------------------- | | Foundation | AI + Data Science, Psychology | | Interaction | HCI, HRI, HAI | | Physical World | Embodied Design, Physical AI, Mobility | <br> #### 콘텐츠 소스 분류 자료들의 출처를 다음과 같이 분류하였고 그에 해당하는 출처를 나누었다. 그리고 1,3번의 비중을 더 많이 가져올 수 있게 요구하였다. >1. ==학술(논문, 학회, 저널)== >2. 미디어 (뉴스) >3. ==연구기관(기업, 대학, 국책 랩)== >4. 산업/기업(테크기업 블로그, 모빌리티, 특허) >5. 정책·펀딩 (Policy & Funding) | 소스 유형 | 예시 | | -------------------- | ------------------------------------------------- | | Academic | arXiv, Nature, IEEE, CHI Conference | | Media | MIT Technology Review, VentureBeat, IEEE Spectrum | | Research Institution | Google DeepMind, BAIR, MIT, Stanford HAI | | Industry | Google Research, Meta AI, Hugging Face | | Policy & Funding | EU AI Act, NIST, NSF, VC 리포트 | <br> ## UX 설계 - 사용자가 9개 토픽에 별점을 부여하면 피드 비율이 실시간으로 달라지는 **우선순위 기반 피드** 시스템 구상 - 콘텐츠를 읽고 요약을 직접 써보는 **Writing Practice** 기능으로 학습 루프 완성 #### Smart Feed  > 사용자가 설정한 토픽 평점(1–3점)을 기반으로 **비례 배분 알고리즘**이 피드 비율을 자동 계산한다. - 평점이 높은 토픽 → 더 많은 슬롯 배분 - 동점 토픽은 소수점 잔여분 우선 채우기 방식으로 공정하게 처리 - 토픽별 콘텐츠를 인터리빙(교차 배치)하여 다양성 보장 <br> #### Topic Priorities  > 사용자가 직접 토픽 우선순위를 정함으로써 피드를 구성할 수 있다. 토픽 별 별점에 따라 콘텐츠 구성이 바뀌고 정보를 수집할 때도 우선순위에 따라 토픽 비율을 다르게 수집한다. <br> #### Writing Practic | 단계 | 설명 | | ------ | -------------------------------------------- | | 1. 읽기 | 아티클 상세 페이지에서 원문 소비 | | 2. 쓰기 | 300자 이상 영어 요약문 직접 작성 | | 3. 제출 | AI 첨삭 요청 | | 4. 피드백 | OpenAI API가 문법·어휘·구조·명확성·스타일 항목별 피드백 + 점수 제공 | | 5. 저장 | AI 리뷰 완료 배지와 함께 My Writing에 저장 / 재작성 선택 가능 |  > 모든 콘텐츠 상세페이지에서 제공하는 기능으로, 읽은 글을 요약할 수 있다. 작성 후에는 바로 저장을 할 수도 있고 AI에게 리뷰를 받아볼 수도 있다. <br>  > 글을 작성한 후에 'Submit for Review'버튼을 클릭하면 작성한 글에 대한 점수 및 피드백을 받을 수 있다. <br> #### My Writing  > 저장한 글은 My Writing페이지에서 아카이빙 된다. ## 기술 스택 | 레이어 | 기술 | | --------- | ----------------------------------------------- | | Frontend | Next.js 16 (App Router) · React 19 · TypeScript | | 스타일 | Tailwind CSS 4 · Framer Motion 12 · Base UI | | Backend | Next.js API Routes | | DB / Auth | Supabase (PostgreSQL + SSR Auth) | | AI | OpenAI API (글쓰기 첨삭 및 점수화) | | 콘텐츠 수집 | Firecrawl · RSS Parser | | 배포 | Vercel | | API | 선택 이유 | | ------------ | --------------------------------- | | Firecrawl | 직접 Puppeteer 구현 대비 유지보수 비용↓, 안정성↑ | | Supabase SSR | 클라이언트 측 인증 토큰 노출 방지 | | OpenAI | 글쓰기 피드백의 품질과 일관성 최우선 | --- 이 프로젝트는 **기획자·디자이너·개발자 역할을 1인이 AI(Claude Code)와 협업하여 수행**한 바이브코딩 방식으로 제작하였다. 기획안을 보내고 디자인과 기능 개선이 몇 차례 계속 되었다. 어려웠던 점은 데이터를 불러오는 과정에서 콘텐츠를 제한적으로 가져오는 문제가 반복적으로 일어났었다. 결국 API 연결 방법을 다른 사이트에서 알아내서 그대로 적용해줄 것을 요청했고 다양한 출처로부터 콘텐츠를 불러올 수 있었다. 그래도 클로드코드를 처음 사용해서 웹사이트를 설계한 것에 의의를 두며 향후 더 다양한 토픽과 기능으로 발전 시킬 수 있을 것 같다.