#individual #Claudecode #Inprocess #web | 🗓️ | 2026.04 | | ----- | -------------------------------------------------------------------------------------- | | 유형 | 개인 프로젝트 (1인 기획·UX·개발 전담) | | 담당 | 서비스 기획 · UX 설계 · 개발 총괄 (API 선정·연동 포함) | | 도구 | Claude Code (바이브코딩) | | URL | https://priority-tau.vercel.app/ | | 기술 스택 | Next.js · React · TypeScript · Supabase · OpenAI API · Firecrawl | | 소개 | 유저의 우선순위 따라 연구 콘텐츠를 매일 수집하는 웹사이트. 콘텐츠를 읽는 것에<br>그치지 않고 요약을 해서 기억을 강화하는 4학습까지 연결할 수 있다. |  평소 해외 여러 연구들을 통해 HCI분야의 흐름과 여러 기술을 접하고 있다. 하지만 각 출처마다 중점적으로 다루는게 다르고 정보를 제공하는 곳이 많아서 매번 여러 사이트의 업데이트 된 내용을 확인하는 것이 비효율적으로 느껴졌다. 무엇보다 너무 많은 정보로 인해 내가 봤던 글의 출처가 어디였는지 기억하는데 어려움도 있다. 이런 일상의 불편함을 해결하고자 매일 업데이트 되는 정보를 한 곳에서 볼 수 있는 웹사이트를 제작하기로 했다. 하지만 단순히 정보를 모으는 웹사이트 이상으로 습득한 정보를 내것으로 만드는 것 또한 중요했다. <br> >[!tip] Purpose >사용자가 관심있는 분야의 정보를 매일마다 한곳에서 업데이트 받고 효율적으로 정보를 습득할 수 있다. 또한 콘텐츠를 단순히 한번 읽고 끝내기 보다 요약을 해봄으로써 그 정보를 온전히 내 것으로 만들 수 있다. <br> ## Key features 1. **Collect Research**: HCI, HAI 를 대분류로 연관된 관심분야 카테고리를 위주로 수집하는 것을 목표로했다. 2. **Priority Setting**: 사용자는 수집하고 싶은 콘텐츠의 우선순위를 설정할 수 있다. 또한 이미 수집한 콘텐츠를 우선순위 별로 확인할 수 있다. 3. **Writing Practice**: 각 정보를 읽은 후 요약하기를 통해 내용을 되짚어 볼 수 있는 기능이 필요하다고 생각되었다. 4. **AI Review**: 내가 요약한 내용을 AI 리뷰를 통해 보완점에 대한 피드백을 받을 수 있다. 이를 통해 사용자는 읽는 것에서 그치지 않고, 쓰기 실력도 향상시킬 수 있다. <br> ## Planning #### 서비스 정의 **Priority**는 HCI 분야의 논문·저널·기관 보고서를 자동 수집하고, 사용자의 토픽 관심도에 따라 개인화된 피드로 제공하는 콘텐츠 플랫폼이다. <br> ## 토픽 분류 체계 토픽을 어떻게 분류할 것인가는 프로젝트를 진행하며 큰 고민 중 하나였다. 하나의 카테고리로 분류되지 않고 하나의 논문이 여러 카테고리에 걸쳐있을 수 있기 때문이다. 그래서 가장 큰 개념의 HCI, HAI 를 상위로 두고 그 하위로 이론기반, 인터렉션, 엔지니어링, 디자인, 사람 간 상호작용, 사회·윤리적 측면으로 항목들을 분류하였다. **HCI, HAI research** - Theories, Methods &Foundation - Data analytics, cognitive physical, research methods etc. - Interaction techniques & modalities - Systems, Engineering & Devices - Design & Creativity - Social, Collaborative&Crowd Computing - Critical, Ethical&inclusive 또한, 물리적 인터페이스(HRI, 자율주행, 공간 등) 를 다루는 영역은 각 위에서 분류한 항목아래 포함시킬 수 있었지만 추후에 이 부분은 더 확장할 수 있을 여지가 있어 따로 분류하였다. - Embodied & physical agents. - Human-robots - Autonomous vehicles & mobility - Smart spaces & Ambient computing | HCI, HAI | Topic | | ------------------------------------- | -------------------------------------------------------------------------------------- | | Theories, Methods &Foundation | Data analytics, cognitive physical, <br>research methods etc. | | Interaction techniques & modalities | | | Systems, Engineering & Devices | | | Design & Creativity | | | Social, Collaborative&Crowd Computing | | | Critical, Ethical&inclusive | | | Embodied & physical agents. | Human-robots, <br>Autonomous vehicles & mobility, <br>Smart spaces & Ambient computing | <br> ## 콘텐츠 소스 분류 자료들의 출처를 다음과 같이 분류하였고 그에 해당하는 출처를 나누었다. 그리고 1,3번의 비중을 더 많이 가져올 수 있게 요구하였다. >1. ==학술(논문, 학회, 저널)== >2. 미디어 >3. ==연구기관(기업, 대학 랩)== >4. 산업/기업(테크기업 블로그, 모빌리티, 특허) >5. 정책·펀딩 | 소스 유형 | 출처 | | -------------------- | ------------------------------------------------- | | 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 리포트 | 각 대분류 별 출처를 2차 추가하였다. | 출처 | | --------------------------------------------------------------- | | CHI, UIST, IUI, DIS, HRI, ASSETS, TEI, IMWUT, CSCW, MobileHCI 등 | | FAccT, AIES | | NeurIPS, ICML, ICLR | | ACL, EMNLP (Human-AI 트랙) | | TOCHI 저널 | | IJHCS 저널 | | DIS, FAccT/AIES, ASSETS, IMWUT/TEI, CSCW | <br> ## UX 설계 - 사용자가 9개 토픽에 별점을 부여하면 피드 비율이 실시간으로 달라지는 **우선순위 기반 피드** 시스템 구상 - 콘텐츠를 읽고 요약을 직접 써보는 Writing Practice 기능으로 학습 루프 완성 #### Smart Feed  > 사용자가 설정한 토픽 평점(1–3점)을 기반으로 **비례 배분 알고리즘**이 피드 비율을 자동 계산한다. - 평점이 높은 토픽 → 더 많은 슬롯 배분 - 동점 토픽은 소수점 잔여분 우선 채우기 방식으로 공정하게 처리 - 토픽별 콘텐츠를 인터리빙(교차 배치)하여 다양성 보장 <br> #### Topic Priorities  > 사용자가 직접 토픽 우선순위를 별점으로 정함으로써 피드를 구성할 수 있다. 토픽 별 별점에 따라 콘텐츠 구성이 바뀌고 정보를 수집할 때도 우선순위에 따라 토픽 비율을 다르게 수집한다. > <br> #### Writing Practic | 단계 | 설명 | | ------ | ---------------------------------------------- | | 1. 읽기 | 아티클 상세 페이지에서 원문 소비 | | 2. 쓰기 | 300자 이상 영어 요약문 직접 작성 | | 3. 제출 | AI 첨삭 요청 | | 4. 피드백 | AI가 문법·어휘·구조·명확성·스타일 항목별 피드백 + 점수 제공(optional) | | 5. 저장 | AI 리뷰 완료 배지와 함께 My Writing에 저장 / 재작성 선택 가능 |  > 모든 콘텐츠 상세페이지에서 제공하는 기능으로, 읽은 글을 요약할 수 있다. 작성 후에는 바로 저장을 할 수도 있고 AI에게 리뷰를 받아볼 수도 있다. > Writing practice의 사용 목적은 두 가지로 분류할 수 있다. > 1. 원문을 나만의 글로 다시 요약하고 My writing에 모으는 역할. > 2. 글의 구조, 어휘 등 글쓰기 능력을 향상시키는 역할. > 1. 이 기능은 영어 독해와 쓰기 능력 향상에도 도움이 될 수 있다. <br>  > 글을 작성한 후에 'Submit for Review'버튼을 클릭하면 작성한 글에 대한 점수 및 피드백을 받을 수 있다. 점수 여부는 설정에서 선택 할 수 있으며 필수조건이 아니다. > 1. 글을 쓰는 목적에 따라 점수에 대한 니즈가 나뉠 것 같아서 해당 기능은 설정에서 선택할 수 있다. > >글을 작성한 후 "Save"를 클릭하면 My writing에 아카이빙 된다. <br> #### 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 | --- 이 프로젝트는 피그마를 사용하지 않고 처음으로 클로드 코드를 사용하여 제작해본 프로젝트이다. 기획은 처음 큰 흐름을 잡고 제작까지 해 본 후 사용을 해보면서 보완할 부분을 바로바로 수정했다. 처음 데이터를 불러오고 보여주는 방식에서 시간을 많이 할애했다.(초반에는 클로드가 RSS API만을 연결하여서 출처가 다양하지 않았고 각 페이퍼의 상세 내용을 일부만 보여주어 외부 URL로 이동되게 작업했었다.) 클로드 코드 이전에 Lovable로 유사한 프로젝트를 제작했었는데 그때 콘텐츠의 다양성은 더 좋았다고 생각했기에 웹 스크래핑 방식으로 중간에 변경하였다. 사용해보면서 자잘한 버그들과 개선점이 있었고 정보 출처와 우선순위 토픽 분류도 수정하였다. 그리고 Writing practice의 목적은 한번 읽은 글에 대해 기억을 강화하는 역할인데 그 이후에 아카이빙 된 나의 글을 또 다른 용도로 활용해볼 수 있을 것 같다. 앞으로 계속 사용을 해보면서 개선해볼 예정이다. 기획부터 개발까지 모든 프로세스를 경험한 결과, UI는 레퍼런스의 코드를 던지고 적용할 것을 요청하였는데, 레퍼런스가 있다면 원하는 방향대로 제작이 되는 것 같다. 하지만 개발 방식이나 사용적 측면으로는 가이드가 명확하지 않다면 몇 번을 우회해야하고 기획에서 설계가 미약한 부분이 있더라도 그 부분에 대해서 적극적으로 의견을 제시하지는 않는다. 결국, 제작자가 전문 분야 뿐 아니라 다방면으로 지식이 있을 수록 잘 사용될 수 있겠다는 생각이 든다. 앞으로 많은 사람들이 직접 바이크 코딩을 해보면서 다른 분야를 더 깊이 이해를 할 수 있고, 지식이 향상되어 건설적인 의사소통 또한 가능하지 않을까 하고 생각한다.