01
Markup
웹 표준과 접근성을 고려한 구조적 마크업 구현에 익숙합니다.
소개
구조는 단순하게. 사용감은 가볍게.
보기에만 좋은 화면보다 실제로 쓰기 편한 화면을 만드는 것을 중요하게 생각합니다.
프로젝트가 길어질수록 구조의 힘이 중요합니다. 반복을 줄이고 공통화를 높입니다.
디자이너·개발자·고객의 언어를 연결하며 설명 가능한 산출물을 지향합니다.
프로젝트
수상작·자사 솔루션·SI 대표 사례입니다. 나머지는 갤러리에 정리되어 있습니다.
신규 구축 대표작2021.10~12
태림포장 사내 원지·박스 주문 서비스를 리뉴얼·구축하며 필요한 애플리케이션의 디자인 협업·UX 기획·퍼블리싱을 함께 수행한 프로젝트입니다. 디자이너와 Figma로 소통하면서 사용법을 익혀 고객사 요구사항을 정확히 반영해 직접 디자인했고, 그 결과물이 스마트앱어워드 2022 업무향상 부문 대상으로 이어졌습니다.
내부 프로젝트 / 프레임워크 2026.02~
프로젝트마다 화면 구조·공통 UI·SCSS를 처음부터 다시 짜던 비효율을 없애기 위해, Nuxt 3 기반의 자사 프론트엔드 프레임워크를 직접 구축한 내부 프로젝트입니다. 자동 라우팅·컴포넌트 자동 import·상태 관리·API 플러그인 같은 기반 구조와, 실무 상태(size·disabled·readonly·focus·error 등)를 반영한 재사용 UI 컴포넌트, 디자인 토큰 기반 SCSS를 하나의 표준으로 묶었습니다.
SI / 대시보드 2026.05
운영자가 공정·환경 데이터를 한 화면에서 빠르게 확인하는 생태공장 대시보드입니다. Client 화면 퍼블리싱을 전담하면서, 카드·상태 표시·차트·정보성 UI가 제각각이던 화면을 하나의 시각 규칙으로 묶어 "보기 좋은 화면"이 아니라 "빠르게 읽히는 화면"을 목표로 정리했습니다.
성과
숫자와 기록으로 정리한 결과입니다. 자세한 내용은 각 페이지에서 볼 수 있습니다.
작업 방식
파악 → 정리 → 구현 → 검증. 모든 화면을 같은 리듬으로 만듭니다.
요구사항과 화면 목적을 먼저 파악합니다.
구조와 공통 요소를 먼저 정리합니다.
반복 스타일은 SCSS 컴포넌트화합니다.
협업자가 이해하기 쉬운 형태로 문서화합니다.
기술 스택
화면을 만들고, 이후에도 손보기 쉬운 구조까지 함께 고민합니다.
01
웹 표준과 접근성을 고려한 구조적 마크업 구현에 익숙합니다.
02
SCSS 컴포넌트화로 유지보수성과 재사용성을 높입니다.
03
실무 서비스에서 필요한 인터랙션과 동적 화면 대응 경험이 풍부합니다.
04
Vue 중심 프로젝트 경험을 기반으로 프론트엔드 확장 역량을 키우고 있습니다.
05
다양한 기업 환경의 CMS와 솔루션 구조를 유연하게 대응합니다.
06
협업 효율을 높이는 문서화와 커뮤니케이션 역량을 강점으로 보유합니다.