Tools I use
- html
- css
- sass
- javascript
- jquery
- gsap
- swiper
- nextjs
- tailwind
- php
- vue
- figma
- git
- github
- cursor
What I do
읽기 쉽고,
움직임이 자연스러운 화면.
정보의 흐름을 먼저 설계하고, 그 위에 움직임과 반응형을 얹습니다.
- 01
읽히는 구조
정보의 우선순위를 정리하고, 검색엔진까지 이해하는 시맨틱 마크업을 만듭니다.
- 02
자연스러운 움직임
사용자의 시선과 스크롤에 맞춰 인터랙션의 속도와 장면을 설계합니다.
- 03
어디서나 편안한 화면
데스크톱에서 모바일까지, 읽고 탐색하는 흐름이 끊기지 않게 다듬습니다.
Selected work
대표 작업
Recent projects
최근 프로젝트
이름 위에 마우스를 올리면 화면이 나타납니다.
- 01덕은 아이에스비즈타워 한강 랜딩 페이지 제작
- 02아산샘유외과 홈페이지 구축
- 03과천청사 한양수자인 랜딩 페이지 제작
- 04돼지게티 웹사이트 구축
- 05광명 시티프라디움 웹사이트 구축
- 06더샵 퍼스트월드 상봉 오피스텔 티저 사이트 구축
- 07한강 푸르지오 리버프론트 본사이트 구축
- 08롯데 리조트 울산 사이트 구축
About
A web publisher who turns plans into pages that move well and work on every screen.
구현에서 생길 문제를 먼저 짚고, 모든 기기에서 자연스럽게 동작하는 화면을 만듭니다.
더 알아보기- Role
- Web Publisher · Frontend
- Background
- 광고홍보 전공 → 웹디자인 → 퍼블리싱
- Domains
- 분양 · 병원 · 기업 · 쇼핑몰
- Certificates
- 웹디자인기능사 · GTQ 1급
Built with AI
반복은 줄이고,
검수는 더 깊게.
AI에게 그냥 맡기지 않습니다. 작업 규칙과 체크리스트를 .md 문서로 써 두고, AI가 그 문서를 따라 퍼블리싱 초안과 QA를 자동으로 돌립니다. 최종 마크업과 접근성은 직접 검수합니다.
AI 활용 작업 보기# 퍼블리싱 자동화 규칙## 1. 구조- [x] 시맨틱 태그로 마크업- [x] 제목 계층 h1 → h3 유지## 2. 반응형- [x] 모바일 우선, 브레이크포인트 3단계## 3. 검수- [ ] 접근성·SEO 점검 후 직접 확인- 01규칙 문서 작성작업 규칙과 체크리스트를 .md 문서로 정리합니다.
- 02시안 연결Figma MCP로 시안 정보를 AI에게 넘깁니다.
- 03자동 실행Cursor에서 문서를 따라 퍼블리싱 초안과 QA를 돌립니다.
- 04직접 검수최종 마크업과 접근성은 제가 직접 확인합니다.
Experience
경력
2017년 11월부터 7년 3개월
- 2017
커머스2017.11 - 2021.06
(주)커머스웨어
UIUX팀 대리
자사 홈페이지 반응형 리뉴얼, 홈앤쇼핑·SK스토아 입점 안내 사이트 디자인과 퍼블리싱
- 2022
쇼핑몰2022.03 - 2023.05
주식회사 코니아랩
ICT본부 주임
KCP 복지몰 퍼블리싱, 회사 소개 사이트 Conia World 제작, 자사 쇼핑몰 ADMIN·mcMall UI 개선과 유지보수
- 2024
병원 · 기업2024.07 - 2025.09
주식회사 와커스(WACUS)
디자인팀 대리
GSAP 효과가 화려한 사이트를 주로 맡으며 인터랙션 제작 능력을 끌어올렸습니다. 여러 페이지가 함께 쓰는 공통 레이아웃 위에서 모션이 안정적으로 돌도록 신경 썼습니다.
- 풀페이지 스크롤에 GSAP ScrollTrigger·ScrollSmoother와 글자 단위 텍스트 모션을 결합
- 짧은 일정에 많은 서브페이지를 만들기 위해 공통 레이아웃을 최대한 활용하고, 스크롤 애니메이션도 공통으로 적용
- 모바일 기기에서의 인터랙션 최적화 경험
- 통이미지 기반 적응형 사이트를 반응형으로 전환(약 40개 페이지)
- Next.js·Tailwind CSS로 병원 사이트와 자사 CRM을 제작하며 공통 컴포넌트 재활용
- 2025
분양2025.09 - 재직중
주식회사 넥스미디어
기술개발팀 선임
Vue.js·PHP 기반 분양 사이트를 구축하고, 반복 작업 자동화와 업무 프로세스 개선을 함께 맡고 있습니다.
- 사내 AI 위원회 활동으로 전사 AI 활용 아이디어와 방법을 발표해 사내 AI 자동화 도입 주도
- 관심고객 등록 폼의 DB 연동과 관리자 페이지 연동
- 한강 푸르지오 리버프론트, 더샵 신길센트럴시티·분당센트로, 공덕 자이르네 구축과 인터랙션 구현
- 더샵 관저 아르테 SEO·GEO 최적화(GEO 종합 98점)
- 신영그룹 6개 사이트 SEO 개선
Process
일하는 방식
시안을 받는 순간부터 배포 후 확인까지, 재작업이 생기지 않는 순서로 일합니다.
- 01
시안 검토
디자이너의 의도를 파악하고, 구현 단계에서 생길 문제를 시안 단계에서 먼저 짚습니다.
- 02
우선순위 정리
요청 사항을 리스트업하고 공수를 산정해, 유관 부서와 우선순위를 먼저 협의합니다.
- 03
구현
시맨틱 마크업과 공통 클래스를 잡고, 모든 기기에서 자연스럽게 동작하는 인터랙션을 만듭니다.
- 04
공유·검수
Git 브랜치로 취합하고 localhost로 미리 컨펌받아 재작업을 줄이며, 배포 후 실서버에서 다시 확인합니다.