01
사용자 경험
보기에만 좋은 화면보다 실제로 쓰기 편한 화면을 만드는 것을 중요하게 생각합니다.
안녕하세요
기분좋은화면구조만듭니다
복잡한 요구를 단순한 흐름으로.
핵심부터.
구조 · 퍼블리싱 · 협업을 한 흐름으로 맞춥니다.
- 01
구조 설계
컴포넌트 / SCSS / 파일 구조 - 02
퍼블리싱 품질
반응형 / 접근성 / 크로스브라우징 - 03
협업 효율
문서화 / 공통화 / 운영 대응
소개
쉽게읽히고빠르게쓰이는화면을만듭니다
구조는 단순하게. 사용감은 가볍게.
조금 더.
02
유지보수 가능한 구조
프로젝트가 길어질수록 구조의 힘이 중요합니다. 반복을 줄이고 공통화를 높입니다.
03
명확한 커뮤니케이션
디자이너·개발자·고객의 언어를 연결하며 설명 가능한 산출물을 지향합니다.
작업 흐름
- 01파악
- 02정리
- 03구현
- 04검증
총 28건실무 22 + 개인 6
프로젝트
여러 SI·SM으로 쌓은 실무 프로젝트
여러 SI·SM·솔루션 프로젝트 중 메인에 올린 핵심 사례입니다. 전체 목록과 캡처는 갤러리에서 볼 수 있습니다.
현재 탭의 대표 9건을 메인에 두었고, 전체 22건은 갤러리에 정리해 두었습니다.
실무 프로젝트 전체 보기 (갤러리)좌우로 스와이프해 대표 작업을 넘겨보세요.
실무 사례
삼화페인트 생태공장 대시보드
삼화페인트 생태공장 대시보드의 Client 화면 퍼블리싱과 UI 개선을 수행하며 카드, 데이터 영역, 상태 표시, 차트, 정보성 UI의 구조와 시각적 위계를 정리했습니다.
- Visual Studio Code
- Git
- Vue
- JavaScript
- SCSS
- HTML
실무 사례
오알켐 MES 리뉴얼
Vue 3 기반 MES 리뉴얼에서 화면 퍼블리싱과 공통 UI 컴포넌트 개선을 수행하고, AG Grid 중심의 검색·선택·렌더링·다운로드 구조를 정리했습니다.
- Vue 3
- Vite
- JavaScript
- SCSS
- HTML
- Vue Router
- Vue I18n
- AG Grid
- Chart.js
- flatpickr
- marked
실무 사례
한진칼 및 계열사 리뉴얼
Vue 컴포넌트를 ICE CMS 구조에 맞게 커스터마이징하고, 공식 가이드 부재 상황에서 개발 가이드와 교육 문서를 직접 제작해 운영 안정성을 높였습니다.
- IntelliJ
- ICE 5.0
- Microsoft Teams
- Word
- PowerPoint
- HTML
- SCSS
- Vue.js
실무 사례
깨끗한나라 OMS 리뉴얼
깨끗한나라 OMS 리뉴얼에서 Vue 기반 전체 퍼블리싱을 담당하고, 주요 화면을 조기 완료하며 UI/UX 개선안을 일부 반영했습니다.
- Vue
- SCSS
실무 사례
한온시스템 홈페이지 운영
콘센트릭스 CATALYST와 협업하며 한온시스템 홈페이지 운영 티켓을 처리하고, 문구·이미지·링크·레이아웃·콘텐츠 영역 수정과 운영 환경 이슈 검토를 수행했습니다.
- Rider
- Teams
- JIRA
- C#
- CSS3
- csHtml
- JavaScript
실무 사례
조앤소프트 프레임워크 구축
사내 프로젝트의 개발 생산성과 UI 품질을 높이기 위해 Nuxt 3 기반 프론트엔드 프레임워크와 재사용 가능한 UI 컴포넌트, SCSS 토큰 구조를 구축했습니다.
- Nuxt 3
- Vue 3
- TypeScript
- JavaScript
- SCSS
- Pinia
- Axios
- Vite
- Chart.js
- vue-chartjs
- AG Grid
- flatpickr
- noUiSlider
6 / 9개 대표 사례 표시 중
개인 프로젝트
실무 밖에서 만든 것들
메인에는 pin으로 고정된 개인 작업만 보입니다. 전체·캡처·소요 시간은 개인 프로젝트 페이지에서 확인할 수 있습니다. (3건)
좌우로 스와이프해 개인 작업을 넘겨보세요.
개인 프로젝트
포트폴리오 웹사이트 2026
현재 운영 중인 2026 개인 포트폴리오입니다. 실무 프로젝트와 개인 작업을 분리해 보여주는 갤러리 구조, 다국어 콘텐츠, 라이트/다크 테마, 디자인 토큰 정리 페이지까지 하나의 Nuxt 기반 포트폴리오 시스템으로 설계했습니다. 화면을 예쁘게 보여주는 것에서 끝나지 않고, 이후 작업을 계속 추가하고 관리할 수 있는 구조를 목표로 만들었습니다.
- Nuxt 3
- Vue 3
- TypeScript
- SCSS
- Pinia
- GSAP
개인 프로젝트
카카오톡 클론
새로운 개발 언어 학습을 위해 기획·디자인이 완료된 카카오톡 UI를 Vue 3로 클론 코딩한 개인 프로젝트입니다. 채팅·친구·설정 등 주요 화면 흐름을 컴포넌트 단위로 나누고, GitHub Pages base path(`/cloneKakaoTalk/`) 배포까지 포함해 실서비스에 가까운 프론트엔드 구조를 연습했습니다.
- Vue 3
- Vue Router 4
- Vite 6
- SCSS
- @vuepic/vue-datepicker
- holiday-kr
- vite-svg-loader
개인 프로젝트
포트폴리오 웹사이트 2025
2025년에 제작한 정적 HTML 기반 포트폴리오입니다. 자기소개, 프로젝트 소개, 다크 모드, 캔버스 모션을 하나의 페이지 흐름으로 구성해 당시 퍼블리싱 역량과 화면 구성 방식을 기록했습니다.
- HTML
- SCSS
- JavaScript
- jQuery
- Swiper
여정
경험이 쌓인 성장의 흐름
중학교 학생회 페이지부터 고등학교·대학, 회사 실무 병행까지 퍼블리싱·프론트엔드 중심으로 쌓아 온 경험입니다.
보기 방식을 고를 수 있습니다.
01
회사
조앤소프트에서 구축·운영·리뉴얼 프로젝트를 수행하며, 요구사항 파악, 화면 구조 설계, 반응형 퍼블리싱, Vue 화면 구현, CMS 커스터마이징, 운영 유지보수까지 납품형 웹 UI 전 과정을 경험했습니다.
- 퍼블리싱 100% 수행
- Vue 기반 화면 구현
- CMS 커스터마이징
- 구조 설계 및 공통화
- 운영 유지보수
- 태림포장
- 삼화페인트
- 대양제지
- 대양판지
- 깨끗한나라
- 경동원
- 한진칼
- 한온시스템
- 오알켐
- 광장 파트너스
- 인천대학교
2026
Vue 3 구조 설계 고도화
포트폴리오와 납품형 UI를 Vue 3·Composition API 기준으로 재정리하고, 재사용 컴포넌트·SCSS 모듈·디자인 토큰을 한 세트로 묶는 구조를 다듬고 있습니다. 접근성·SEO·정적 배포까지 고려한 화면 단위 설계를 이어가고 있습니다.
2025
운영·리뉴얼·CMS 확장
운영·리뉴얼·CMS 커스터마이징을 병행하며 반응형·웹 표준·접근성 기준을 프로젝트별로 맞췄습니다. 인수인계 문서와 퍼블리싱 가이드를 정리해 이후 수정이 쉬운 화면 구조로 넘기는 비중을 키웠고, 대학 재학과 병행하며 낮 시간대 납품 일정을 유지했습니다.
2024
Vue 기반 프로젝트 강화
Vue 3 기반 관리·업무 시스템에서 컴포넌트 분리, 상태·라우팅 구조, SCSS 레이어를 함께 잡으며 기획·디자인·퍼블리싱이 끊기지 않게 연결했습니다. 화면 단위 QA와 협업사·고객 피드백 반영 루틴도 정착시켰습니다.
2023
WebSquare · SW 개발 역량 보강
WebSquare Certified Publisher와 SW개발 L5를 취득하며 엔터프라이즈 UI·개발 용어와 산출물 기준을 실무에 맞춰 보강했습니다. 화면 스펙·마크업 규칙을 문서로 남기는 습관을 강화했고, 학업과 납품 일정을 함께 맞추는 리듬을 이어갔습니다.
2022
자사 솔루션 UI 구조화
자사 솔루션·납품형 화면의 공통 레이아웃·컴포넌트·SCSS 변수를 묶어 반복 마크업을 줄였습니다. Naver Cloud Platform Certified Associate를 취득하며 배포·환경을 염두에 둔 퍼블리싱 관점을 넓혔습니다.
2021
퍼블리싱 실무 정착
시스템 구축 프로젝트에서 퍼블리싱 전담 비중을 키우며 와이어·디자인·HTML/CSS·인터랙션을 한 흐름으로 맡았습니다. 고등학교 졸업과 맞물려 실무 톤의 포트폴리오·협업 방식을 정리했습니다.
2020
퍼블리싱 기반 실무 적응
입사 후 반응형·크로스브라우징·웹 표준을 프로젝트 단위로 적용하는 방식을 익혔습니다. 요구사항 변경에 맞춰 화면 구조를 다시 잡고, 운영·유지보수 티켓도 함께 처리하며 납품 일정에 맞추는 리듬을 키웠습니다.
2019
실무자로 전환
제이콥시스템을 거쳐 11월 조앤소프트에 합류했습니다. 학교·동아리에서 하던 웹 제작이 납품형 프로젝트로 바뀌면서 일정·품질·커뮤니케이션·수정 범위를 실무 기준으로 익혔습니다.
02
대학교
컴퓨터공학을 편입·재학하며 프로그래밍·소프트웨어 공학 수업을 들었습니다. 회사 실무와 병행해 과제·시험 일정과 납품 마감을 맞추고, 과대·학회장으로 학과 행사·소통을 맡으며 협업·문서화 경험을 이어갔습니다.
- 컴퓨터공학 편입·재학
- 회사 실무 병행
- 과대·학회장
- 프로그래밍·소프트웨어 공학 수업
2025
과대·학회장 운영
과대와 학회장을 맡아 학과 행사·학술·소통 채널을 정리했습니다. 회원·교수·학과 사무실과 일정을 맞추는 경험이 이후 프로젝트 스테이크홀더 조율과 비슷한 패턴으로 이어졌고, 납품 일정도 병행했습니다.
2024
전공 수업·재학
컴퓨터공학과에 재학하며 프로그래밍·소프트웨어 공학 과목을 수강하기 시작했습니다. 전공 수업과 회사 실무를 병행하며 웹 퍼블·개발 역량을 이론과 연결해 보는 시간을 가졌습니다.
2023
편입 2학년 수업·과제
편입 2학년 과정에서 프로그래밍·자료구조·소프트웨어 공학 과목을 수강하며 과제와 프로젝트 마감을 실무 일정과 맞춰 진행했습니다. 수업에서 다룬 구조·문서화 방식이 화면 스펙 정리 습관으로 이어졌습니다.
2022
컴퓨터공학 편입
컴퓨터공학과에 편입했습니다. 낮에는 회사 프로젝트, 저녁·주말에는 수업·과제를 병행하며 학업과 납품 일정을 함께 조율하는 방식을 익혔습니다.
03
고등학교
웹디자인과 MOD 동아리에서 HTML·CSS·JavaScript 기초를 익히고, 온라인 학습·학생회장 선거 사이트 등 실사용 웹을 만들며 실무로 이어질 퍼블리싱·개발 역량을 쌓았습니다.
- MOD 웹디자인 동아리 회장
- 온라인 학습 사이트 개발
- 학생회장 선거 사이트 개발
- 전교 투표·학습 정보 통합 웹 TF
- 웹디자인기능사 · 정보처리기능사
2021
졸업과 실무 연결
졸업을 앞두고 MOD·TF에서 만든 화면을 포트폴리오로 정리하고, 마크업·폴더·네이밍 규칙을 팀과 맞추는 방식을 실무 톤으로 다듬었습니다. 졸업 후에도 회사에서 퍼블리싱 실무를 이어갔습니다.
2020
실사용 웹 서비스 개발
코로나 시기 원격 수업을 위해 학교 온라인 학습 사이트를 기획·퍼블리싱·구현했고, 학생회장 선거용 투표·후보 소개 페이지도 제작했습니다. 정보처리산업기사를 취득하며 개발·퍼블리싱 기초를 이론으로도 정리했습니다.
2019
웹 프로젝트와 첫 실무
MOD 회장으로 동아리 커리큘럼·튜터링·과제를 운영했고, 웹디자인·정보처리 기능사를 취득했습니다. 전교 투표·학습 정보 통합 웹 TF 팀장으로 실사용자·마감·역할 분담을 경험한 뒤 퍼블리싱 실무를 시작했습니다.
2018
웹디자인 기초
웹디자인과에 입학해 MOD에 가입하며 HTML·CSS 레이아웃, 반응형 개념, 정적 페이지 제작을 반복 연습했습니다. 선배 과제·교내 대회를 통해 디자인 시안을 마크업으로 옮기는 감각을 키웠습니다.
04
중학교
학생회 홍보부장으로 활동하며 학교 소식을 웹 페이지로 정리·게시하는 경험을 시작했습니다. 조직 안내를 디지털 채널로 옮기는 일이 이후 퍼블리싱·프론트엔드 관심으로 이어졌습니다.
- 학급회장
- 학생회 홍보부장
- 학생회 페이지 신설·운영
2017
학생회 페이지 신설
홍보부장으로서 학생회 소개·행사·공지를 모을 학생회 전용 페이지를 처음 만들고 직접 운영했습니다. 글·이미지 업데이트 방식, 메뉴 구조, 모바일에서도 읽히는지까지 스스로 맞춰 보며 웹이 학교 안내 도구가 될 수 있음을 경험했습니다.
2016
홍보부 활동 확대
학생회 홍보 업무를 맡으며 교내 행사 안내·게시물 제작을 정리했습니다. 인쇄물과 함께 교내 게시·공유할 수 있는 자료 형태를 고민하다, 이후 페이지로 모으는 방식으로 이어졌습니다.
2015
학급·학생회 리더십
중학교 입학 후 학급회장을 맡으며 반 일정·소통을 조율했습니다. 학생회 홍보부에 들어가 공지·행사 홍보를 돕기 시작했고, 글과 visual 자료로 학교 소식을 전하는 역할에 익숙해졌습니다.
기술 스택
실무에서 검증한 도구와 방법
화면을 만들고, 이후에도 손보기 쉬운 구조까지 함께 고민합니다.
영역별로.
01
Markup
웹 표준과 접근성을 고려한 구조적 마크업 구현에 익숙합니다.
02
Style
SCSS 컴포넌트화로 유지보수성과 재사용성을 높입니다.
03
Interaction
실무 서비스에서 필요한 인터랙션과 동적 화면 대응 경험이 풍부합니다.
04
Framework
Vue 중심 프로젝트 경험을 기반으로 프론트엔드 확장 역량을 키우고 있습니다.
05
CMS / Solution
다양한 기업 환경의 CMS와 솔루션 구조를 유연하게 대응합니다.
06
Design / Collaboration
협업 효율을 높이는 문서화와 커뮤니케이션 역량을 강점으로 보유합니다.
하이라이트
성과와 전문성 한눈에 보기
카테고리를 고르면 왼쪽에 맥락, 오른쪽에 항목이 정렬되어 한눈에 읽힙니다.
01
수상
고등학교 시절부터 실무와 연결되는 프로젝트형 활동과 대회에 꾸준히 참여하며 아이디어를 결과물로 구현해왔습니다.
- 2023 일학습병행 우수사례 경진대회 대상
- 2022 메이커톤 「지구(EARTH)」 우수상
- 한반도 체인지 메이커톤 우수상
- 제5회 G AI & IoT 메이커톤 최우수상
- 2020 명동 루프탑 캐릭터 메이커톤 대상
- 제6회 신한 29초 영화제 일반부 특별상
연락하기
프로젝트 문의
퍼블리싱·UI·구조 정리가 필요하시면 메일로 연락 주세요. 정리할 화면부터 함께 보면 됩니다.
메일 주소.
eyh208@naver.com범위와 일정을 먼저 맞추고, 유지하기 쉬운 화면부로 작업합니다.
