개인 프로젝트

포트폴리오

STYNA 쇼핑 프로젝트

상품 탐색부터 관리자 운영까지 구현한 패션 이커머스 프로젝트입니다.

2025.08–현재

프로젝트 유형

쇼핑몰

담당 범위

기획·디자인·프론트엔드·Firebase 구현

기술적 판단

정적 반복 페이지를 데이터·컴포넌트 기반으로 전환

• Next.js 15
• React 19
• TypeScript

포트폴리오

웹퍼블리셔 포트폴리오

다수의 반응형 클론과 여행·개인 사이트, 초기 미니 프로젝트를 묶은 웹퍼블리싱 포트폴리오입니다.

2022.01–02

프로젝트 유형

클론 코딩

담당 범위

웹 퍼블리싱

기술적 판단

반복되는 메뉴·콘텐츠 유형에 공통 마크업과 반응형 기준 적용

• HTML
• CSS
• JavaScript

포트폴리오

TravelFrame - 사진 가이드 앱

촬영 가이드 오버레이부터 편집·스튜디오·여행 클립까지 연결한 사진 가이드 앱입니다.

프로젝트 유형

프론트엔드

담당 범위

기획·디자인·앱 개발·관리자 구현

기술적 판단

촬영·편집·보관 흐름을 모바일 앱 안에서 연결

• Expo
• React Native
• Firebase

포트폴리오

이미지 압축 사이트 프로젝트

이미지를 서버로 전송하지 않고 브라우저에서 JPG·PNG·WebP로 압축하는 도구입니다.

프로젝트 유형

프론트엔드

담당 범위

기획·프론트엔드 개발·테스트

• JavaScript
• Browser API
• localStorage

포트폴리오

OpenClaw : 개인 업무 자동화

메일·캘린더·AI 뉴스와 노션 기록을 연결한 개인 업무 자동화 프로젝트입니다.

프로젝트 유형

기타

담당 범위

자동화 흐름 설계·구현

• OpenClaw
• Notion
• Automation

포트폴리오

인스타 클론코딩 (Nextjs)

Next.js의 병렬·인터셉팅 라우트와 서버 상태 관리를 학습한 인스타그램 클론입니다.

프로젝트 유형

클론 코딩

담당 범위

프론트엔드 개발

• Next.js
• TypeScript
• TanStack Query

포트폴리오

GPT API 활용

GPT 채팅과 Google Sheets 정규식 생성기를 제작하며 API 활용 흐름을 실험했습니다.

프로젝트 유형

프론트엔드

담당 범위

프론트엔드 개발

• HTML
• CSS
• JavaScript

포트폴리오

GSAP 작업물

GSAP 타임라인과 슬라이드 전환을 적용한 두 개의 원페이지 애니메이션 작업입니다.

2024.11

프로젝트 유형

퍼블리싱

담당 범위

웹 퍼블리싱·인터랙션 구현

• GSAP
• HTML
• CSS

포트폴리오

Mini Project

CSS 레이아웃과 바닐라 JavaScript 상호작용을 짧은 단위로 실험한 프로젝트입니다.

프로젝트 유형

퍼블리싱

담당 범위

웹 퍼블리싱·프론트엔드 개발

• HTML
• CSS
• JavaScript

포트폴리오

가벼운 프로젝트

메모·할 일·주사위·영화 리뷰처럼 한 가지 동작에 집중한 초기 웹 프로젝트 모음입니다.

프로젝트 유형

기타

담당 범위

웹 퍼블리싱·JavaScript 구현

• HTML
• CSS
• JavaScript

포트폴리오

스캐치북 · 친구들이 그려 주는 나

친구들이 가입 없이 그림을 남기고, 주인이 관리·선택한 그림을 공유 이미지로 저장하는 웹 서비스입니다.

2026.08–현재

프로젝트 유형

프론트엔드

담당 범위

기획·디자인·프론트엔드·서버 API·Firebase 구현

기술적 판단

가입 없는 그림 참여와 서버 권한 검증이 필요한 주인 관리 기능 분리

• Next.js
• React
• TypeScript