APLB · Cafe24 쇼핑몰 구축

문제

제공된 Cafe24 스킨의 상품·회원·주문 기능을 유지하면서 브랜드 콘텐츠에 맞게 메인과 상품·공통 화면을 바꿔야 했습니다.

제약

• 상품·회원·주문·결제 처리는 Cafe24 기능을 활용하고, 직접 담당한 범위는 스킨과 화면 구성·플러그인 설정입니다.
• APLB는 PC·모바일 화면을 나눈 적응형 작업입니다. 같은 회사에서 수행한 뉴트리딘의 반응형 제작과 구분합니다.

공개 업종

온라인 쇼핑몰

담당 범위

• 유엘코퍼레이션 디자인팀에서 약 2개월간 APLB 자사몰 화면 단독 구축
• 제공된 Cafe24 스킨의 메인·상품·공통 화면 마크업과 스타일 수정
• PC와 모바일 화면을 별도로 제작하는 적응형 구현
• Cafe24 네이버페이·카카오페이 플러그인 설정과 관련 UI 연결 확인

핵심 결정

• 기존 쇼핑 기능과 연결된 스킨 구조를 바탕으로 브랜드별 HTML·CSS를 수정
• HTML4 중심의 마크업을 HTML5 구조로 정리하고 공통 화면을 CSS·jQuery로 구현
• 간편결제는 Cafe24의 네이버페이·카카오페이 플러그인 설정과 관련 UI 연결 범위로 구성

구현

• 메인·상품·공통 화면을 브랜드 콘텐츠에 맞게 수정
• PC와 모바일용 화면을 각각 제작하고 기존 상품·회원·주문 기능과 연결
• 쇼핑몰 화면을 검수하고 운영 중 필요한 스킨 유지보수 담당

공개 가능한 화면

검증 방법

• 당시 작업 기록: PC·모바일 화면과 주요 브라우저에서 레이아웃·쇼핑몰 기능 검수
• 간편결제 담당 범위: Cafe24 플러그인 설정과 관련 화면의 연결 상태 확인
• 제작 기간·담당 범위는 당시 작업 기록을 기준으로 하며, 현재 공개 화면 전체를 개인 제작 결과로 보지 않습니다.

결과

• 기존 쇼핑 기능을 활용하면서 APLB 브랜드의 PC·모바일 자사몰 화면 구축

기술 기록과 근거

• APLB 제작 기간·담당 범위와 당시 작업 기록 (새 창)

사용 기술

• Cafe24
• HTML5
• CSS
• JavaScript
• jQuery