//프로젝트
v1.2.0In Development2026-06-10 ~ PRESENT
집중이담
성인 ADHD 사용자의 실행·감정·소비·대화를 작은 행동 단위로 돕는 모바일 우선 자기관리 PWA
// Product Design Collaboration · Full-stack Development
FrontendFrontend
01 / 07
01
시작 화면
실행·감정·소비·대화를 10분 단위로 가볍게 관리한다는 서비스의 핵심 메시지와 진입 경로를 보여줍니다.
02 / 07
02
어려움 선택
사용자가 시작, 소비, 감정, 대화 중 자주 막히는 순간을 선택해 온보딩과 긴급 개입 위젯의 맥락을 설정합니다.
03 / 07
03
2주 목표
실행·소비·감정 영역에서 부담 없이 반복할 수 있는 작은 성공 기준을 먼저 제안합니다.
04 / 07
04
알림 안내
집중 시작, 결제 보류, 감정 리셋에 필요한 알림을 각각 선택하고 도움받을 시점을 직접 정합니다.
05 / 07
05
안전 고지
의료행위를 대체하지 않는 자기관리 도구의 범위와 민감정보 선택 수집·삭제 원칙을 안내합니다.
06 / 07
06
동의와 Kakao 로그인
서비스 이용에 필요한 정보와 선택적인 집중·감정 기록 활용 동의를 분리한 뒤 Kakao OAuth로 연결합니다.
07 / 07
07
온보딩 시작
작은 행동, 결제 보류, 감정 리셋의 2주 목표를 한눈에 확인하고 본격적인 사용을 시작합니다.
한눈에 보기
성인 ADHD 사용자의 실행·감정·소비·대화를 작은 행동 단위로 돕는 모바일 우선 자기관리 PWA
역할
Product Design Collaboration · Full-stack Development
범위
26개
//핵심 포인트7개
01
성장 버전 1.2.0: PWA·Google Play 출시 경험을 바탕으로 성인 ADHD 자기관리 제품을 개발하며 구조를 정제
02
작은 행동 설정부터 집중 타이머·중단 회복·완료까지 이어지는 실행 흐름
03
감정 리셋과 결제 전 숙고를 하나의 자기관리 경험에 연결
04
Kakao OAuth, Supabase SSR, RLS를 적용한 사용자 데이터 경계
05
브라우저 저장소와 서버 상태를 결합한 집중 세션 재진입·연장 복구
06
Google Stitch와 Figma의 화면을 토큰·공통 UI·Storybook 기반 디자인 시스템으로 구현
07
42개 테스트 파일의 155개 테스트와 프로덕션 빌드 통과
//기술 스택26개
//FRONTEND(6)
탭을 바꿔가며 역할과 설명을 한 범주씩 확인할 수 있습니다.
Next.js 15
도구(Utility)Next.js 15을(를) 프로젝트의 안정성과 구현 속도를 위해 활용했다.
React 19
도구(Utility)React 19을(를) 프로젝트의 안정성과 구현 속도를 위해 활용했다.
TypeScript
타입 안정성API 응답/컴포넌트 Props 계약을 타입으로 고정해 런타임 오류를 줄이고 협업 시 실수를 예방했다.
Tailwind CSS 3
도구(Utility)Tailwind CSS 3을(를) 프로젝트의 안정성과 구현 속도를 위해 활용했다.
Radix UI
도구(Utility)Radix UI을(를) 프로젝트의 안정성과 구현 속도를 위해 활용했다.
Lucide React
도구(Utility)Lucide React을(를) 프로젝트의 안정성과 구현 속도를 위해 활용했다.