Next.js
Framework
생각의 깊이가
디테일을 만든다고 믿습니다.
작은 인터랙션 하나에도
이유가 있다고 생각합니다.
생각의 깊이가 디테일을 만든다고 믿습니다.
작은 인터랙션에도 이유가 있다고 생각합니다.
I AM
INTERACTIVEFE DEVELOPER
1. 나의 취미
3. 학과 실습 경험
5. 그림 그리기
7. 직접 명함 제작
9. 교내 다양한 특강 참여
1. 나의 취미
3. 학과 실습 경험
5. 그림 그리기
7. 직접 명함 제작
9. 교내 다양한 특강 참여
1. 나의 취미
3. 학과 실습 경험
5. 그림 그리기
7. 직접 명함 제작
9. 교내 다양한 특강 참여
1. 나의 취미
3. 학과 실습 경험
5. 그림 그리기
7. 직접 명함 제작
9. 교내 다양한 특강 참여
1. 나의 취미
3. 학과 실습 경험
5. 그림 그리기
7. 직접 명함 제작
9. 교내 다양한 특강 참여
1. 나의 취미
3. 학과 실습 경험
5. 그림 그리기
7. 직접 명함 제작
9. 교내 다양한 특강 참여
1. 나의 취미
3. 학과 실습 경험
5. 그림 그리기
7. 직접 명함 제작
9. 교내 다양한 특강 참여
1. 나의 취미
3. 학과 실습 경험
5. 그림 그리기
7. 직접 명함 제작
9. 교내 다양한 특강 참여
2. 방학 공부 루틴
4. 뉴로우 기업 상
6. 다양한 컨퍼런스 참여
8. 교내 다양한 동아리 참여
10. 행사 스태프로 참여한 경험
2. 방학 공부 루틴
4. 뉴로우 기업 상
6. 다양한 컨퍼런스 참여
8. 교내 다양한 동아리 참여
10. 행사 스태프로 참여한 경험
2. 방학 공부 루틴
4. 뉴로우 기업 상
6. 다양한 컨퍼런스 참여
8. 교내 다양한 동아리 참여
10. 행사 스태프로 참여한 경험
2. 방학 공부 루틴
4. 뉴로우 기업 상
6. 다양한 컨퍼런스 참여
8. 교내 다양한 동아리 참여
10. 행사 스태프로 참여한 경험
2. 방학 공부 루틴
4. 뉴로우 기업 상
6. 다양한 컨퍼런스 참여
8. 교내 다양한 동아리 참여
10. 행사 스태프로 참여한 경험
2. 방학 공부 루틴
4. 뉴로우 기업 상
6. 다양한 컨퍼런스 참여
8. 교내 다양한 동아리 참여
10. 행사 스태프로 참여한 경험
2. 방학 공부 루틴
4. 뉴로우 기업 상
6. 다양한 컨퍼런스 참여
8. 교내 다양한 동아리 참여
10. 행사 스태프로 참여한 경험
2. 방학 공부 루틴
4. 뉴로우 기업 상
6. 다양한 컨퍼런스 참여
8. 교내 다양한 동아리 참여
10. 행사 스태프로 참여한 경험
CAPABILITY
Flow. Structure. Motion.
경험을 설계하는 방식.
저는 단순히 화면을 구현하는 것보다, 사용자가 어떤 흐름으로 이해하고 행동하는지를 더 중요하게 바라봅니다. 그래서 인터페이스, 인터랙션, 상태 흐름, 그리고 구조까지도 하나의 연결된 경험처럼 설계하려고 합니다.
망설임은 적게
흐름은 조금 더 자연스럽게
좋은 경험은 흐름을 의식하지 않게 만듭니다. 사용자는 기능을 하나씩 읽기보다, 흐름 안에서 자연스럽게 이해하고 행동한다고 생각합니다. 설명을 늘리는 것보다, 망설임 없이 이어질 수 있는 구조를 더 중요하게 바라봅니다.
01
흐름을 먼저 보는 시선
화면을 구성할 때 사용자가 어떤 순서로 정보를 받아들이는지 먼저 살핍니다. 섹션과 요소가 자연스럽게 이어져, 다음 흐름을 어렵지 않게 따라갈 수 있도록 설계합니다.
02
이유 있는 인터랙션
작은 움직임도 단순한 장식이 아니라 사용자의 이해를 돕는 역할을 해야 한다고 생각합니다. 시선의 이동, 상태 변화, 등장 타이밍에 이유를 두고 인터랙션을 조정합니다.
03
시선을 안내하는 캐릭터
캐릭터를 단순한 장식이 아닌 화면의 시선 기준점으로 두었습니다. 장면의 맥락에 맞춰 등장하고 사라지며, 사용자가 다음 흐름을 자연스럽게 따라가도록 안내합니다.
04
무너지지 않는 구조
완성된 화면뿐 아니라 이후 수정과 확장까지 고려해 구조를 나눕니다. 컴포넌트, 데이터, 애니메이션 로직의 역할을 분리해 안정적으로 유지되는 화면을 만들고자 합니다.
저는 인터페이스를 단순한 화면 구성으로 보지 않고,
하나의 흐름 안에서 자연스럽게 이어지는 경험을 만들고 싶었습니다.
Structure
복잡함은 줄이고,
흐름은 더 자연스럽게.
혼자만 이해할 수 있는 구조보다, 함께 유지하고 개선할 수 있는 구조를 더 중요하게 생각합니다. 복잡한 문제일수록 누구나 흐름을 이해할 수 있도록, 읽기 쉬운 구조 역시 좋은 경험의 일부라고 생각합니다. 화면 밖의 구조가 단단할수록, 화면 안의 흐름도 더 자연스러워진다고 믿습니다.
React Architecture
readable flow
복잡한 상태와 흐름도 누구나 읽을 수 있도록 컴포넌트의 역할과 책임을 명확하게 분리해서 설계합니다.
Shared Components
reusable structure
중복되는 경험보다 일관된 경험을 더 중요하게 생각합니다. 재사용 가능한 구조를 통해 변화에도 유연하게 대응합니다.
Role-based System
역할 기반 흐름
같은 시스템 안에서도 사용자의 목적과 흐름은 서로 다릅니다. 각 역할에 맞는 경험이 자연스럽게 이어지도록 구조를 분리합니다.
API & Data Flow
DTO ↔ UI separation
데이터의 복잡함을 사용자 경험까지 가져가지 않습니다. 내부에서 정보를 정리하고 UI는 더 직관적으로 흐르도록 설계합니다.
Motion System
trigger ownership
움직임은 시선을 끌기보다 흐름을 이어주는 역할이어야 한다고 생각합니다. 각 인터랙션은 자신의 흐름 안에서 동작합니다.
Styling Structure
naming consistency
스타일 역시 읽기 쉬운 구조의 일부라고 생각합니다. 일관된 규칙과 네이밍을 통해 유지보수 가능한 흐름을 만들어갑니다.
AI
AI와 함께
더 깊게.
저는 AI를 단순한 자동화 도구가 아니라, 더 깊게 탐구하고 빠르게 실험하기 위해 활용합니다. 구조를 비교하고, 흐름을 탐색하고, 더 나은 경험을 계속 고민합니다.
질문하고 비교하는 사고 방식
Comparative Reasoning
답을 받아들이기보다, 더 나은 방향을 계속 비교합니다.
같은 인터랙션이라도 왜 어색하게 느껴지는지, 왜 흐름이 끊기는지, 왜 구조가 복잡해지는지를 계속 질문합니다.
다양한 레퍼런스와 도구를 연결하며 탐색하는 방식
Expanded Exploration
하나의 도구보다, 더 넓은 탐색 과정을 중요하게 생각합니다.
다양한 레퍼런스를 직접 탐색하고, 여러 AI 도구를 함께 활용하며, 구조와 흐름을 다각도로 비교합니다.
결과보다 이해와 내재화를 중요하게 보는 태도
Understanding Over Answers
답보다, 이해를 더 중요하게.
단순히 동작하는 결과를 만드는 것보다 왜 이런 흐름이 필요한지, 왜 이런 구조가 만들어졌는지를 끝까지 이해하려고 합니다.
BEYOND
인터페이스 너머의
감각까지.
저는 단순히 기능을 배치하기보다, 사용자가 화면을 어떻게 느끼게 될지까지 함께 고민합니다. 구성과 움직임, 그리고 분위기까지 경험의 인상 역시 중요한 요소라고 생각합니다.
서비스의 분위기에 맞는 캐릭터와 비주얼 톤까지 직접 설계합니다.
하나의 흐름으로 경험되도록 구현합니다.
텍스트의 크기, 간격, 밀도를 조정해 화면의 리듬까지 설계합니다.
GSAP 기반의 스크롤 전환으로 장면의 속도와 흐름까지 조율합니다.
NAVIGATOR
생각을 지나
프로젝트의 형태로.
제가 중요하게 생각해온 구조, 흐름, 인터랙션의 기준은 프로젝트를 만드는 과정 속에서 더 분명해졌습니다. 각 프로젝트는 단순한 결과물이 아니라, 제가 어떤 방식으로 문제를 바라보고 구현해왔는지를 보여주는 기록입니다.
CLOSING
함께,
더 좋은 경험을
만들고 싶습니다.
흐름을 설계하고,
구조를 정리하고,
움직임에 이유를 담으면서.
사용자가 자연스럽게
몰입할 수 있는 경험을
함께 만들어가고 싶습니다.
SCROLL TO CONNECT
CONNECT
CONTACT ME
좋은 경험을 함께 만들 준비가 되어 있습니다.작은 제안이나 질문도 편하게 남겨주세요.