인터랙티브 포트폴리오
Frontend / UI Engineer캔버스와 커스텀 커서를 활용해 인터랙션에 집중한 개인 포트폴리오
- App Router 구조 설계
- Canvas 기반 배경 인터랙션
- 다크 모드 우선 설계
Frontend · Interaction · UI Engineering
인터랙션에 강한
프론트엔드 개발자
코드보다 경험에 집중해, 화면 전환·마이크로 인터랙션·상태 변화를 설계하는
프론트엔드 개발자 2taeyoon 입니다.
Scroll to explore
인터랙티브 스킬 스택
아이콘 나열이 아닌, 실제로 어떻게 사용하는지에 집중한 기술 스택입니다.
Design Tools
Figma 기반 UI 시안 제작 및 컴포넌트 시스템 설계
- Figma
- Photoshop
- Illustrator
Frontend Stack
인터랙션과 상태 관리를 고려한 UI 중심 설계
- React
- Next.js
- TypeScript
- Zustand
- TanStack Query
Backend / BaaS
간단한 API 연동과 Supabase 기반 데이터 연동 경험
- Supabase
- REST API
Dev Tools
협업과 품질 관리를 위한 개발 환경 구성
- Git
- Vercel
- ESLint
- Prettier
경력 타임라인
퍼블리셔에서 인터랙션 중심 프론트엔드 개발자로 이어지는 흐름입니다.
- 2022
퍼블리셔로 시작
웹 퍼블리셔
디자인 시안을 픽셀 단위로 구현하며 마크업과 반응형 레이아웃을 다룸
- HTML
- CSS
- Vanilla JS
- 2023
프론트엔드 전향
Frontend Developer
React & Next.js 기반 프로젝트를 진행하며 상태 관리와 라우팅 구조에 집중
- React
- Next.js
- TypeScript
- 2024
인터랙션 중심 UI 설계
Frontend Developer
애니메이션과 마이크로 인터랙션을 활용해 사용 경험을 개선하는 데 집중
- Framer Motion
- Canvas
- Design System
프로젝트 하이라이트
무엇을 만들었는가보다, 어떻게 만들었는가에 집중한 프로젝트들입니다.
모니터링 대시보드 UI
Frontend Developer실시간 지표를 시각적으로 표현하는 대시보드 레이아웃 구현
- 카드 그리드 시스템
- 상태에 따른 강조 색상 설계
- 반응형 레이아웃
마이크로 UX 컴포넌트 킷
UI Engineer버튼, 토글, 토스트 등 마이크로 UX 컴포넌트를 정리한 라이브러리
- 상태 기반 애니메이션
- 토큰 기반 스타일링
- 접근성 고려 포커스 스타일
Interaction & Micro UX
말로 설명하지 않고, 직접 보여줄 수 있는 인터랙션 요소들입니다.
Pointer Interaction
Custom Cursor & Canvas
포인터 움직임에 따라 반응하는 커스텀 커서와 캔버스 배경
이 페이지 곳곳에서 직접 경험해 보실 수 있습니다.
Scroll Animation
Scroll-based Reveal
스크롤 진행에 따라 섹션이 부드럽게 등장하는 애니메이션
이 페이지 곳곳에서 직접 경험해 보실 수 있습니다.
Stateful UI
State-driven UI
상태에 따라 카드 레이아웃과 강조 요소가 변하는 인터랙션
이 페이지 곳곳에서 직접 경험해 보실 수 있습니다.
About & Background
편집디자인 기반의 시각 경험 위에, 프론트엔드 개발 역량을 쌓아왔습니다.
디자인에서 개발까지
레이아웃, 타이포그래피, 컬러 시스템을 이해하는 디자이너적 시선으로 UI를 바라봅니다. 이후 퍼블리싱과 프론트엔드 개발을 거치며, 디자인과 개발 사이의 간극을 줄이는 역할을 해왔습니다.
개발 성향
'눈에 보이는 경험'을 중심에 두고 상태 관리와 컴포넌트 구조를 설계합니다. 과한 효과보다는, 의도가 분명한 인터랙션과 자연스러운 플로우를 선호합니다.
Contact & Links
부담 없이, 필요하신 방식으로 연락 주세요.
연락처
- Emailtaeyoon.dev02@gmail.com
- GitHub@2taeyoon
추가 자료
- Notion프로젝트 정리 & 기록
- ResumePDF 이력서 다운로드