사용자를 먼저 생각하고흐름을 이해하며화면으로 구현합니다.

UI/UX를 우선으로 고민하는 웹 퍼블리셔입니다.
기획 의도와 사용자의 입장을 함께 이해하고, 정보를 쉽게 찾고 편리하게 이용할 수 있는 화면을 만듭니다.

AI를 코드 작성과 분석에 활용하며, 결과를 직접 검토하고 개선합니다.
화면 구현 경험을 바탕으로, 사용자의 흐름을 기획하는 역할까지 넓혀가는 것을 목표로 합니다.

About Me실무 프로젝트 보기

작업 방식

  1. 01 · UI / UX

    접근성과 사용성

    사용자의 입장에서 정보와 조작의 흐름을 고민합니다.
    다양한 환경에서도 이해하고 이용하기 쉬운 웹을 만듭니다.

  2. 02 · Structure

    유지보수를 고려한 구조

    반복되는 UI는 재사용하고, 코드는 일관된 기준으로 정리합니다.
    동료가 이해하기 쉽고 수정과 확장에 유연한 구조를 만듭니다.

  3. 03 · Communication

    명확한 커뮤니케이션

    기획자, 디자이너, 개발자와 고객이 같은 화면을 서로 다른 관점에서 바라볼 때,
    각자의 의도를 이해하고 연결합니다.
    구현 방향과 제약을 함께 논의하며, 더 나은 결과물을 위한 기준을 맞춰갑니다.

Selected Projects

기업 홈페이지부터 업무 시스템까지, 주요 작업을 소개합니다.

Skills & Tools

화면을 구현하고, 함께 완성하기 위해 사용하는 기술과 도구입니다.

Markup

  • HTML5
  • 시맨틱 마크업
  • 웹표준
  • 웹 접근성

콘텐츠의 순서와 의미를 고려해 HTML 구조를 작성합니다. 다양한 사용자가 정보를 이해하고 이용할 수 있도록 웹표준과 접근성을 고려합니다.

Style

  • CSS3
  • SCSS
  • 반응형 웹
  • 컴포넌트 스타일링
  • 크로스 브라우징

다양한 화면 크기와 브라우저에 맞는 레이아웃을 구현합니다. 반복되는 스타일은 공통화해 일관성을 유지하고, 수정과 확장이 쉬운 구조로 정리합니다.

Frontend

  • JavaScript
  • jQuery
  • React
  • Vue.js
  • PHP
  • JSP

JavaScript와 jQuery로 사용자 인터랙션을 구현하고, React와 Vue.js로 컴포넌트 기반 UI를 구성합니다. PHP·JSP 서버 템플릿 환경에서 페이지와 콘텐츠를 퍼블리싱합니다.

Search

  • SEO
  • 콘텐츠 구조
  • 메타데이터

명확한 콘텐츠 구조와 메타데이터를 통해 검색엔진과 AI가 내용의 의미를 이해하기 쉬운 기반을 마련합니다. 필요한 정보를 찾고 활용하기 좋은 웹을 지향합니다.

Tools

  • Figma
  • Zeplin
  • Photoshop
  • Git
  • Cursor

디자인 시안과 가이드를 확인하며 협업하고, 필요한 이미지 리소스를 편집합니다. Git으로 코드 변경 이력을 관리하고, Cursor를 코드 작성과 분석의 보조 도구로 활용합니다.