카페24 자사몰 맞춤형 웹 디자인 및 퍼블리싱 개발

프로젝트 개요

• 가습청정기 자사몰 카페24 스킨 커스텀 및 웹 디자인 구축

프로젝트 배경 및 목표

• 현재 카페24 템플릿을 활용하여 기초적인 레이아웃이 구축된 임시 자사몰을 하이엔드 가전 브랜드 이미지에 부합하도록 시각적으로 고도화하고자 합니다. 백엔드 개발적인 수정을 최소화하는 범위 내에서 제공된 4개의 글로벌 브랜드 레퍼런스의 레이아웃 구조를 분석 및 적용하여, 제품의 기술력과 브랜드 철학이 고객에게 효과적으로 전달되는 웹사이트를 구축하는 것이 목표입니다.

아래 레이아웃으로 기본적인 사이트를 구축해두었습니다.

<a href="https://cueairwasher.co.kr/" target="_blank">https://cueairwasher.co.kr/

/a

이 사이트 기준하여 전체적인 웹 디자인을 진행하고자 합니다.

과업 범위

1. 수행 범위

• UI/UX 디자인
• 프런트엔드/Client 개발 (카페24 스킨 퍼블리싱)
• 시각 브랜딩 및 촬영 톤앤매너 기획

2. 상세 기능 요구 사항

2-1. 메인 홈 디자인 및 퍼블리싱

• 로보락, 뱅앤올룹슨, 알고케어 웹사이트 구조 분석 및 자사몰 메인 페이지 레이아웃 적용
• 가습청정기 제품 특장점을 강조하는 메인 배너 및 섹션별 UI 구성
• 기존 카페24 기능(로그인, 장바구니, 결제) 연동 유지 및 디자인 톤앤매너 일치화 작업

2-2. Tech 설명 페이지 디자인 및 퍼블리싱

• 가습청정기 핵심 기술력 및 실험실 데이터 시각화 정보 전달형 UI 구성

2-3. About Us 페이지 디자인 및 퍼블리싱

• 나무 심기 활동 친환경 ESG 및 브랜드 스토리 정보 시각화 구성

2-4. 비전 페이지 디자인 및 퍼블리싱

• 브랜드 비전 및 향후 방향성 안내 UI 구성

2-5. 미촬영 이미지 톤앤매너 디렉팅

• 실험실 촬영컷 연출을 위한 조명, 구도, 소품 기획 가이드라인 문서 작성
• 나무 심는 활동컷 연출을 위한 야외 채광, 인물 구도 기획 가이드라인 문서 작성

기술/제조 스택

• HTML, CSS, JavaScript, Cafe24

지원 자격 및 우대 사항

1. 지원 자격

• 카페24 스마트디자인 기반 스킨 커스텀 및 퍼블리싱 프로젝트 수행 이력을 보유한 기업 또는 개인
• 단순 퍼블리싱을 넘어 제품 촬영 디렉팅 및 시각적 브랜딩 기획 역량을 보유한 자

2. 우대 사항

• 하이엔드 가전제품 또는 라이프스타일 브랜드 자사몰 디자인 구축 경험을 보유한 자

산출물

• 웹 디자인 원본 파일
• 카페24 적용 완료된 프론트엔드 퍼블리싱 소스 코드
• 추가 촬영(실험실, 야외 활동) 톤앤매너 기획 가이드라인 문서

참고 사이트

• 제품: <a href="https://www.youtube.com/watch?v=4LLarfHiFJU" target="_blank">https://www.youtube.com/watch?v=4LLarfHiFJU

/a

• <a href="https://kr.roborock.com/?gad_source=1&gad_campaignid=9806974205&gbraid=0AAAAACcfBEprPTQWs_oQyAoiQz73OXR_B&gclid=CjwKCAjwsfzSBhB5EiwAOGyqSTDcXtYFgMc268CILcp6ImwfQQtwxxNhrsdg-NeA_2JcnJrjbLOvCxoC9IQQAvD_BwE" target="_blank">https://kr.roborock.com/?gad_source=1&gad_campaignid=9806974205&gbraid=0AAAAACcfBEprPTQWs_oQyAoiQz73OXR_B&gclid=CjwKCAjwsfzSBhB5EiwAOGyqSTDcXtYFgMc268CILcp6ImwfQQtwxxNhrsdg-NeA_2JcnJrjbLOvCxoC9IQQAvD_BwE

/a

• <a href="https://brand.naver.com/bang-olufsen" target="_blank">https://brand.naver.com/bang-olufsen

/a

• <a href="https://www.algocare.ai/" target="_blank">https://www.algocare.ai/

/a

• <a href="https://arcteryx.co.kr/shop/epe-fabric" target="_blank">https://arcteryx.co.kr/shop/epe-fabric

/a

• <a href="https://layere.com/pages/sustainability" target="_blank">https://layere.com/pages/sustainability

/a

• <a href="https://www.beconx.com/ko/service/skin-analysis" target="_blank">https://www.beconx.com/ko/service/skin-analysis

/a