UI/UX
that
matter
UI/UX
that
matter
웹 접근성과 웹 표준을 준수하는 웹 퍼블리셔,
UI 컴포넌트 시스템을 구축해온 이윤화 입니다.
ABOUT
UI 시스템 가이드 UI SYSTEM GUIDE
UI 인터랙션 / 반응형 INTERACTION / RESPONSIVE
데이터 시각화 DATA VISUALIZATION
ABOUT
ME
에듀테크 도메인의 저작도구와 콘텐츠 허브 솔루션을 교육청과 학교 등 공공기관 대상 서비스로 구축하는 프로젝트에서 웹 접근성 기준을 충족하는 UI를 설계하고 구현 해왔습니다.
교육 데이터 기반의 대시보드와 리포트 UI를 구축하며 ApexCharts, Chart.js를 활용한 데이터 시각화 작업에 능숙 하며, 사용자가 데이터를 직관적으로 이해할 수 있도록 돕는 인터랙티브 UI 에 관심이 있습니다.
다양한 디바이스(PC, 태블릿, 크롬북, 모바일 웹뷰)와 브라우저(Chrome, Safari, Firefox, Whale) 환경에서의 대응 경험을 바탕으로, 플랫폼 간 차이를 고려한 안정적인 UI를 만들고 이슈를 해결할 수 있습니다.
WORKS
01. 프로젝트 UI 컴포넌트 가이드 구축
다수의 개발자가 접근성 이슈 없이 빠르게 매핑 작업을 할 수 있도록 프로젝트에 사용된 공통 컴포넌트를 정리한 가이드 시스템을 제공했습니다. 명확한 사용 규칙 정립을 통해 UI 일관성을 확보하고, 불필요한 리소스 낭비를 줄여 프로젝트의 완성도를 높였습니다.
웹 사이트 보기
02. AIEP 인공지능 교수/학습 플랫폼 구축
교사, 학생, 학부모 등 다양한 사용자 층을 고려하여 PC, 크롬북, 태블릿, 모바일을 아우르는 Full 반응형을 구현했습니다. SCSS 루프와 @mixin을 활용해 테마별 CSS 변수를 자동 생성하는 체계를 구축하고, 코드 수정 없이 컬러셋 교체만으로 신규 테마 확장이 가능한 환경을 구성했습니다.
웹 사이트 보기
03. 광주 AION(아이온) 2단계 구축
사용자 정의 테마 적용 시 컴포넌트 State 컬러가 일관되게 적용되지 않는 문제를 Primary 색상을 기준으로 HSL 기반 상태 컬러 자동 생성 로직을 구현했습니다. HSL의 Lightness값을 조절하여 State 컬러를 자동 생성하여 웹 접근성 4.5:1 대비 이상 유지하도록 작업했습니다.
웹 사이트 보기04. Menabi 심리검사 서비스 구축
Framer Motion 스크롤 애니메이션을 활용하여 단순한 정보 전달을 넘어, 사용자의 행동에 반응하는 인터랙션을 구현했습니다. 차트 라이브러리를 활용하여 디자인 요구사항에 맞게 커스터마이징하여 심리 검사 레포트를 작업했습니다.
05. THE CAMP 메인 페이지 리뉴얼
iOS WebView 환경에서 Appbar 드래그 시 하단 공백이 노출되고, iOS에서만 Notch 영역 높이가 다르게 적용되어 플랫폼별 UI 경험이 달라지는 문제를 개선했습니다.
Career
주식회사 버블콘
서비스운영팀 / 대리 (팀원)
- 광주교육청, NIA 수주 공공기관 프로젝트 UI 설계 및 웹 퍼블리싱 수행
- KIRD 납품 H5P 기반 자사 솔루션(1gram) 저작도구 UI 유지보수 및 기능 고도화
- 자사 솔루션 stlink(학적사항 통합 관리 서비스) Google PoC 등 각종 시연용 핵심 기능 UI 구현
- 수주 프로젝트 감리 대응을 위한 웹 접근성(WCAG 2.2 AA) 기준 점검 및 개선
- 웹 접근성을 준수하는 공통 컴포넌트 기반 UI 시스템 가이드 수립 및 표준화 관리
- Chart.js 및 ApexCharts 커스터마이징을 통한 데이터 시각화 구현
진스토리코리아주식회사
개발팀 / 사원 (팀원)
- 서비스 전반의 화면 구조 설계 및 재사용 가능한 공통 컴포넌트 개발
- Framer Motion 기반 인터랙티브 UI 구현 및 애니메이션 최적화
- react-hook-form 기반 유효성 검증 체계 구축 및 응답 누락 방지 로직 구현
- ApexCharts, Chart.js 커스터마이징을 통한 심리검사 결과 리포트 시각화 구현
- next-sitemap 기반 SEO 자동화 체계 구축 및 검색 엔진 최적화(SEO)
주식회사 인에이블다온소프트
IT 개발팀 / 사원 (팀원)
- 자사 하이브리드 웹앱 및 PC 서비스 `더캠프(The Camp)` UI 신규 개발 및 유지보수
- 백오피스 시스템 및 카페24 기반 자사 쇼핑몰 스킨 고도화 및 커스터마이징
- 기획 요구사항 분석을 통한 UI 상세 설계 및 프로토타입 제작
- 미디어 쿼리(Media Query)를 활용한 반응형 레이아웃 구현 및 멀티 디바이스 대응
- 브라우저 엔진별 렌더링 차이를 고려한 크로스 브라우징 검증 및 UI 안정성 확보
UI DEVELOPER • WEB PUBLISHING • WEB DESIGN
UI DEVELOPER • WEB PUBLISHING • WEB DESIGN
UI DEVELOPER • WEB PUBLISHING • WEB DESIGN