Projects

LET'S OOO

개요

운동 기록과 성장과정 트래킹을 빠르고 직관적으로 만들기 위해 제작한
인터랙션 중심 운동 기록 웹 애플리케이션입니다.

기록 / 조회 / 회고 흐름을 하나의 인터페이스 안에서 처리할 수 있도록 설계했으며,
반복 입력 피로를 줄이기 위해 키보드 기반 세트 입력 UX를 구현했습니다.

사용한 기술

• React
• Next.js
• TypeScript
• TailwindCSS
• Recharts

프로젝트 목적

운동을 꾸준히 하지 못하는 이유 중 하나는
기록 자체보다도, 자신의 운동 흐름과 변화를 체감하기 어렵다는 점이라고 생각했습니다.

이 프로젝트에서는
단순히 운동 데이터를 저장하는 것을 넘어,

• 언제 운동을 쉬었는지
• 어떤 부위 운동 주기가 길어졌는지
• 이전 운동 대비 수행량이 어떻게 달라졌는지

를 사용자가 자연스럽게 확인할 수 있도록 설계했습니다.

운동 기록 → 날짜 기반 탐색 → 운동 결과 회고 흐름을 하나의 인터페이스 안에서 연결하여, 기록 자체가 다시 운동을 이어가게 만드는 경험이 되도록 구현했습니다.

설계 포인트

• 운동 데이터를 날짜 기준으로 관리하기 위해
  캘린더 기반 기록 구조 설계
• 세트 입력 속도를 높이기 위해
  Enter / Tab 기반 키보드 인터랙션 UX 구현
• 마지막 reps 입력 시 다음 세트를 자동 생성하는
  상태 기반 입력 흐름 설계
• 운동 볼륨과 운동 시간을 직관적으로 확인할 수 있도록
  Recharts 기반 데이터 시각화 구현
• 모바일 / 데스크탑 환경에 따라
  다른 인터페이스를 제공하는 반응형 UX 설계
• 서버 없이도 기록 데이터를 유지할 수 있도록
  localStorage 기반 상태 영속화 구조 구현

구조를 선택한 이유

• 반복 입력 과정의 피로를 줄여
  운동 기록 흐름이 끊기지 않도록 하기 위해
• 날짜 기준 탐색 구조를 통해
  기록 조회와 회고 경험을 직관적으로 제공하기 위해
• 운동 데이터를 단순 저장이 아닌
  사용자 행동 분석 흐름으로 연결하기 위해
• 다양한 디바이스 환경에서도
  빠르게 기록 가능한 경험을 제공하기 위해

이 프로젝트를 통해 얻은 것

• 상태 기반 인터랙션 UI와 입력 흐름 설계 경험
• 데이터 구조와 UI 흐름을 함께 고려하는 경험
• 캘린더 기반 데이터 탐색 인터페이스 구현 경험
• 사용자 행동 흐름을 고려한 제품형 UI 설계 경험
• Recharts 기반 데이터 시각화 및 반응형 UI 구현 경험

프로젝트 완료를 위해 남은 과제

• 운동 기록 데이터 기반 분석 기능 확장
• 공통 컴포넌트 및 디자인 시스템 정리
• 서버 연동 및 사용자 계정 기능 추가
• 사용자간 공유 기능 추가
• 트레이너-회원 간 관리 기능 추가

Portfolio Project

개요

프로젝트 경험과 설계 의도를 사용자가 빠르게 탐색하고 이해할 수 있도록 제작한 인터랙션 중심 포트폴리오 웹 애플리케이션입니다.

단순 결과물 나열이 아닌, 프로젝트의 문제 해결 과정과 구조 설계 흐름을 콘텐츠 중심으로 전달하는 것을 목표로 설계했습니다.

사용한 기술

• React
• Components
• Next.js
• TypeScript
• TailwindCSS
• ThreeJS

프로젝트 목적

프로젝트 설명이 길어질수록 사용자의 집중력이 쉽게 끊기고, 콘텐츠 수정과 확장 또한 복잡해지는 문제를 개선하고자 했습니다.

이 프로젝트에서는 콘텐츠와 UI 구조를 분리하고, 인터랙션 기반 탐색 흐름을 설계하여 긴 프로젝트 내용도 부담 없이 탐색할 수 있는 경험을 만드는 것을 목표로 했습니다.

설계 포인트

• 프로젝트 콘텐츠를 코드와 분리하기 위해
  MDX 기반 콘텐츠 관리 구조 설계
• 프로젝트 추가 및 수정 시 영향 범위를 최소화하기 위해
  Type 기반 콘텐츠 매핑 구조 구현
• 긴 텍스트 콘텐츠에서도 집중 흐름이 끊기지 않도록
  인터랙션 기반 탐색 UI 구성
• Navigation / Section / Project Card 등 반복 구조를
  공통 컴포넌트로 추상화
• 공통 레이아웃과 페이지 콘텐츠를 분리하기 위해
  App Router 기반 Slot 구조 적용
• 시각적 집중 환기와 인터랙션 경험 강화를 위해
  Three.js 기반 애니메이션 UI 구현

구조를 선택한 이유

• 콘텐츠 수정과 프로젝트 확장을 코드 수정 없이 관리할 수 있도록 하기 위해
• UI 구조와 콘텐츠를 분리하여 유지보수성과 재사용성을 높이기 위해
• 긴 프로젝트 설명도 사용자가 흐름을 잃지 않고 탐색할 수 있도록 하기 위해
• 포트폴리오 자체를 단순 소개 페이지가 아닌 하나의 서비스처럼 설계하기 위해

이 프로젝트를 통해 얻은 것

• Next.js App Router 기반 레이아웃 및 콘텐츠 구조 설계 경험
• MDX 기반 콘텐츠 관리 및 확장 구조 설계 경험
• 상태 및 인터랙션 중심 UI 흐름 설계 경험
• 콘텐츠 중심 서비스에서 사용자 집중 흐름을 설계하는 경험
• 포트폴리오 자체를 제품 관점으로 바라보는 시각

프로젝트 완료를 위해 남은 과제

• 공통 디자인 시스템 및 컴포넌트 규칙 정리
• 프로젝트 카드 및 인터랙션 애니메이션 고도화
• 모바일 환경에서의 콘텐츠 탐색 UX 개선

TrashBag Map

개요

종량제봉투 판매소와 가격 정보를
현재 위치 기반으로 탐색할 수 있도록 만든 지도 기반 MVP 프로젝트입니다.

종량제봉투 품귀 상황에서
사용자가 가까운 판매소와 가격 정보를 빠르게 확인할 수 있도록
리스트 / 지도 / 가격 정보를 하나의 화면에 연결했습니다.

사용한 기술

• React
• Next.js
• TypeScript
• Kakao Map API
• Public API
• TailwindCSS

프로젝트 목적

종량제봉투를 구매하려는 사용자는
어디에서 판매하는지, 현재 위치에서 얼마나 가까운지,
용량별 가격이 얼마인지 한 번에 확인하기 어렵다는 문제가 있었습니다.

이 프로젝트에서는 공공 데이터를 기반으로
현재 위치 주변 판매소를 탐색하고,
판매소별 주소 / 전화번호 / 거리 / 가격 정보를 함께 확인할 수 있는
지도 기반 MVP를 구현했습니다.

설계 포인트

• 현재 위치 기준 판매소 탐색을 위해
  거리 기반 필터링 구조 구현
• 많은 판매소 데이터를 한 번에 렌더링하지 않기 위해
  IntersectionObserver 기반 무한 스크롤 적용
• 판매소 리스트와 지도를 연결하기 위해
  선택된 판매소 상태 기반 지도 마커 표시
• 지역별 가격 데이터를 판매소 리스트에 연결하기 위해
  시도 / 시군구 기준 priceMap 매칭 구조 설계
• 도로명 / 지번 주소를 상황에 따라 확인할 수 있도록
  주소 표시 전환 UI 구현
• 사용자 행동을 줄이기 위해
  주소 복사 기능과 거리 필터 UI 제공

구조를 선택한 이유

• 사용자가 판매소 정보를 찾는 과정에서
  거리 / 주소 / 가격 / 지도 위치를 따로 확인하지 않도록 하기 위해
• 리스트와 지도 상태를 연결해
  선택한 판매소의 위치를 즉시 확인할 수 있도록 하기 위해
• 공공 데이터의 지역 단위 가격 정보를
  판매소 리스트에 매칭해 실제 구매 판단에 필요한 정보를 제공하기 위해
• 데이터가 많은 상황에서도
  초기 렌더링 부담을 줄이고 탐색 흐름을 유지하기 위해

이 프로젝트를 통해 얻은 것

• 공공 데이터 기반 MVP를 빠르게 구현하는 경험
• 위치 기반 UI와 리스트 상태를 연결하는 경험
• 지도 API와 React 상태를 함께 다루는 경험
• 지역 / 가격 / 판매소 데이터를 매칭하는 데이터 가공 경험
• 데이터 품질과 서비스 실용성 사이의 한계를 판단하는 경험

프로젝트를 통해 확인한 한계

공공 데이터 기반 프로젝트는
기능 구현만으로 서비스 완성도를 보장하기 어렵다는 점을 확인했습니다.

특히 판매소 데이터와 가격 데이터의 최신성,
용량별 가격 정보의 누락 여부는 개발자가 직접 통제하기 어려운 영역이었고,
서비스의 실용성은 데이터 공급 구조에 크게 의존한다는 한계가 있었습니다.

따라서 이 프로젝트는 완성형 서비스보다는
실제 생활 문제를 발견하고,
공공 데이터를 활용해 빠르게 MVP를 검증한 프로젝트로 정리했습니다.

프로젝트 완료를 위해 남은 과제

• 데이터 최신성 검증 및 업데이트 주기 확인
• 판매소별 실제 재고 여부 확인 구조 추가
• 길찾기 링크 및 지도 UX 개선
• 모바일 환경에서 리스트 / 지도 전환 UX 개선

Todos Project

개요

클론할 소스 없이 백지 상태에서 직접 설계하고 구현하는 방식을 통해
React / Next.js 기반의 모던 프론트엔드 스택이 실제로 어떻게 동작하는지를 이해하고
라이브러리 사용법이 아닌 구조와 흐름 중심의 개발 감각을 체화하는 것을 목표로 진행한 프로젝트입니다.

사용한 기술

• React
• Custom Hook
• Components
• Next.js
• TypeScript
• TailwindCSS

프로젝트 목적

클론할 소스 없이 백지 상태에서 직접 설계하고 구현하는 방식을 통해
React / Next.js 기반의 모던 프론트엔드 스택이 실제로 어떻게 동작하는지를 이해하고
라이브러리 사용법이 아닌 구조와 흐름 중심의 개발 감각을 체화하는 것을 목표로 진행한 프로젝트입니다.

설계 포인트

• 비즈니스 로직과 UI 로직을 분리하기 위해
  Custom Hook(useTodos) 구조로 상태 관리 로직 분리
• 상태 변경 흐름을 명확히 하기 위해
  *Reducer + Selector 패턴 도입 (상태 변경과 UI 계산 로직을 분리)
• 새로고침 이후에도 상태를 유지할 수 있도록
  쿠키 기반 저장 방식 적용
• 조건부 클래스 조합의 가독성을 높이기 위해
  clsx를 활용한 스타일링 패턴 정리

구조를 선택한 이유

• 상태가 컴포넌트 전반에 흩어지는 것을 방지하여
  상태 파편화를 최소화
• UI 표현과 비즈니스 로직을 분리해
  유지보수성과 가독성 개선
• 이후 기능 추가(삭제, 무한 스크롤, UX 개선 등)를 고려한
  확장 가능한 구조 설계

이 프로젝트를 통해 얻은 것

• Next.js와 Vue.js의 공통점과 차이점, 설계방식을 체득하여
  새로운 프레임워크에서도 빠르게 구조를 이해하고 적응할 수 있게 됨
• React / Next.js의 컨벤션을 직접 적용하고 고민하는 과정을 통해
  새로운 개발 환경에서도 부담 없이 개발을 이어갈 수 있는 자신감과
  구조를 먼저 고민하는 개발 기준을 수립

프로젝트 완료를 위해 남은 과제

• UX coach mark를 통한 상태 설명 가이드 제공
• Todo 삭제 기능 추가
• 항목이 많아졌을 때를 고려한 Infinite Scroll 적용
• id 생성 방식 개선 (length 기반 → 고유값 전략)
• 모바일 중심 UI / UX 전면 개선
• Navigation에 적용한 입체적인 UI 스타일을
  버튼, 탭, 카드 등 공통 컴포넌트 전반으로 확장