은영환7년차 웹 퍼블리셔 / Vue 기반 UI 개발

안녕하세요

정보는 한눈에조작은 망설임 없이코드는 오래가게

시맨틱 HTML과 SCSS 컴포넌트로 접근성과 반응형을 챙깁니다. 검색엔진과 AI가 내용을 정확히 읽을 수 있도록 콘텐츠 구조와 메타데이터도 함께 설계합니다.

소개

읽는 순서는명확하게사용은 빠르게

제목은 길을 알려주고, 본문은 핵심을 설명하고, 버튼은 다음 행동을 분명히 안내해야 합니다. 사람은 물론 검색엔진과 AI도 이해하기 쉬운 화면을 만듭니다.

  1. 접근성과 사용성

    시맨틱 구조, 키보드 탐색, 명확한 정보 위계로 누구나 빠르게 이해하고 사용할 수 있게 만듭니다.

  2. 유지보수 가능한 구조

    프로젝트가 길어질수록 코드보다 기준이 오래갑니다. 반복 화면은 이해하기 쉬운 공통 단위로 묶습니다.

  3. 명확한 커뮤니케이션

    디자이너와 개발자, 고객이 같은 화면을 다른 말로 설명할 때 그 사이를 연결합니다. 결정한 기준은 누구나 다시 확인할 수 있게 남깁니다.

프로젝트

대표 3개, 전체 프로젝트는 아카이브에서

수상작, 자사 솔루션, SI 사례를 먼저 보여드립니다. 각 카드를 누르면 역할과 구현 과정, 성과가 담긴 상세 페이지로 이동합니다.

성과

말보다 기록이 빠른 순간들

성과를 숫자와 이력 기준으로 압축해 보여줍니다.

7년+
실무 경력
20+
프로젝트
100%
퍼블리싱 책임 수행
100%
일정 준수율

작업 방식

이해하기 쉬운 화면을 만듭니다.

요구사항을 화면 단위로 풀어낸 뒤, 구조와 스타일, 동작을 차례로 맞춥니다. 순서는 단순하지만 기준은 꼼꼼합니다.

작업 흐름

  1. 01파악

    누가 왜 쓰는 화면인지부터 확인합니다.

  2. 02정리

    정보의 우선순위와 반복되는 UI를 나눕니다.

  3. 03구현

    구조를 세우고 스타일과 동작을 화면 단위로 구현합니다.

  4. 04검증

    반응형 화면, 키보드 사용, 제목 구조, 메타데이터를 실제 사용 흐름대로 확인합니다.

  5. 05품질

    마감이 빨라도 반드시 지켜야 할 품질 기준은 놓치지 않습니다.

기술 스택

실무에서 검증한 도구와 방법

접근성과 반응형은 기본으로 지킵니다. 검색엔진과 AI 답변에 내용이 정확히 쓰일 수 있도록 콘텐츠 구조와 메타데이터까지 함께 설계합니다.

영역별로.

  • 01

    Markup

    • HTML5
    • 시맨틱 마크업
    • 웹표준
    • 웹접근성
    • 크로스브라우징

    내용의 순서와 의미가 코드에서도 드러나도록 HTML 구조를 잡고, 여러 브라우저에서 같은 흐름으로 사용할 수 있게 만듭니다.

  • 02

    Style

    • CSS3
    • SCSS
    • 반응형 웹
    • 컴포넌트 스타일링
    • 유지보수형 구조

    반복되는 스타일을 SCSS 규칙으로 묶어, 한 곳을 고쳤다가 다른 화면이 놀라지 않게 관리합니다.

  • 03

    Frontend

    • Vue 3
    • JavaScript
    • jQuery
    • React.js
    • 동적 UI

    Vue 화면의 컴포넌트와 데이터 흐름을 이해하고, 서비스에 필요한 인터랙션과 동적 UI를 구현합니다.

  • 04

    CMS / Solution

    • ICE CMS
    • WebSquare
    • Nexacro
    • eGovFrame
    • 커스터마이징

    CMS와 업무 솔루션마다 다른 규칙과 제약을 먼저 파악하고, 그 환경에서 안정적으로 운영되는 화면을 만듭니다.

  • 05

    Accessibility / Search

    • 웹 접근성
    • SEO
    • GEO
    • AEO
    • 메타데이터
    • JSON-LD
    • Sitemap

    시맨틱 마크업과 구조화된 콘텐츠로 사용자의 접근성을 높이고, 검색엔진과 AI가 내용을 정확히 찾고 인용할 수 있는 기반을 만듭니다.

  • 06

    Design / Collaboration

    • Figma
    • Zeplin
    • Photoshop
    • Illustrator
    • Git
    • 문서화
    • 교육 지원

    디자인 시안과 개발 이슈를 팀이 바로 판단할 수 있는 말과 문서로 정리합니다.

06 / 다음 장면으로

화면을 만들며쌓인 시간은다음 기준이 됐습니다.

처음 웹을 배운 순간부터 회사와 학교를 병행한 시간, 역할이 넓어진 계기와 그때마다 새로 세운 기준을 연도별로 기록했습니다.

은영환의 여정 보기
  1. 2018웹을 처음 배우기 시작한 순간
  2. 2019웹 퍼블리셔 실무자로 전환한 시기
  3. NOW퍼블리싱을 넘어 UI 개발로 확장 중

연락하기

프로젝트 문의

퍼블리싱이나 UI 구현이 필요하다면 메일로 알려 주세요. 해결할 화면과 우선순위부터 함께 맞춰 보겠습니다.

범위와 일정을 먼저 분명히 하고, 다음 사람이 이어서 고치기 쉬운 화면으로 작업합니다.