로고 - kji
로고 - kji

Creative & Interactive Web Publisher Code, design & seamless interactions.

For over 10 years, I’ve crafted accessible, responsive, and interactive web experiences—bridging clean code and thoughtful design to connect users, brands, and meaningful digital value. .

Built with code and care.
UI · UX · Accessibility · Publishing · R&D Project · Deployment · Ops
Built with code and care.

삼성웰스토리 홈페이지 리뉴얼

Project 삼성웰스토리 홈페이지 리뉴얼

Client 삼성웰스토리㈜

Period 2024.06 ~ 2025.03

Role 퍼블리싱, UI 리뉴얼

Device Responsive / 다국어 지원(KR·EN)

Participation 60%

프로젝트 관련 썸네일

Overview 기업 브랜드 리뉴얼 및 접근성 개선을 위한 반응형 홈페이지 개편

Tasks 디자인 시스템 기반 마크업 설계, 접근성 대응, 일정·QA 관리

Challenges 접근성 구조 설계 및 브라우저 대응 최적화

Achievements 접근성 인증마크 획득, 공통 컴포넌트화, 일정 리딩

Keywords UI · UX · Web Accessibility · Responsive · Publishing

이마트앱 스타필드마켓 구축

Project 이마트앱 스타필드마켓 페이지 개발

Client (주)이마트

Period 2024.07 ~ 2024.09

Role 퍼블리싱, 컴포넌트 설계 지원

Device Mobile Web

Participation 100%

프로젝트 관련 썸네일

Overview 스타필드 마켓 전용 모바일 웹사이트 신규 구축

Tasks Vue 기반 컴포넌트 스타일링 및 UI 퍼블리싱 지원

Challenges 모바일 최적화와 브랜드 톤앤매너 반영

Achievements 반응형 퍼블리싱 완성도 향상, 컴포넌트 개발 협업

Keywords UI · Publishing · Mobile Web · Component Support

이마트 웹/앱 운영

Project 이마트 웹/앱 디자인 운영 유지보수

Client (주)이마트

Period 2024.01 ~ 2024.10

Role 퍼블리싱, 프로모션 UI 제작, 접근성 대응

Device Web / Mobile Web

Participation 70%

프로젝트 관련 썸네일

Overview 이마트 웹사이트 및 앱 유지보수 및 프로모션 퍼블리싱

Tasks 운영 가이드 기반 퍼블리싱, 이벤트 프로모션 제작, 접근성 준수

Challenges 다양한 이벤트를 운영 가이드에 맞춰 유연하게 구성하고 일정 준수

Achievements 모든 작업을 일정에 맞춰 완료하고 접근성 기준에 부합하는 결과물 제공

Keywords Web/App · Accessibility · Promotion · UI · Maintenance

이마트 입점제안 구축

Project 이마트 입점제안 페이지 구축

Client (주)이마트

Period 2024.01 ~ 2024.03

Role 퍼블리싱, 기능성 폼 UI 설계 및 구현

Device Web

Participation 100%

프로젝트 관련 썸네일

Overview 신규 출점을 제안할 수 있는 고정형 입점 신청 페이지 구축

Tasks 안내 페이지, 신청폼·완료폼 구성, 메일 발송용 템플릿 퍼블리싱

Challenges 기능성과 가독성을 고려한 레이아웃 설계 및 이마트 UI 가이드 준수

Achievements 안정적인 신청 플로우 구현, 재사용 가능한 폼 템플릿 확보

Keywords UI · Form · Publishing · Responsive · Business Page

IFC Mall 홈페이지 구축 & 운영

Project IFC Mall 홈페이지 리뉴얼 구축 / 운영 유지보수

Client SIFC Retail

Period (구축)2023.05 ~ 2023.10 / (운영)2023.10 ~ 2024.12

Role 퍼블리싱, 스타일 설계 및 인터랙션 구현

Device Adaptive Web

Participation (구축) 60% / (운영) 60%

프로젝트 관련 썸네일

Overview IFC몰 홈페이지 리뉴얼 및 고도화한 적응형 웹 구축 프로젝트

Tasks UI 퍼블리싱, 디자인 기반 인터랙션 적용, 운영 초기 고도화 대응

Challenges 시각 요소 구현 정확도와 기기별 레이아웃 안정성 확보

Achievements 인터랙션 완성도 향상, 초기 운영 안정화 지원

Keywords Adaptive Web · UI · Publishing · Interaction · Retail

시효 통합 멤버십

Project 시효 통합 멤버십 구축

Client ㈜로시안

Period 2023.03 ~ 2023.07

Role 퍼블리싱, 디바이스 및 다국어 대응 구조 설계

Device Adaptive Web

Participation 70%

프로젝트 관련 썸네일

Overview 브랜드 시효의 통합 멤버십 기능 구축 및 페이지 퍼블리싱

Tasks 멤버십 가입/관리 UI 구성, 국/영문 및 디바이스별 대응 퍼블리싱

Challenges 기능 중심 UI 구현, 매장용·사용자용 동시 대응 레이아웃 구성

Achievements 다국어 및 디바이스 환경 대응 구조 완성

Keywords Membership · Adaptive Web · Multi-language · UI · Publishing

로시안 디지털 서비스 운영

Project 로시안 디지털 서비스 운영 유지보수

Client ㈜로시안

Period 2023.04 ~ 2023.12

Role 퍼블리싱, 운영 유지보수, 구조 고도화

Device Adaptive Web / 다국어 지원(KR·EN·CN)

Participation 60%

프로젝트 관련 썸네일

Overview 브랜드 웹사이트의 운영 유지보수 및 기능 개선

Tasks 속도 개선, 중문 사이트 대응, 퍼블리싱 구조 점검 및 보완

Challenges 운영 중 발생한 이슈 대응과 성능 중심 개선 작업

Achievements 사이트 운영 안정화 및 다국어 대응 구조 마련

Keywords Maintenance · Multi-language · UI · Publishing

한국녹색기후기술원 홈페이지

Project 한국녹색기후기술원 홈페이지 리뉴얼 구축(1, 2차)

Client 한국건물에너지기술원

Period 2022.01 ~ 2022.10

Role 퍼블리싱, 기획 및 콘텐츠 구조 정리

Device Responsive Web

Participation 100%

프로젝트 관련 썸네일

Overview 기관 소개 및 인증 정보를 중심으로 홈페이지를 리뉴얼 구축

Tasks 부서별 콘텐츠 구성 협의, 기획 정리, 퍼블리싱 구조 설계

Challenges 각 부서 요청사항을 통합한 정보 구조화 및 일정 조율

Achievements 부서 협업 기반 기획 정리와 퍼블리싱 전담 수행

Keywords Public Site · UI · Planning · Publishing · Responsive

공공·정부 R&D 과제 홈페이지 구축 통합

Project R&D 과제 홈페이지 구축(통합)

Client 산업통상자원부 · 에너지기술평가원 · 한국전력공사 외

Period 2018.03 ~ 2024.12

Role 퍼블리싱, 기획 구조 정리 및 컴포넌트화

Device Web

Participation 100%

프로젝트 관련 썸네일

Overview K-BEMS, 창호 에너지 성능 시뮬레이션, 스마트조명 플랫폼 등

Tasks 목적에 맞는 정보 구조 설계, 콘텐츠 확장 및 화면 고도화 진행

Challenges 과제별 요구사항과 기능 변화에 유연하게 대응하며 일관성 유지

Achievements 프로젝트 흐름에 맞춘 설계 고도화 및 접근성 중심 퍼블리싱 수행

Keywords R&D · Public Site · Publishing · Information UI

EMS 솔루션 사업화

Project EMS 솔루션 사업화

Client 한국건물에너지기술원

Period 2019.04 ~ 2022.12

Role 퍼블리싱, 컴포넌트 스타일 커스터마이징

Device Web

Participation 100%

프로젝트 관련 썸네일

Overview 실시간 에너지 관리 시스템(EMS) 대시보드 솔루션의 UI 구축

Tasks Vue 컴포넌트 퍼블리싱, Chart.js 커스터마이징, 레이아웃 정리

Challenges 실시간 데이터 구조에 맞춘 화면 설계 및 프레임워크 환경 대응

Achievements 차트와 컴포넌트를 프레임워크 내에서 스타일 일관성 있게 구현

Keywords Vue.js · Chart.js · Dashboard · UI Component · Bootstrap-Vue

KIEMECS 브랜드 사이트

Project KIEMECS 브랜드 사이트

Client TheKIE

Period 2022.01~ 2022.05

Role 반응형 웹 퍼블리싱, 인터랙션 구현

Device Responsive Web

Participation 100%

프로젝트 관련 썸네일

Overview IoT 기반 냉난방 맞춤 서비스 ‘KIEMECS’의 런칭 페이지 구축

Tasks 제품 설명 중심의 반응형 퍼블리싱 및 인터랙션 효과 구현

Challenges 브랜드 신뢰도를 고려한 시각/정보 균형 설계

Achievements 다양한 사용자 디바이스에서 일관된 사용자 경험 제공

Keywords 반응형 웹 · 홍보 사이트 · 인터랙션 · IoT 서비스 · 런칭페이지

KT 멤버십 앱 운영 & 프로모션 구축

Project KT 멤버십 앱 운영 및 프로모션 제작

Client (주)케이티

Period 2016.07 ~ 2017.09

Role 퍼블리싱, 정기 프로모션 제작, 접근성 대응

Device App WebView

Participation 100%

프로젝트 관련 썸네일

Overview KT 멤버십 앱 내 정기 프로모션 운영 및 퍼블리싱 유지보수

Tasks 자라섬 페스티벌·체험런칭·더블할인 등 이벤트 페이지 퍼블리싱

Challenges KT 내부 웹 접근성 기준을 반영한 디자인 적용 및 유지

Achievements 다수의 정기·비정기 프로모션 병행 운영 및 접근성 검수 대응

Keywords Promotion · Accessibility · Membership

의료 웹사이트 구축 이력

Project

Client 병·의원 다수 (위담한방병원, 예그린한의원, 인천아시아드병원 외)

Period 2014.01 ~ 2015.04

Role 웹퍼블리싱, UI 구조 설계 및 반응형/적응형 대응

Device Responsive Web / Adaptive Web / 다국어 지원(KR·EN·CN)

Participation 100%

프로젝트 관련 썸네일

Overview 의료기관 특성에 맞춰 정보 중심의 병·의원 웹사이트를 다수 구축

Tasks 정보 위주의 UI 구성, 콘텐츠 구조 정리, 반응형·적응형 마크업 제작

Challenges 다양한 환경과 컨셉을 고려한 디자인 흐름 유지와 콘텐츠 설계

Achievements 의료업 특성에 맞는 정보전달 구조와 시각적 신뢰감 조화 구현

Keywords Medical · UI · Structure · Info Design · Responsive

How I Work

소통하고, 디테일에 집중하며, 책임 있게 만들어냅니다.

Publishing Process & Workflow

Designing Structure, Shaping Experience

Structural Planning

요구사항 분석
프로젝트의 목표, 주요 기능, 사용자 흐름 등을 이해하기 위해 기획자 및 PM과 커뮤니케이션하며 퍼블리싱 관점에서 필요한 기술적 요구사항과 구조적 조건을 사전에 파악합니다.

Design to Code

디자인 구현 계획 수립
전달받은 디자인 시안을 퍼블리싱 구조에 맞게 분석하고, 반응형 기준, 컴포넌트 구조, 인터랙션 요소 등을 디자이너와 협의하여 실제 구현에 적합한 방향으로 조율합니다.

Accessible by Design

접근성을 반영한 구조 설계
접근성 가이드 기준을 바탕으로, 디자인 시안에서 발생할 수 있는 접근성 문제를 선제적으로 검토하고, 마크업 구조에 반영할 수 있도록 체크리스트 기반으로 개선 방향을 제안합니다.

Modular Markup

컴포넌트 마크업 설계
인터페이스 전반에 일관성과 확장성을 확보하기 위해 공통 UI 요소를 식별하고, 컴포넌트 단위로 구조화된 마크업을 설계합니다. 유지보수와 협업을 고려한 효율적인 퍼블리싱 기반을 마련하며, 개발 연계를 위해 클래스 구조 및 데이터 속성 사용 방식 등을 사전 점검하고 조율합니다.

Interaction Engineering

인터랙션 설계 및 구현
사용자 흐름에 따라 자연스럽게 동작하는 인터페이스를 목표로, 키보드 탐색, 포커스 흐름, 접근성 요소를 고려한 인터랙션 로직을 설계하고, 실제 환경에서 안정적으로 작동하는 인터랙션을 구현합니다. 개발 연계 과정에서 발생할 수 있는 이벤트 충돌이나 구조 문제를 방지하기 위해, 중간 단계에서 구현 연동 가능 여부를 수시로 확인하고 조정합니다.

Cross Testing

크로스브라우징 & 디바이스 테스트
구현된 UI가 다양한 운영체제, 브라우저, 해상도에서도 시각적 일관성과 기능적 안정성을 유지하는지 확인합니다. 사용자 환경별 호환성 이슈를 사전에 점검하고 대응합니다.

UI Audit

접근성 및 UI 품질 검수
시멘틱 구조, 포커스 흐름, 키보드 접근성, 명도 대비 등을 기준으로 실제 사용자 환경에서 UI 전반을 직접 검수하고, 문제를 식별합니다. 모든 사용자에게 일관된 경험을 제공하기 위한 품질 진단을 수행합니다.

UX Refinement

QA 피드백 반영
QA 과정에서 전달된 이슈와 개선 요청을 바탕으로 마크업 구조, 사용자 흐름, 인터랙션 요소를 세밀하게 수정하고, 사용자 경험의 완성도를 높이기 위해 직접 개선 작업을 진행합니다.

Handoff & Docs

배포 및 문서화
퍼블리싱 작업을 완료한 후, 구조와 구현 기준을 명확히 하기 위해 마크업 구조, 클래스 네이밍, UI 흐름 등을 정리한 문서를 작성합니다. 이 문서는 향후 운영 및 유지보수에 활용될 수 있도록 기준을 남기고, 프로젝트의 퍼블리싱 품질을 책임지는 산출물로 전달됩니다.