01
흐름을 먼저 읽는 화면
무엇을 보여줄지보다 무엇을 먼저 이해해야 하는지부터 정리합니다. 정보의 우선순위를 기준으로 섹션과 요소의 순서를 잡아, 시선과 행동이 끊기지 않도록 구성합니다.
디자인과 엔지니어링 사이를 오갑니다.
서비스의 시각적 언어를 설계하고,
그 의도를 코드 구조와 성능까지
고려해 구현합니다.
디자인과 엔지니어링 사이를 오갑니다.
서비스의 시각적 언어를 설계하고,
그 의도를 코드 구조와 성능까지 고려해 구현합니다.
I AMCREATIVEFE DEVELOPER
1. 나의 취미
3. 학과 실습 경험
5. 그림 그리기
7. 직접 명함 제작
9. 교내 다양한 특강 참여
2. 방학 공부 루틴
4. 뉴로우 기업 상
6. 다양한 컨퍼런스 참여
8. 교내 다양한 동아리 참여
10. 행사 스태프로 참여한 경험
HOW I BUILD
Intent. Structure. Detail.
경험을 설계하는 방식.
디자인의 의도와 사용자 흐름을 코드로 옮기고, 상태와 컴포넌트 구조까지 함께 설계합니다.
보이는 경험과 내부 구조가 따로 놀지 않도록 구현합니다.
망설임은 적게
흐름은 조금 더 자연스럽게
디테일은 많이 넣기보다 필요한 곳에 정확히 둡니다.
정보의 위계와 상태 변화를 명확히 하고, 필요한 피드백은 남기되
불필요한 선택은 덜어 다음 행동이 자연스럽게 이어지는 경험을 만듭니다.
02
필요한 순간의 인터랙션
움직임은 눈에 띄기 위해서보다 변화의 이유를 전달하기 위해 사용합니다. 상태 전환과 등장 타이밍에 맥락을 두고, 필요한 순간에만 인터랙션을 더합니다.
03
표현을 지탱하는 성능
시각적 완성도를 위해 성능을 희생하지 않습니다. 이미지 로딩 우선순위와 렌더링 비용을 함께 살피며, 풍부한 표현이 실제 사용 경험을 방해하지 않도록 조정합니다.
04
확장을 견디는 구조
화면이 복잡해져도 수정 범위가 불필요하게 번지지 않도록 책임을 나눕니다. 컴포넌트와 데이터, 애니메이션 로직을 분리해 변화에 대응할 수 있는 구조를 만듭니다.
보이는 경험과 내부의 구현이 자연스럽게 맞물리고,
구조와 동작까지 같은 방향으로 이어져야 한다고 생각합니다.
Structure
복잡함은 줄이고,
변화는 예측 가능하게.
복잡한 화면일수록 역할과 책임을 분리하고, 데이터와 상태, 동작의 흐름이 서로 얽히지 않도록 구조를 나눕니다. 기능이 추가되거나 바뀌어도 수정 범위를 예측할 수 있고, 코드의 흐름을 쉽게 따라갈 수 있도록 설계합니다.
Component Architecture
clear responsibility
화면이 복잡해져도 책임이 섞이지 않도록 컴포넌트의 역할과 경계를 나눕니다. 상태와 동작의 흐름을 따라가며 변경 범위를 예측할 수 있도록 설계합니다.
Shared Components
shared boundaries
반복되는 UI와 동작은 공통화하되, 재사용을 위한 과한 추상화는 피합니다. 여러 화면에서 같은 기준으로 사용할 수 있는 범위까지만 공유합니다.
Role-based System
role-aware structure
역할에 따라 필요한 화면과 상태가 달라질 때 공통 영역과 역할별 흐름을 분리합니다. 한 역할의 변경이 다른 흐름까지 번지지 않도록 경계를 둡니다.
API & Data Flow
server ↔ ui boundary
서버 응답과 화면에서 사용하는 데이터를 분리해 각 영역의 책임을 명확히 합니다. 필요한 형태로 가공해 전달하고, API 변경이 UI 전체로 번지지 않도록 관리합니다.
Motion System
lifecycle ownership
애니메이션의 생성과 실행, 정리 로직이 흩어지지 않도록 장면 단위로 책임을 묶습니다. 각 인터랙션의 생명주기를 명확히 해 수정과 확장에 대응합니다.
Styling Structure
predictable styling
스타일도 화면과 기능의 경계에 맞춰 나누고 공통 규칙과 네이밍을 일관되게 유지합니다. 수정이 어디까지 영향을 주는지 예측할 수 있는 구조를 만듭니다.
AI
AI와 함께
더 깊게.
AI를 단순한 코드 생성 도구로 사용하기보다,
필요한 맥락과 제약을 구성하고 작업을 탐색·구현·검증 단계로 나누어 활용합니다.
생성된 결과는 실제 코드와 동작을 기준으로 검증하고, 그 과정에서 컨텍스트와 작업 흐름을 계속 개선합니다.
필요한 맥락을 설계하는 방식
Context Engineering
좋은 결과보다, 좋은 맥락부터.
AI가 문제를 정확히 이해할 수 있도록 필요한 정보와 제약 조건, 작업 범위를 구조화합니다. 단순한 프롬프트보다 어떤 맥락을 언제 제공할지 설계하는 과정을 중요하게 봅니다.
AI와 작업을 나누고 연결하는 방식
Agentic Workflow
한 번의 명령보다, 이어지는 작업 흐름을.
탐색부터 구현과 검증까지 작업을 단계로 나누고, 각 단계에서 AI가 맡을 역할을 구분합니다. 결과가 다음 작업의 맥락으로 이어질 수 있도록 개발 흐름을 설계합니다.
결과를 검증하고 개선하는 방식
Evaluation & Verification
생성보다, 검증 가능한 결과를.
AI가 생성한 결과를 그대로 신뢰하지 않습니다. 실제 코드와 동작, 테스트와 문서를 기준으로 확인하고 실패 원인을 다시 맥락에 반영하며 결과를 개선합니다.
BEYOND
엔지니어링을 넘어,
감각까지.
정답이 정해져 있지 않은 디테일에서 화면의 미묘한 어색함을 살피고, 디자인 의도와 서비스의 맥락을 기준으로 비율과 밀도, 움직임을 조율합니다. 구현 과정에서 발견한 차이는 함께 검토하고, 더 나은 방향이 보이면 근거와 대안을 제안합니다.
의도를 읽고, 결과물에 어울리는 표현을 찾아갑니다.
디자인을 볼 때 형태 자체보다 어떤 인상을 만들고 있는지 먼저 봅니다. 색과 대비, 비율과 밀도처럼 화면의 분위기를 좌우하는 요소를 세밀하게 살피고, 여러 가능성을 비교하며 목적과 맥락에 가장 잘 어울리는 표현을 찾아갑니다.
기능과 표현이 서로 방해하지 않는 균형을 찾습니다.
작은 시각적 차이가 사용 경험을 바꾸는 지점을 살핍니다.
속도와 타이밍으로 움직임의 인상을 조율합니다.
같은 전환도 속도와 easing, 등장 시점에 따라 전혀 다르게 느껴집니다. 장면의 역할과 앞뒤 흐름을 기준으로 여러 값을 비교하며 가장 자연스러운 리듬을 찾아갑니다.
NAVIGATOR
생각을 지나
프로젝트의 형태로.
앞서 이야기한 기준들을 실제 프로젝트 안에서 검증하고 발전시켜왔습니다.
문제를 정의하고 구조를 설계한 과정부터 구현과 개선까지,
각 프로젝트에서 내린 선택과 그 이유를 담았습니다.
CLOSING
함께,
더 좋은 경험을
만들고 싶습니다.
흐름을 설계하고,
구조를 정리하고,
움직임에 이유를 담으면서.
사용자가 자연스럽게
몰입할 수 있는 경험을
함께 만들어가고 싶습니다.
SCROLL TO CONNECT
CONNECT
CONTACT ME
함께 만들고 싶은 제품이나 해결하고 싶은 문제가 있다면 이야기해주세요.채용·협업 제안부터 가벼운 커피챗까지 편하게 남겨주세요.