PLATIA

포트폴리오 소개

디자이너 김수민님과 협업하여 두원상선의 다국어 회사소개 웹사이트를 WordPress 기반으로 제작하였습니다. 독자적으로 테마를 개발하고, Elementor를 활용해 전 페이지를 클라이언트가 직접 편집할 수 있도록 구현했습니다.

작업 범위

• WordPress 전용 커스텀 테마 제작
• Elementor 기반 전체 페이지 구성 및 사용자 편집 기능 개발
• Elementor 커스텀 위젯 개발 및 WPML 다국어 호환
• 4개 국어 대응 (WPML 번역 플러그인 활용)
• 인트로 페이지 애니메이션 구현 (스크롤 기반 재생)
• 세로 스크롤 기반의 가로 슬라이더(선적/연혁) 인터랙션 개발

주요 업무

• 기본 위젯으로 구현이 어려운 요소는 직접 커스텀 위젯을 제작하여 표현력을 강화했습니다.
• WPML과 커스텀 Elementor 위젯의 완벽한 호환을 구현해, 다국어 번역 속도와 효율을 크게 향상시켰습니다.
• 스크롤에 따라 동적으로 콘텐츠가 변화하는 애니메이션과 슬라이더는 해상도 대응을 포함해 세심하게 조정하였습니다.

주안점

• 클라이언트가 직접 콘텐츠를 편집할 수 있는 운영 편의성 확보
• WPML의 구조적 장점을 극대화하여 신속한 다국어 확장 가능
• 사용자 경험을 높이는 역동적인 콘텐츠 표현과 애니메이션 처리에 중점

포트폴리오 소개

두원상선 웹사이트를 디자이너 김수민님과 협업하여 새롭게 제작하였습니다. 추후 예정된 ‘두원페리 예약 서비스’와의 원활한 통합을 고려하여, 백엔드는 Java Spring, 프론트엔드는 Next.js + React로 구성하였습니다.

작업 범위

• 반응형 사용자 페이지 제작 (디자이너 제공 디자인 기반)
• 관리자 페이지 제작 (Tailwind UI 기반)
• 전체 콘텐츠 CRUD 기능 개발 (이벤트, 여행정보, 노선, 시간표, 운임표, 객실 및 부대시설 정보 등)
• 영상 및 CSS 애니메이션을 활용한 동적 콘텐츠 구성
• SEO 대응 및 Next.js 캐싱정책 적용을 통한 빠른 로딩 속도 구현

주요 업무

• 관리자 페이지에서 모든 콘텐츠를 직접 등록/수정할 수 있도록 설계하여, 클라이언트가 별도 개발자 없이도 콘텐츠를 지속적으로 업데이트할 수 있게 했습니다.
• Tailwind UI를 적극 활용해, 디자이너의 추가 리소스 없이도 깔끔하고 사용성 높은 관리자 페이지를 구현했습니다.

주안점

• 관리 편의

포트폴리오 소개

기존의 불편한 구조(정경대학 하위 페이지)를 개선하고, 경제학부만의 독립성과 정체성을 확립하기 위한 워드프레스 기반 웹사이트 개발 프로젝트입니다. 서울시립대학교의 공식성과 학과 특유의 아이덴티티를 동시에 반영한 구조와 디자인으로 리뉴얼하였습니다.

작업 범위

• 전체 정보구조(IA) 기획 및 디자인 커스터마이징
• Elementor 기반의 페이지 전체 구성
• 커스텀 위젯 및 ACF, Gutenberg 기반 게시판 기능 구현
• The Events Calendar 플러그인 커스터마이징 (학사일정 기능)
• WPML 기반 다국어 구성 (자동번역 설정 포함)
• 반응형 웹 구축 (PC/모바일/태블릿 대응)
• 템플릿 기반 초기 구축 후, 완전 맞춤형 스타일로 리디자인
• Revolution Slider 적용 및 스타일 최적화

주요 업무

• Revolution Slider를 활용한 메인 비주얼 구성 (학부의 전문성과 브랜드 강조)
• 클라이언트가 직접 콘텐츠를 편집할 수 있도록 Elementor로 모든 페이지 구성
• Elementor 위젯만으로 해결되지 않는 기능은 커스텀 위젯 개발
• ACF 플러그인을 통한 자유로운 콘텐츠 입력 및 첨부파일 업로드 기능 구현
• The Event Calendar의 템플릿 및 CSS 구조를 수정하여, 학사일정 기능을 맞춤형으로 제공
• WPML을 사용하여 전체 사이트 다국어 처리 및 번역 자동화

주안점

• 경제학부만의 독립적 정체성 확보와 동시에 대학 전체 브랜드 통일성 유지
• 관리자가 HTML 지식 없이도 직접 콘텐츠를 업데이트할 수 있도록 Elementor와 Gutenberg 환경 최적화
• 비용 효율성을 고려한 템플릿 기반 시작, 이후에는 UI/UX 맞춤화로 고유 디자인 구현
• Revolution Slider를 도입해 메인페이지에 임팩트를 주되, 페이지 로딩 속도와 반응성까지 최적화
• 사용자 접근

포트폴리오 소개

NSE의 관련사인 스타트업 'Launching'과 함께, 국제 특송(국제 배송) 업무를 자동화하고 온라인화하는 플랫폼을 기획 및 개발했습니다.
기존에는 전화·수기 중심으로 진행되던 국제 특송 업무의 비효율을 개선하고, UPS API 연동부터 주문 접수, 전자저울 무게 측정, 운송장 자동 발행, 인보이스 기반 결제까지 전 과정을 자동화한 B2B/B2C 웹서비스입니다.

작업 범위

• 전체 기획 구조 수립 및 요구사항 정리
• 주문 → 무게측정 → 결제 → 운송장 발행까지의 전 과정 자동화
• 클라이언트와 협업하여 비즈니스 로직 모델링
• 엑셀파일을 이용한 주문 대량 업로드
• 백엔드(Spring), 프론트엔드(React) 개발 및 AWS 배포
• UPS/USPS/굿스플로 API 연동, Stripe 결제 연동
• 글로벌 리전 대응 (AWS 미국 리전)

주요 업무

• 1. 전자저울 연동을 통한 무게 측정 자동화
• USB로 연결된 전자저울 장비의 측정값을 실시간으로 읽어 폼에 자동 입력되도록 구현했습니다.
• 개발 과정에서 장비를 직접 구입해 테스트하면서 정확한 무게 데이터와 UI 동기화가 이뤄지도록 안정화했습니다.
• 2. 액셀 파일 업로드를 통한 대량 주문 처리
• 고객은 지정된 양식의 엑셀 파일을 업로드함으로써, 여러 건의 주문을 일일이 입력하지 않고도 한 번에 등록할 수 있습니다.
• 또한, 주소 검수 기능을 통해 배송사 API가 인식하지 못하는 주소는 사전에 사용자에게 확인 요청이 가도록 처리하여, 잘못된 주문으로 인한 오류를 최소화했습니다.
• 3. 국제 특송 로직 전체 자동화
• 주문 접수 → 무게 측정 → 주문 확정 → 인보이스 발행 → 결제 → 운송장 발행
• 후불 업체의 경우, 결제 이전 단계에서 API를 통해 운송장만 먼저 발급
• UPS, USPS, 굿스플로와의 API 연동으로 배송사별 자동 처리
• 4. 인보이스 기반 Stripe 결제
• 주문 요금이 확정되면 자동으로 인보이스가 발행되고, 고객은 해당 인보이스 화면에서 Stripe를 통한 실시간 결제가 가능합니다. (정기결제는 미포함, 단건 결제 플로우에 집중)
• 5. 관리자 검수 및 승인 기능
• 주문 확정 전, 관리자가 주문 내용을 검토하고 요금을 확정하는 단계가 포함되어 있습니다.
• 관리자 UI는 React로 구성된 심플한 대시보드이며, Context 기반 상태 관리로 가볍고 빠르게 동작합니다.
• 관리자가 주문 관리를 용이하게 할 수 있도록, 데이터를 엑셀 파일과 pdf 파일로 저장할 수 있게 만들었습니다.

주안점

• 복잡한 국제 특송 업무를 누구나 쉽게 사용할 수 있도록 설계: 기존에는 도트프린터로 운송장을 출력하던 수준에서, 웹 기반 고해상도 자동 인쇄로 전환
• 클라이언트가 제공한 PPT 기획안을 기반으로, 개발자가 모델 설계와 기획 보완까지 함께 진행
• 요구사항이 점차 확장되며 비즈니스 로직이 복잡해지는 문제에 대응하기 위해 테스트코드를 중반 이후 적극 활용
• 업계 특성상 명확한 규칙이 없는 케이스는 임의 처리 후 운영단계에서 확정 가능하도록 유연한 구조 설계

포트폴리오 소개

LG CNS의 B2B 메시징 서비스 ‘톡드림’의 브랜드 소개 웹사이트를 기획 및 개발했습니다. 기존의 정적인 이미지에서 벗어나 브랜드를 더욱 생동감 있게 전달하고자, 초기 기획 단계에서 3가지 콘셉트(토스 스타일, 뱅크샐러드 스타일, 우주 느낌)를 제안했으며, 이 중 ‘우주 느낌’ 시안이 최종 채택되어 전체 디자인 방향이 결정되었습니다. 클라이언트는 기존 ‘톡드림’ 브랜드에 더 통통 튀고, 감각적인 이미지를 더하길 원했으며, 이에 맞춰 시각적 연출과 성능을 동시에 고려한 설계로 진행했습니다.

작업 범위

• 전체 웹사이트 기획 및 디자인 콘셉트 제안 (3가지 시안 중 우주 콘셉트 채택)
• 브랜드 리뉴얼 목적에 맞는 시각 구성 및 콘텐츠 흐름 설계
• 메인 페이지에 이미지와 애니메이션을 결합한 다채로운 인터랙션 적용
• 스크롤 방향이 중간에 가로로 전환되는 구성으로 사용자 몰입도 향상
• 클라이언트 보안 정책에 따라 사내 서버 환경에서 직접 테스트 및 코드 커스터마이징 후 전달
• 기술 포인트 및 주안점:
• 1) 별자리와 항성 효과는 이미지 대신 Canvas 기반으로 직접 구현
• 자바스크립트로 별을 랜덤한 크기와 위치로 생성해 캔버스에 뿌려, 실제 우주에 있는 듯한 분위기 연출
• 새로고침할 때마다 별 위치가 바뀌어, 시각적 재미와 퍼포먼스를 동시에 만족
• 태양이 떠오르는 일출 이미지, 달 그림자도 Canvas로 화면 비율에 맞춰 그려져 반응형 연출까지 고려
• 2) Coverflow 형식의 3D 슬라이더를 CSS만으로 구현
• 외부 라이브러리 없이 CSS의 3D transform과 animation만을 활용하여 구성
• 클래스 추가/제거만으로 작동하도록 설계해 자바스크립트 사용 없이도 부드러운 UX 제공

주안점

• 1) 별자리와 항성 효과는 이미지 대신 Canvas 기반으로 직접 구현
• 자바스크립트로 별을 랜덤한 크기와 위치로 생성해 캔버스에 뿌려, 실제 우주에 있는 듯한 분위기 연출
• 새로고침할 때마다 별 위치가 바뀌어, 시각적 재미와 퍼포먼스를 동시에 만족
• 태양이 떠오르는 일출 이미지, 달 그림자도 Canvas로 화면 비율에 맞춰 그려져 반응형 연출까지 고려
• 2) Coverflow 형식의 3D 슬라이더를 CSS만으로 구현
• 외부 라이브러리 없이 CSS의 3D transform과 animation만을 활용하여 구성
• 클래스 추가/제거만으로 작동하도록 설계해 자바스크립트 사용 없이도 부드러운 UX 제공
• 3) 단조로운 브랜드 콘텐츠를 풍부한 시각 요소로 재해석하여 정보 전달력 강화
• 4) 디자인부터 개발, 서버 연동까지 기획-개발-적용 전 과정을 일원화하여 진행

포트폴리오 소개

‘심카드코리아’는 일본, 태국, 캄보디아 등 아시아권 여행객을 대상으로 USIM, eSIM, WiFi Egg를 판매 및 대여하는 글로벌 웹사이트입니다.
저는 해당 웹사이트의 프론트엔드 전반을 React 기반 SPA로 개발하였으며, 사용자 편의성과 속도 최적화를 중심으로 구조를 설계했습니다.

작업 범위

• React 기반의 SPA 구조 설계 및 전체 컴포넌트 개발
• 백엔드 개발자와 협업하여 API 연동 및 데이터 흐름 조율
• USIM / eSIM / WiFi Egg 각각의 특성 차이를 고려한 주문, 조회, 결제 흐름 분기 처리
• 정보 페이지에는 간단한 애니메이션을 적용해 사용자 집중도 향상
• 반응형 웹 구현: 다양한 해상도에 따른 폰트/이미지 크기 조절 및 레이아웃 대응
• 다국어 지원 구현: JSON 기반 언어별 번역 파일을 사용하고, 내부적으로 사용자의 언어 선택값을 localStorage에 저장하여 유지되는 구조로 설계
• 글로벌 PG사인 PayPal 연동 결제 시스템 구현: 해외 사용자의 원활한 결제를 위한 UI 흐름 설계 및 통합
• 기술 포인트 및 주안점:
• SPA 구조의 단점(초기 로딩 지연)을 보완하기 위해 코드 분할 및 lazy-loading 적용
• 제품별 특성에 따라 사용자 흐름을 분기 처리하면서도 UI는 통일감 있게 구성
• 다국어 사용자 경험을 고려한 UX 설계 및 언어 지속 저장 처리
• PayPal을 통한 해외 결제 연동 구현 (글로벌 고객 접근성 고려)
• 이 프로젝트는 단순한 정보 전달형 웹사이트를 넘어, 다국적 고객을 대상으로 실사용 가능한 글로벌 커머스 플랫폼을 구현한 경험이었습니다.
• 특히 국가별로 제품 수요와 사용 목적이 다르기 때문에, 주문 흐름 설계와 UI 구성의 유연성 확보에 중점을 두었으며, 글로벌 PG 연동 및 다국어 처리를 통해 실제 사용자 환경을 충실히 반영했습니다.

주안점

• SPA 구조의 단점(초기 로딩 지연)을 보완하기 위해 코드 분할 및 lazy-loading 적용
• 제품별 특성에 따라 사용자 흐름을 분기 처리하면서도 UI는 통일감 있게 구성
• 다국어 사용자 경험을 고려한 UX 설계 및 언어 지속 저장 처리
• PayPal을 통한 해외 결제 연동 구현 (글로벌 고객 접근성 고려)

포트폴리오 소개

사용자가 읽은 책을 등록하고, 해당 책에 대한 소개, 리뷰, 한줄평, 별점을 확인하고 공유할 수 있는 도서 리뷰 웹앱을 제작했습니다. 본 프로젝트는 컨셉 구현을 위한 클라이언트 사이드 전용 앱으로, 서버 및 데이터 연동 없이 진행되었으며 React 기반의 SPA(Single Page Application) 구조로 개발했습니다.

작업 범위

• 책 선택 후, 소개 → 리뷰 → 한줄평으로 이어지는 콘텐츠 흐름 구성
• 책 표지 이미지에서 주요 색상을 추출하여, 각 콘텐츠 화면의 배경 및 텍스트 컬러를 자동 설정
• React 기반 UI 구성 및 상태 관리
• 가로 스와이프: 콘텐츠(소개/리뷰/한줄평) 전환
• 세로 스와이프: 책 리스트 내 다음/이전 책으로 전환
• 모바일 환경(iOS/Android) 별 스와이프 감도 차이를 고려한 인터랙션 최적화

주안점

• 책 표지 이미지에서 색상 추출 기능을 통해, 각 책의 분위기에 맞는 동적 UI 테마 제공
• (canvas를 활용해 이미지에서 dominant color를 추출하고 이를 화면 스타일에 적용)
• 사용자 경험을 최우선으로 고려한 콘텐츠 흐름과 인터랙션 구조 설계
• 서버 없이도 사용자 흐름이 자연스럽게 이어지는 구조를 구현해 컨셉 검증(PoC)에 중점
• 다양한 디바이스 환경에서의 스와이프 충돌 문제 해결 및 감도 조정 로직 구현

포트폴리오 소개

‘도토리 우체국’은 사용자가 온라인에서 작성한 익명 편지를, 원하는 시점에 오프라인 실물 편지로 인쇄하여 발송하는 서비스입니다. 본 프로젝트는 핵심 기능을 빠르게 구현하기 위한 MVP(Minimum Viable Product) 웹사이트로 제작되었으며, 실사용 가능한 소셜 로그인, 결제, 편지 관리 기능 등을 중심으로 개발하였습니다.

작업 범위

• 워드프레스 기반 전체 웹사이트 제작
• WooCommerce 기반 결제 시스템 구축 및 결제 플러그인 연동
• 편지 내용 작성 및 예약 전송 구조 설계 (인쇄/발송을 위한 데이터 구조 포함)
• 소셜 로그인 기능 구현
• 기존에 제공되던 소셜 로그인 플러그인이 사용 불가(deprecated) 상태였기 때문에, 이를 최신 조건에 맞게 직접 수정 및 재구성하여 적용
• 사용자 편지 이력 관리 기능 구현 (마이페이지형 구조)
• 기술 포인트 및 주안점:
• MVP 단계임에도 불구하고, 실사용에 필요한 결제, 로그인, 사용자 콘텐츠 관리 기능을 모두 구현
• 워드프레스의 장점을 살려 빠른 구축과 기능 확장을 병행
• WooCommerce 결제 플로우를 편지 발송 서비스 구조에 맞게 커스터마이징
• 업데이트 중지된 공개 플러그인을 최신 워드프레스 환경에 맞춰 개조하여, 소셜 로그인 기능 구현
• 이 프로젝트는 서비스 아이디어의 실현 가능성을 검증하기 위한 MVP 구축이 목적이었으나, 실제 서비스에 준하는 기능들을 포함하여 완성도 높게 마무리되었습니다.
• 특히 소셜 로그인 플러그인을 직접 수정해 구현한 부분과, WooCommerce를 일반 쇼핑몰이 아닌 콘텐츠 예약 발송 서비스에 맞춰 커스터마이징한 점에서 기술적인 성과가 있었습니다.
• WordPress, WooCommerce
• WooCommerce 결제 플러그인 연동
• Custom OAuth 소셜 로그인 (Deprecated Plugin 개조 및 재설정)
• 사용자 콘텐츠 관리 기능 (편지 이력/예약 구조)
• 로그인 화면입니다. 소셜로그인을 지원합니다.
• 편지를 쓰고, 날짜와 보내는 사람, 받는 사람 정보를 작성하여 제출합니다.

주안점

• MVP 단계임에도 불구하고, 실사용에 필요한 결제, 로그인, 사용자 콘텐츠 관리 기능을 모두 구현
• 워드프레스의 장점을 살려 빠른 구축과 기능 확장을 병행
• WooCommerce 결제 플로우를 편지 발송 서비스 구조에 맞게 커스터마이징
• 업데이트 중지된 공개 플러그인을 최신 워드프레스 환경에 맞춰 개조하여, 소셜 로그인 기능 구현

포트폴리오 소개

**PMS(월경 전 증후군)**을 겪는 여성들을 위해, 주기적인 증상 관찰과 생활 습관 개선을 돕는
웹 기반 행동 치료 프로그램의 퍼블리싱을 담당했습니다.

이 앱은 사용자가 자신의 월경 전후 주기와 증상 패턴을 기록하고,
운동, 명상, 수면, 식습관 등의 활동을 모니터링할 수 있도록 구성되어 있습니다.
또한 기록된 데이터를 기반으로 증상 추이를 시각화하여,
사용자가 스스로의 변화를 인지하고 관리할 수 있도록 설계되어 있습니다.

퍼블리싱 단계에서는 민감한 건강 데이터를 다루는 만큼, 사용자에게 안정감과 신뢰를 줄 수 있는 디자인을 구현하는 데 주력했습니다.
또한 다양한 기기에서 편안하게 접근 가능한 반응형 UI,
그리고 일관된 사용자 경험을 위한 컴포넌트 기반 퍼블리싱을 적용했습니다.
홈 화면입니다. 배란일, 다음 생리일, 현재 마신 물의 양 등 제일 중요한 데이터를 시각적으로 표현했습니다.
배란일, 생리일에 맞춰 원의 두께가 시각적으로 변하도록 표현했습니다.
오늘 마신 물의 양 기록을 보여주는 화면입니다. 원 뒤에 파도는, canvas를 이용해 실제로 물이 찰랑거리도록 표현했습니다.
오늘 마신 물의 양을 기록합니다. 스와이프로 메뉴를 올리고 닫습니다.
PMS 증상에 대한 상태를 종합적으로 확인하는 화면입니다.
캘린더를 통해 각종 기록을 추가하고 수정하는 화면입니다.

포트폴리오 소개

비용 절감을 최우선으로 고려하면서도, 신뢰성과 전문성을 강조한 디자인과 사용자 편의성을 확보하는 방향으로 구축했습니다.

작업 범위

• WordPress 템플릿 기반 사이트 구축
• 템플릿 다중 제시 및 선택 후 맞춤 커스터마이징
• 클라이언트 요구사항에 맞춘 추가 디자인 및 개발
• 관리자 페이지 커스터마이징 및 최적화
• 별도 사용 매뉴얼 제작 및 전달

주요 업무

• 다양한 WordPress 템플릿 시안을 제시하여, 클라이언트가 원하는 방향성을 선택할 수 있도록 지원했습니다.
• 템플릿으로 표현하기 어려운 부분은 디자이너가 별도 디자인하고, 개발자가 직접 커스터마이징하여 제작했습니다.
• 연구원의 특성상 신뢰감을 주는 디자인이 필수적이었기에, 전체 컬러 톤과 레이아웃을 신뢰성 중심으로 설계했습니다.
• 인포그래픽은 완성도 높은 표현을 위해 이미지로 처리하고, 이외의 모든 콘텐츠는 워드프레스 관리자 페이지에서 수정 가능하도록 구성했습니다.
• 프로젝트 종료 시, 연구원 내부 담당자가 손쉽게 수정/추가할 수 있도록 별도 매뉴얼을 제작하여 제공했습니다.

주안점

• 비용 대비 품질 최적화: 템플릿 기반 제작을 기본으로 하면서도, 클라이언트 요구사항을 수용할 수 있도록 필요한 부분은 커스터마이징했습니다.
• 신뢰성 있는 디자인 설계: 변호사・세무사・회계 전문가와 협업하는 연구원의 특성을 반영하여, 신뢰성 중심의 컬러・배치・콘텐츠 흐름을 기획했습니다.
• 자율 관리 지원: 클라이언트가 별도 개발자 없이도 웹사이트를 자유롭게 수정・운영할 수 있도록 관리자 페이지를 최적화하고, 별도의 사용 매뉴얼을 제작해 전달했습니다.
• 대표 인사말 화면입니다. 내용은 관리자모드에서 수정가능합니다.
• 비전에 대한 인포그래픽입니다.
• 핵심가치에 대한 인포그래픽과 설명입니다.
• 조직도입니다. 내용변화가 자주 있는 페이지이기 때문에, 관리자화면에서 수정가능하게 제작했습니다.
• 제휴기관입니다. 나중에 추가 및 삭제할 수 있도록 수정가능하게 제작했습니다.

포트폴리오 소개

‘오데트’는 사용자의 관심사를 중심으로 이성을 매칭하는 소개팅 플랫폼으로, 단순한 외모 중심이 아닌 공감대 기반의 만남을 목표로 기획 및 개발한 웹앱입니다. 억지스러운 시나리오가 아닌, 사용자 스스로가 즐겁게 참여할 수 있는 구조를 설계하여 ‘진짜 나’를 드러낼 수 있도록 했습니다.

작업 범위

• 주요 소개팅 앱 5종(글램, 아만다, 틴더 등)을 심층 분석하고, 최소 정보 입력만으로 높은 매칭률을 낼 수 있는 사용자 흐름(시나리오)을 기획
• 사용자들이 자기 자신을 자연스럽게 표현할 수 있도록 시나리오 구조 및 콘텐츠 구성
• React + Redux를 활용해 웹앱을 개발
• React Spring을 이용한 카드 인터랙션(카드 뒤집기, 끌기, 튕기기 등)을 구현하여 UX의 재미 요소 강화

주안점

• 관심사 태그 기반의 유사도 분석을 통해 사용자 간 매칭 점수를 도출
• ‘카드 기반 매칭 시나리오’를 통해 사용자가 직관적으로 서비스에 몰입할 수 있도록 설계
• 행동 기반 알고리즘이 아닌, 사전 입력된 관심사 간의 유사도 매칭 방식을 사용
• 인터랙션 중심의 UI 설계를 통해 사용자 만족도와 반복 사용률을 높임

포트폴리오 소개

OneVoice.Kr은 한겨레 다큐멘터리 프로젝트를 위해 WordPress 기반으로 제작한 웹사이트입니다. 우리 사회 가족・공동체 문제를 다양한 이웃의 생생한 목소리와 사진으로 풀어내는 이 프로젝트를 위해, 시각적・청각적 몰입을 극대화하는 감각적인 웹사이트를 기획하고 구현했습니다.

작업 범위

• WordPress 기반 웹사이트 구축 및 테마 커스터마이징
• Fullpage.js를 활용한 풀페이지 스크롤 구현
• CSS 3D 및 Canvas 애니메이션(파형 등) 구현
• 페이지별 오디오 재생 기능 탑재
• 관리자 페이지 커스터마이징(비개발자도 콘텐츠 업로드 가능)

주요 업무

• 첫 화면에서부터 감각적인 풀페이지 스크롤 경험 제공
• 인터뷰 페이지마다 음성 자동 재생 기능을 구현하여 청각적 몰입감 강화
• CSS 3D 효과와 Canvas를 활용한 동적 표현(파형 애니메이션) 개발
• WordPress 관리자 화면을 커스터마이징하여, 한겨레 측 담당자가 개발자 도움 없이 인터뷰 콘텐츠(사진, 오디오, 텍스트)를 직접 등록・편집할 수 있도록 지원

주안점

• 몰입감 있는 사용자 경험(UX): 시각적(풀페이지, 애니메이션)과 청각적(음성) 요소를 결합해, 통계 속 숫자 너머에 있는 사람들의 이야기를 생생하게 전달하는 데 집중했습니다.
• 비개발자 친화성: 별도의 개발 지식 없이도 모든 콘텐츠를 쉽게 업로드・관리할 수 있도록 WordPress 관리자 화면을 세밀하게 커스터마이징했습니다.
• 퍼포먼스와 안정성 고려: 복잡한 애니메이션과 오디오 기능을 포함하면서도 웹사이트 퍼포먼스를 유지하고, 다양한 디바이스(PC, 태블릿, 모바일)에서 안정적으로 동작하도록 최적화했습니다.

포트폴리오 소개

‘바이올라’는 WordPress와 WooCommerce를 기반으로 구축된 온라인 쇼핑몰 웹사이트로, WooCommerce 기본 테마인 Storefront를 커스터마이징하여 제작되었습니다. WooCommerce가 제공하는 기본 기능만으로는 국내 쇼핑몰 환경에 적합하지 않기 때문에, 여러 국내 전용 플러그인을 활용하고, 직접 플러그인을 개발해 필요한 기능을 보완했습니다.

작업 범위

• 1. WooCommerce 기본 테마(Storefront) 커스터마이징
• 2. 국내 WooCommerce 플러그인(엠샵 계열) 설치 및 설정
• 엠샵 결제, 무통장 입금 알림, 굿스플로 운송장 연동, SMS 알림 등
• 4. WooCommerce의 기본 구매 플로우를 국내 쇼핑몰 UX에 맞게 커스터마이징
• 5. 마이페이지, 쿠폰, 포인트 기능 등 쇼핑몰에 필요한 기능 전반 구현
• 기술 포인트 및 주안점:
• 1. WooCommerce의 한계를 극복하기 위해 국내 환경에 맞춘 구조 설계 및 플로우 커스터마이징
• 2. 플러그인을 통해 외부 채널의 구매후기 활용
• 3. 플러그인 위주 구성이 아닌, 사용자 UX에 맞춘 기능 통합 중심 설계
• 4. 국내 PG사와 물류 연동까지 포함된 쇼핑몰 실 운영 환경에 맞춘 완성도 높은 구축
• 해당 프로젝트는 판매 제품이 초기 런칭 이후 빠르게 정리되어 아쉽게도 운영 기간이 길지는 않았지만, 기술적으로는 매우 도전적인 프로젝트였습니다.
• WooCommerce를 기반으로 국내 쇼핑몰 수준의 UX와 기능을 완전히 구현했고, 결제, 마이페이지, 포인트, 쿠폰, 주문/배송 등 핵심 기능을 전부 탑재하였으며, 외부 플랫폼과의 연동 기능까지 포함되어 실전 경험을 쌓기에 충분했던 프로젝트였습니다.
• WordPress, WooCommerce, Storefront Theme Customization
• 국내 PG 연동 플러그인 (엠샵 계열)
• 무통장알림, 네이버 쇼핑 연동, SMS 알림 등등 관리 편의를 위한 플러그인 탑재
• 쿠폰, 포인트, 알림 등 쇼핑몰 전반 기능 구현

주안점

• 1. WooCommerce의 한계를 극복하기 위해 국내 환경에 맞춘 구조 설계 및 플로우 커스터마이징
• 2. 플러그인을 통해 외부 채널의 구매후기 활용
• 3. 플러그인 위주 구성이 아닌, 사용자 UX에 맞춘 기능 통합 중심 설계
• 4. 국내 PG사와 물류 연동까지 포함된 쇼핑몰 실 운영 환경에 맞춘 완성도 높은 구축

포트폴리오 소개

농협물류의 배송 업무를 통합 관리하는 모바일 앱(NH택배)과 관제 프로그램의 퍼블리싱을 담당했습니다.
앱은 집배송 기사, 영업점, 물류센터 직원들이 택배 접수부터 배송 완료까지의 과정을
모바일에서 간편하게 처리할 수 있도록 지원하는 업무용 앱이며, 관제 프로그램은 물류가 이동하는 과정, 배차 등 물류과정에서 일어나는 모든 상황을 한번에 확인할 수 있게 만든 웹서비스입니다.

퍼블리싱 작업에서는 다양한 사용자 역할(기사, 센터, 영업점 등)에 따라 변화하는 화면 구조를 고려하여,
직관적인 UI 구성과 반응형 디자인, 안드로이드 디바이스 최적화에 중점을 두고 구현했습니다.
또한 실시간 스캔, 사진 업로드, 배송상태 확인 등 업무 효율성을 높이는 기능들이 안정적으로 작동하도록 마크업과 스타일을 구성하였습니다.

포트폴리오 소개

한국예술종합학교 디자인과 졸업전시 웹사이트는 2017년과 2018년 두 해에 걸쳐 개발한 프로젝트입니다. 초기에는 비용 절감을 위해 WordPress 테마(Uncode)를 활용했으나, 클라이언트 요구사항을 충족하기 위해 많은 부분을 커스터마이징하고, 일부 인터랙티브 UI는 별도로 개발하여 완성도를 높였습니다.

작업 범위

• WordPress 기반 졸업전시 웹사이트 구축 및 커스터마이징
• 인터랙티브 UI(2017년: 좌표 UI, 2018년: 룰렛 UI) 개별 개발
• 콘텐츠 업로드용 블록 에디터 커스터마이징
• 고급 검색 기능(카테고리, 태그, 커스텀 택소노미 필터) 개발
• 학생별 계정 발급 및 콘텐츠 입력 시스템 구축

주요 업무

• Uncode 테마를 기반으로 프로젝트를 시작했으나, 클라이언트 요구사항(독특한 UI 및 사용자 경험)을 반영하기위해 테마 커스터마이징 및 별도 개발 진행
• 2017년 졸업전시에는 HTML을 활용하여 좌표 기반 인터랙티브 UI를 구현
• 2018년 졸업전시에서는 React를 이용해 룰렛 형태의 인터랙티브 UI를 추가 개발
• 학생 개별 계정 발급 및 직관적인 콘텐츠 등록을 위해, 워드프레스에 외부 블록 에디터 플러그인을 적용해 커스터마이징
• WordPress 기본 검색 기능을 확장하여, 카테고리・태그・커스텀 택소노미별 검색이 가능한 고급 필터 기능 구현

주안점

• 테마 한계 극복: 초기 비용 절감을 고려하되, 클라이언트의 디자인・기능적 요구사항을 충족하기 위해 적극적인 커스터마이징과 추가 개발을 진행했습니다.
• 몰입감 있는 인터랙티브 UI: 졸업전시 웹사이트의 특성을 살려, 학년별 특색 있는 인터랙션(UI/UX)을 개별적으로 개발하여 차별화된 사용자 경험을 제공했습니다.
• 콘텐츠 관리 편의성 강화: 모든 학생이 직접 콘텐츠를 업로드해야 하는 점을 고려해, 직관적인 블록 에디터 환경을 조성하고, 별도 매뉴얼 없이도 쉽게 사용 가능한 관리 시스템을 구축했습니다.

포트폴리오 소개

삼일절의 역사적 의미를 알리기 위한 다양한 영상, 인터뷰, 인터랙션 요소들이 포함된 웹사이트였으며, KBS 데이터저널리즘팀이 주관하고, 기자님들이 직접 콘텐츠와 일부 UI 코드를 작성해 전달하는 방식으로 협업이 진행되었습니다.
인터렉션 UI의 경우, 전문 개발자가 아닌 기자가 작성한 코드를 퍼블리싱 기준에 맞게 정리 및 안정화하는 작업을 진행했습니다.

작업 범위

• 기자가 작성한 HTML/CSS/JS 기반 인터랙션 UI 코드 정리 및 통합
• KBS의 보안 정책에 따라 외부 라이브러리 사용 최소화
• 지도 기능 등 필수 요소 외에는 모든 기능을 바닐라 자바스크립트로 구현
• 디자인 시스템에 맞게 PC/모바일을 분리하여 반응형 구현
• 모바일 페이지는 별도 레이아웃으로 제작하여 각 해상도별 UX 최적화
• 프로젝트 말미에 KBS 사무실에 직접 방문하여 기자 및 엔지니어와 함께 최종 점검
• KBS 자체 서버 환경에 맞춘 코드 커스터마이징 및 전달
• 기술 포인트 및 주안점:
• 외부 의존 없는 바닐라 자바스크립트 중심 개발
• 공공기관 특유의 보안 및 배포 제약에 최적화된 구조 설계
• PC와 모바일 각각에 맞춘 레이아웃 설계로 완전한 반응형 웹 구현
• 퍼블리셔 입장에서 전달받은 코드 구조 보완 및 실무 수준 정리
• 영상, 텍스트, 지도, 인터랙션 등 다양한 콘텐츠 타입을 유기적으로 연결
• 본 프로젝트는 단순한 정적 페이지 제작을 넘어, 콘텐츠 제작자와의 협업 속에서 완성도를 높이고 전달력을 강화한 퍼블리싱 사례였습니다.
• 실제 기자들이 작성한 인터랙션 코드를 기반으로, 퍼블리셔로서 구조와 동작을 정리해 안정화한 경험은 퍼블리싱 유연성과 기술 소통 능력을 모두 활용한 기회였습니다.
• 해당 웹사이트는 정식 오픈 후 KBS 데이터저널리즘팀이 ‘이달의 기자상’을 수상하며 사회적 반향을 얻었습니다.
• HTML5, CSS3, JavaScript (Vanilla JS 기반 개발)
• 반응형 웹 구현 (PC/모바일 전용 레이아웃 분리)?
• 제한된 외부 라이브러리 환경에서의 성능 최적화

주안점

• 외부 의존 없는 바닐라 자바스크립트 중심 개발
• 공공기관 특유의 보안 및 배포 제약에 최적화된 구조 설계
• PC와 모바일 각각에 맞춘 레이아웃 설계로 완전한 반응형 웹 구현
• 퍼블리셔 입장에서 전달받은 코드 구조 보완 및 실무 수준 정리
• 영상, 텍스트, 지도, 인터랙션 등 다양한 콘텐츠 타입을 유기적으로 연결

포트폴리오 소개

한국정보통신협회의 캠페인 '내 손안의 표준' 소개 페이지 퍼블리싱을 진행했습니다. 디자이너의 시안을 100% 웹페이지로 구현하여, 각 버튼을 클릭하면 관련 콘텐츠가 팝업으로 표시되는 구조로 설계했습니다.

작업 범위

• 웹페이지 퍼블리싱
• 버튼 클릭 시 팝업 콘텐츠 구현
• 디자인 시안 100% 반영
• 반응형 웹 최적화

주요 업무

• 디자이너 시안의 정확한 구현
• HTML, CSS, JavaScript를 통한 팝업 콘텐츠 구성
• 크로스 브라우징 및 반응형 최적화

주안점

• 디자인 시안과의 일치성
• 직관적이고 매끄러운 사용자 경험
• 빠른 로딩 속도와 최적화된 코드 구조

포트폴리오 소개

해당 프로젝트는 아티스트 중심의 콘텐츠 플랫폼으로, 다양한 아티스트들의 프로필, 관련 기사, 디스코그래피 등을 효율적으로 등록하고 열람할 수 있는 커스터마이징형 워드프레스 기반 웹사이트입니다.
최초 제작은 2017년에 진행되었으며, 2018년에는 보다 직관적이고 심플한 사용자 경험을 위해 전반적인 리디자인이 이루어졌습니다. 이후에도 오디션 시스템, 매거진 제작 도구, 프로필 편집 UI 등 다양한 기능들을 플러그인 형태로 확장하며 고도화를 이어왔습니다.

작업 범위

• 워드프레스 기반 초기 웹사이트 설계 및 제작
• 아티스트 프로필, 기사, 디스코그래피 등 콘텐츠 구조 설계
• 커스텀 플러그인 개발 (오디션 시스템, 매거진 제작 툴, 프로필 에디터 등)
• 관리자 편집 UI 개선 (React 기반)
• 사이트 개편 및 디자인 리뉴얼
• 데이터 마이그레이션 및 구조 개선

주요 업무

• 1. 아티스트 콘텐츠 분류 구조 (Custom Post Type & Taxonomy)
• 아티스트들을 분야별 / 그룹별로 분류하고, 각 아티스트에 연결된 기사, 음반 정보(디스코그래피)를 함께 관리할 수 있도록 CPT(Custom Post Type)와 커스텀 택소노미를 활용했습니다. 이 구조를 통해 콘텐츠의 조직력과 검색 편의성을 모두 확보했습니다.
• 2. 사용자 친화적인 프로필 에디터
• 기본 워드프레스 에디터로는 복잡한 프로필 페이지 구성(텍스트 + 이미지 + 커스텀 필드 조합)이 어려워,
• 데이터를 처리하는 Parser와
• 사용자에게 보여주는 Renderer를 별도 설계하였고,
• 에디팅 UI는 React 기반의 커스텀 편집창으로 제작하여, 비개발자 관리자도 직관적으로 프로필을 작성/수정할 수 있게 했습니다.
• 3. 글로벌 오디션 지원 시스템
• 단일 오디션이 아닌 정기/글로벌 오디션을 병행 운영할 수 있도록 설계했으며,
• 지원자는 오디션을 선택하여 지원서를 제출하고,
• 오디션 영상도 함께 업로드할 수 있습니다.
• 관리자는 워드프레스 관리자 페이지에서 지원자 정보와 영상을 열람하고, 점수 부여 및 상태 분류(합격/불합격/보류)를 손쉽게 수행할 수 있게 했습니다.
• 4. 매거진 제작 툴 (WYSIWYG 기반)
• 당시 국내 웹사이트에서는 드물던 HTML5 contenteditable 기술을 이용해, 관리자들이 직접 페이지 상에서 텍스트, 이미지 등을 실시간으로 편집하고 저장할 수 있는 매거진 에디터를 구현했습니다. 마치 워드처럼 콘텐츠를 구성할 수 있어 비전문가도 손쉽게 매거진 페이지를 제작할 수 있습니다.
• 아티스트 관련 굿즈를 업로드하고 팬들이 열람 및 주문할 수 있는 샵 기능도 포함되어 있었으며, 온라인 결제 기능은 제외하고 단순 주문 접수 기능만 제공했습니다.

주안점

• 콘텐츠 관리자(비개발자)도 쉽게 운영할 수 있도록 직관적인 UI를 설계했습니다.
• 워드프레스의 기본 기능을 최대한 활용하면서도 부족한 부분은 직접 플러그인 형태로 확장해 유지보수가 편리하도록 했습니다.
• 구조화된 데이터 관리(CPT, Taxonomy)로 콘텐츠의 확장

포트폴리오 소개

프로젝트 상세

포트폴리오 소개

SK Telecom 매장 디스플레이 상담・주문 플랫폼은 SK Telecom 강북지사를 중심으로 매장 운영자, VMD(Visual Merchandising Designer), 강북지사 3자 간 디스플레이 상담 및 물품 주문 과정을 효율적으로 연결하는 전용 플랫폼입니다. 프로젝트의 A to Z를 소속 회사가 수주하였고, 그 중 개발 파트를 전담하여 플랫폼의 설계 및 구축을 담당했습니다.

작업 범위

• 플랫폼 전체 기획・설계・개발
• 매장 운영자・VMD・지사 담당자 3자 역할 기반 시스템 구축
• 상담(문의 및 제안) + 커머스(물품 주문・발주) 프로세스 통합 개발
• 플랫폼 내 정보 흐름(상담→상품 주문) 유기적 연결
• 관리자 페이지 커스터마이징 및 최적화

주요 업무

• 매장 운영자와 VMD 간 상담 요청・응답 기능 구현
• 상담 내용(매장 사진, 위치, 상황 정보 등) 메타데이터화하여 상담 효율성 극대화
• 상담 제안과 상품 주문을 연결해, 운영자가 제안 상품을 바로 장바구니에 담을 수 있는 기능 개발
• 매장 운영자가 주문한 물품 정보를 강북지사가 확인하고 발주할 수 있도록 주문 프로세스 설계
• 결제 시스템은 제외하고, 주문 및 발주까지의 흐름에 집중하여 설계・구축

주안점

• 비즈니스 흐름 최적화: VMD의 제안→운영자의 상품 주문→지사의 발주까지 끊김 없이 이어지는 프로세스를 설계해, VMD 한 명이 여러 매장을 효율적으로 상담・관리할 수 있도록 지원했습니다.
• 사용자 편의성 강화: 매장별 상황(사진, 위치, 요청사항 등)을 직관적으로 파악할 수 있도록 메타정보를 정리해 상담의 품질과 속도를 높였습니다.
• 유기적 상담・커머스 연동: 상담 제안에 바로 상품 연결이 가능해, 매장 운영자의 구매 편의성을 높이고, 실제 발주까지 이어지는 비즈니스 전환율을 고려해 설계했습니다.
• 처음 화면입니다. 플랫폼은 로그인 후에 이용할 수 있습니다.
• 현 플랫폼에 대한 설명입니다.
• 매장정보를 입력하는 화면입니다. VMD가 이 내용을 바탕으로 컨설팅을 진행하기 때문에, 정확한 정보와 사진 입력이 중요합니다.
• 원하는 판촉 컨셉을 선택합니다. VMD가 이 컨셉 아래에서 컨설팅을 진행합니다.

포트폴리오 소개

한양대학교 컴퓨터공학과의 과제 제출 및 자동 채점 시스템을 기획·개발한 프로젝트입니다. Ruby on Rails 기반으로 구축하였으며, 비용 효율을 위해 Twitter Bootstrap Design System을 그대로 적용하되, 학생이 손쉽게 과제를 제출하고 교수가 작성한 Lua 스크립트를 통해 자동으로 채점·점수 기록이 이루어지는 구조로 설계하였습니다.

작업 범위

• Ruby on Rails 기반 웹 애플리케이션 전체 설계 및 구현
• Twitter Bootstrap을 활용한 전체 UI 제작

주요 업무

• 교수가 기한을 설정한 프로젝트(과제)를 웹사이트에 게시하면, 해당 수업에 등록된 학생에게 N회의 제출 기회가 부여되는 워크플로우 구현
• 학생이 과제를 제출하면 교수가 사전 설정한 Lua 스크립트를 통해 백그라운드에서 자동 채점이 진행되고, 완료 후 점수가 웹사이트에 실시간 반영되는 비동기 채점 파이프라인 구축
• 컴파일 에러 및 시스템 에러 발생 시, 보안에 민감한 시스템 정보는 필터링하고 학생에게 필요한 에러 메시지만 선별 제공하는 샌드박스 환경 설계
• 한양대학교 컴퓨터공학과 3·4학년 재학생 대상 실제 운영
• 채점과 검수를 담당하는 조교를 대상으로 오프라인 시연 및 온라인 매뉴얼 제공

주안점

• 심플하면서도 기능적 부족함이 없는 UI/UX 설계 — Bootstrap의 표준 컴포넌트를 활용하되, 학사 시스템에 최적화된 구조로 재구성
• 채점 작업의 비동기 처리 — 시간이 소요되는 자동 채점을 백그라운드에서 처리하면서, 사용자에게는 진행 상태에 대한 명확한 안내를 제공
• 보안과 편의 사이의 균형 — 컴파일/시스템 에러 중 해킹 여지가 있는 정보를 필터링하되, 학생이 디버깅에 필요한 핵심 정보는 유지
• 역할별 최적화된 경험 설계 — 교수·조교는 수업 등록, 학생 관리, 공지사항, 과제 등록, 채점 결과 열람을 간편하게 수행하고, 학생은 로그인 후 현재 과제를 확인하고, 파일을 업로드하면 일정 시간 경과 후 결과를 바로 확인할 수 있는 직관적 흐름 구현