|
안녕하세요, 5년차 웹 퍼블리셔 구원모입니다.
- React 및 Next.js 환경에서의 퍼블리싱 경험을 바탕으로 컴포넌트 구조에 맞춘 마크업과 스타일링을 수행해왔습니다. props, children 등 컴포넌트 설계를 이해하고, TypeScript 기반의 타입 구조를 고려하여 상태 변화에 따른 UI 분기와 예외 케이스를 반영한 유지보수 중심의 마크업을 지향합니다.
- 웹 표준과 웹 접근성을 준수하며 사용자 경험을 최우선으로 생각합니다. HTML5, CSS3, JavaScript를 기반으로 반응형 웹사이트를 제작하고, 프로젝트 특성에 맞는 프레임워크와 도구를 활용해 퍼블리싱 효율과 완성도를 함께 높여왔습니다.
- 디자인과 개발 사이에서 가교 역할을 수행하며, 디자이너의 의도를 정확하게 구현하고 개발자와의 원활한 협업을 통해 일관성 있고 확장 가능한 UI를 만드는 데 기여해왔습니다.
- Markup & Styling
시맨틱 마크업과 접근성을 고려한 구조적인 HTML 작성. CSS3, Flexbox, Grid를 활용한 레이아웃 구현
- HTML5
- CSS3
- SASS/SCSS(module)
- Styled-Components
- tailwind
- JavaScript
ES6+ 문법을 활용한 인터랙티브한 UI 구현. DOM 조작 및 이벤트 핸들링 처리
- Javascript(ES6)
- Typescript
- Framework & Library
React, Next.js를 활용한 컴포넌트 기반 UI 개발. 상태 관리 및 라우팅 구현 경험
- React
- Next.js
- jQuery
- Vue
- Design Tools
Figma, Adobe XD를 활용한 디자인 시안 분석 및 정확한 UI 구현. 디자이너와의 원활한 협업
- Adobe PhotoShop
- Adobe XD
- Figma
- Version Control System
버전 관리 시스템을 활용한 협업 및 코드 형상 관리. 브랜치 전략을 통한 효율적인 개발 워크플로우 구축
- Git
- GitLab
- GitHub
- SVN
CJ 제일제당 SENSORY 내부 설문조사 시스템 구축
CJ제일제당 연구 상품 관련 내부 연구원 설문조사 및 평가를 위한 모바일 웹/앱 서비스. 연구원들의 편리한 설문 참여, 관리자의 실시간 응답 모니터링, 평가 결과 통계 및 시각화를 통해 연구 상품 개선 의사결정을 지원
- React
- Typescript
- Vite
- Scss
- Figma
- Gitlab
업무
- CJ Olive Networks 자체 개발 Canal Framework 활용한 UI 컴포넌트 제작
- Ant Design 라이브러리를 활용한 공통 컴포넌트 제작
- 그룹별 상이한 레이아웃을 가진 Drag & Drop 선호도 조사 UI 구현
성과
- Drag & Drop 기반 선호도 조사 UI 구현으로 사용자 경험 개선
- React/TypeScript 기반 공통 컴포넌트 체계 구축으로 개발 효율성 향상
- 비상주 환경에서 GitLab feature 브랜치 전략으로 안정적인 버전 관리
CGV 차세대 디지털 시스템 구축
영화 예매, 모바일 티켓, 매점 상품(스토어) 구매, 액티비티 예약 등 사용자 편의성을 고려한 반응형 웹/앱 서비스 구축 프로젝트. 예매·결제·티켓 화면 등 주요 서비스 UI/UX 구현 및 각 카테고리별 재사용 가능한 공통 컴포넌트 구축
- React
- Typescript
- Next.js
- Scss
- Figma
- Gitlab
- Jira
- Confluence
업무
- 디자인 가이드 기반 공통 UI 컴포넌트 구축 및 모바일 티켓, 결제, 액티비티등 다수 카테고리 퍼블리싱 작업 진행
- Next.js 환경에서 Server/Client Component 구분한 퍼블리싱 작업 진행
- TypeScript interface 정의 및 React Hook(useState, useEffect) 활용 타입 안전한 동적 UI 구현
- 외부 라이브러리(Swiper, Ant Design, react-swipe-to-delete-ios) 활용 및 커스터마이징
- SCSS module 기반 컴포넌트 스타일 관리
성과
- Server/Client Component 구분 및 module.scss 스타일 격리로 프로젝트 안정성 확보
- 공통 컴포넌트 체계 구축으로 퍼블리셔 간 작업 효율성 및 코드 재사용성 향상
- TypeScript 타입 안정성으로 프로젝트 코드 품질 유지
- 영화 예매, 스토어, 액티비티 등 다양한 서비스를 일관된 UI/UX로 통합 구현
SKT 정보보호 위험관리 내부 사이트 구축
기업 내부 정보보호 관리체계(ISMS-P) 인증 획득 및 유지를 위한 증적 관리 시스템. 정보보호 현황 모니터링, 인증 심사 대응 자료 관리, 증적 문서의 체계적 보관을 지원하는 사내 웹 서비스 개발
- Html5
- Css3
- Javascript
- Jquery
- Photoshop
업무
- 내부 보안 정책으로 인해 최신 브라우저가 아닌 Chrome 하위 버전 환경에 맞춰 퍼블리싱 진행
- jqGrid 라이브러리를 활용한 그리드 UI 커스텀 작업 진행
- 정보보호 진단 보고서의 PDF 변환 및 A4 인쇄 규격 대응
성과
- 레거시 브라우저 제약 환경에서 안정적인 시스템 구축 완료
- 미디어 쿼리를 활용한 인쇄 맞춤 스타일링으로 인한 ISMS-P 인증 심사 대응 문서화 업무 효율성 향상
CJ O’CLOUD 소개 사이트 리뉴얼 및 요금 계산기 구축
클라우드 서비스 소개 사이트 리뉴얼 및 요금 계산기 카테고리 신규 구축. 서비스 이용 전 예상 비용을 실시간으로 확인할 수 있는 요금 산정 시스템으로 사용자 편의성 강화
- Html5
- Css3
- Javascript
- Jquery
- Figma
업무
- 메인페이지 포함 클라우드 서비스 소개 사이트 리뉴얼
- 요금 계산기 카테고리 신규 구축 및 실시간 요금 산정 UI 구현
- CSS 미디어쿼리를 활용한 반응형 레이아웃 제작
- 웹 접근성 지침을 준수한 시맨틱 마크업 및 크로스브라우징 대응
성과
- 요금 계산기 신규 구축으로 사용자의 서비스 비용 확인 편의성 향상
- 반응형 웹 구현으로 PC/Tablet/Mobile 환경에서 일관된 사용자 경험 제공
No Image
삼성 CCC(Career Consulting Center) 내부 시스템 구축
퇴직·이직 예정 임직원의 재취업 지원을 위한 커리어 컨설팅 플랫폼 구축. 맞춤형 교육 프로그램, 커리어 컨설팅 신청, 구직 활동 지원 등 체계적인 재취업 콘텐츠를 사용자 페이지(FO)와 관리자 페이지(BO) 통합 구조로 제공
- Vue.js
- Scss
- Photoshop
- Github
- Jira
- Confluence
업무
- Vuetify UI 라이브러리를 활용한 폼, 버튼, 테이블 등 공통 컴포넌트 구현
- 디자인 가이드 기반 대시보드 UI 컴포넌트 구축
- scoped CSS를 활용한 페이지별 스타일 격리 및 충돌 방지
성과
- 공통 컴포넌트 체계 구축으로 개발 생산성 및 유지보수성 개선
- Vuetify 라이브러리 활용으로 완성도 높은 UI 구현
DGB 대구은행 iM 샵(#) SHOP 카테고리 구축
대구 지역 소상공인 무료 홍보 및 쿠폰·혜택 중심의 소비자 서비스를 제공하는 iM SHOP 앱 내 SHOP 카테고리 구축. 고객 주문·결제 서비스와 점주 관리자 모드를 통한 소상공인 지원 플랫폼
- Html5
- Css3
- Javascript
- Jquery
- Adobe xd
- Svn
업무
- 고객 서비스 화면(주문/결제/장바구니/마이페이지) 및 점주 관리자 모드(직원 등록·관리, 실시간 주문 처리, 상품 등록·수정·재고 관리 등) UI 퍼블리싱 작업
- 타 업체 선행 작업 분석 및 공통 레이아웃 구조 적용
- 웹 접근성을 준수한 시맨틱 마크업 및 크로스브라우징 대응
성과
- 고객 서비스와 점주 관리자 모드 통합 구축으로 소상공인 지원 플랫폼 완성
- 기존 레이아웃 구조 활용으로 일관된 UI 및 개발 효율성 향상
기술혁신 ESG기업 지오그린21 사이트 구축
환경·지하수·토양 엔지니어링 전문 기업인 geogreen21 회사 소개 웹사이트 구축 프로젝트
- Html5
- Css3
- Javascript
- Jquery
- Photoshop
업무
- 기업 홍보 및 서비스 안내 목적의 적응형 웹사이트 제작
- Photoshop을 활용한 시안 확인 및 디자이너 협업
성과
- 기획/디자인과 긴밀한 협업을 통해 효율적인 산출물 제작
- 프로젝트 관리 툴 활용으로 일정 및 업무 효율성 확보