프로젝트 배경
1) 문제점
- 기존 폰스킨 시장에서는 디자이너가 미리 제작해놓은 한정된 디자인만 구매할 수 있었습니다.
- 사용자들은 자신만의 개성을 표현하고 싶어하지만, 직접 디자인을 꾸미고 주문할 수 있는 방법이 없었습니다.
- 본인의 사진, 좋아하는 이미지, 원하는 문구 등을 활용해 세상에 하나뿐인 케이스를 만들고 싶은 사용자의 니즈가 충족되지 않았습니다.
2) 프로젝트 목표
- 웹과 모바일 환경에서 누구나 쉽게 사용할 수 있는 직관적인 디자인 에디터를 개발합니다.
- 스마트폰, 노트북, 태블릿 등 다양한 제품의 케이스 형태에 맞춰 정확한 인쇄 영역을 제공하고, 해당 영역 내에서 자유롭게 디자인을 꾸밀 수 있도록 합니다.
- 스티커, 테마 등 다양한 디자인 에셋을 카테고리별로 제공하여 디자인 작업을 더욱 풍성하게 지원합니다.
- 사용자가 주문을 완료하면 CMS 관리자 대시보드에서 해당 디자인의 고화질 인쇄 파일을 바로 다운로드할 수 있도록 합니다.
3) 주안점
- 드래그, 회전, 크기 조절, 레이어 관리 등 다양한 편집 기능을 제공하여 사용자가 원하는 대로 자유롭게 디자인할 수 있는 높은 자유도를 확보합니다.
- 사용자가 업로드한 이미지와 완성된 디자인 파일의 해상도를 유지하여 실제 인쇄 시에도 선명한 품질을 보장합니다.
- 복잡한 기능도 쉽게 사용할 수 있도록 직관적인 UI/UX를 설계하여 디자인 경험이 없는 사용자도 편리하게 이용할 수 있도록 합니다.
- 기존 폰스킨 시장에서는 디자이너가 미리 제작해놓은 한정된 디자인만 구매할 수 있었습니다.
- 사용자들은 자신만의 개성을 표현하고 싶어하지만, 직접 디자인을 꾸미고 주문할 수 있는 방법이 없었습니다.
- 본인의 사진, 좋아하는 이미지, 원하는 문구 등을 활용해 세상에 하나뿐인 케이스를 만들고 싶은 사용자의 니즈가 충족되지 않았습니다.
2) 프로젝트 목표
- 웹과 모바일 환경에서 누구나 쉽게 사용할 수 있는 직관적인 디자인 에디터를 개발합니다.
- 스마트폰, 노트북, 태블릿 등 다양한 제품의 케이스 형태에 맞춰 정확한 인쇄 영역을 제공하고, 해당 영역 내에서 자유롭게 디자인을 꾸밀 수 있도록 합니다.
- 스티커, 테마 등 다양한 디자인 에셋을 카테고리별로 제공하여 디자인 작업을 더욱 풍성하게 지원합니다.
- 사용자가 주문을 완료하면 CMS 관리자 대시보드에서 해당 디자인의 고화질 인쇄 파일을 바로 다운로드할 수 있도록 합니다.
3) 주안점
- 드래그, 회전, 크기 조절, 레이어 관리 등 다양한 편집 기능을 제공하여 사용자가 원하는 대로 자유롭게 디자인할 수 있는 높은 자유도를 확보합니다.
- 사용자가 업로드한 이미지와 완성된 디자인 파일의 해상도를 유지하여 실제 인쇄 시에도 선명한 품질을 보장합니다.
- 복잡한 기능도 쉽게 사용할 수 있도록 직관적인 UI/UX를 설계하여 디자인 경험이 없는 사용자도 편리하게 이용할 수 있도록 합니다.
프로젝트 성과
온라인 디자인 폰케이스 주문 시스템 도입
기존에 기 디자인된 케이스 뿐만 아니라 사용자가 직접 디자인한 케이스를 구입할 수 있는 판매채널 추가로 매출 증대 (매출액 비공개)
핵심 기능

이미지 에디팅 (캔버스 편집)
- 업로드한 이미지를 캔버스 위에서 드래그하여 위치를 자유롭게 조정할 수 있습니다.
- 핸들을 드래그하여 크기를 조절하고, 회전 핸들로 원하는 각도만큼 회전시킬 수 있습니다.
- 핸들을 드래그하여 크기를 조절하고, 회전 핸들로 원하는 각도만큼 회전시킬 수 있습니다.

스티커 & 테마 에셋 적용
- 플랫폼에서 제공하는 다양한 스티커와 테마를 카테고리별로 탐색하고 선택할 수 있습니다.
- 인기순/최신순 정렬과 좋아요 기능으로 원하는 에셋을 쉽게 찾아 적용할 수 있습니다.
- 인기순/최신순 정렬과 좋아요 기능으로 원하는 에셋을 쉽게 찾아 적용할 수 있습니다.

사용자 이미지 업로드
- JPG, PNG 형식의 이미지를 직접 업로드하여 나만의 디자인을 만들 수 있습니다.
- 제품별 권장 해상도를 안내하여 최적의 인쇄 품질을 보장합니다.
- 제품별 권장 해상도를 안내하여 최적의 인쇄 품질을 보장합니다.

텍스트 편집
- 다양한 폰트와 16가지 색상 중에서 선택하여 원하는 문구를 추가할 수 있습니다.
- 좌/중앙/우 정렬 설정으로 텍스트 배치를 자유롭게 조정할 수 있습니다.
- 좌/중앙/우 정렬 설정으로 텍스트 배치를 자유롭게 조정할 수 있습니다.

주문 관리 어드민
- 접수된 주문 내역을 조회하고 주문 상태를 관리할 수 있습니다.
- 각 주문별 고화질 인쇄용 파일을 다운로드하여 제작에 활용할 수 있습니다
- 각 주문별 고화질 인쇄용 파일을 다운로드하여 제작에 활용할 수 있습니다
진행 단계
기획
2022.01.
웹사이트 기획: 개발의 범위 확정 및 기존 중간개발된 프로젝트를 인수인계 받고 새로운 기능 추가에 대한 확정.
디자인
2022.02.
PC 웹 용 웹디자인 : 외부 디자인팀의 디자인을 받아 그대로 화면에 적용.
개발
2022.03.
Backend/Frontend 로 일정 구분하여 각각 Spring boot, Vue.js 로 웹사이트 제작.
테스트
2022.06.
고객사에 직접 테스트 링크를 전달하고 피드백 미팅을 통해 보완점을 다시 구현함.
런칭
2022.09.
네이버 클라우드에 서버호스팅 설정 후 런칭완료. 수정과 유지보수 대응.
프로젝트 상세
디자인 에디터 (Custom Studio)
삼성 전자 제품의 케이스와 스킨을 직접 디자인하고 주문할 수 있는 B2C 커스터마이징 플랫폼입니다. 스마트폰, 노트북, 태블릿, 버즈 등 다양한 제품을 캔버스 기반 에디터로 꾸밀 수 있습니다.
에디터 진입 및 기본 설정
삼성닷컴에서 상품을 선택하면 Custom Studio 에디터로 진입합니다. 먼저 제품 색상과 케이스/스킨 색상을 선택할 수 있으며, 노트북처럼 여러 면이 있는 제품은 최대 4개의 인쇄 영역을 탭으로 전환하며 각각 디자인할 수 있습니다.
상단 툴바 (7가지 도구)
색상 도구로 배경 및 케이스 색상을 변경하고, 액세서리 도구로 추가 악세서리를 선택할 수 있습니다. 스티커와 테마는 카테고리별 필터링, 인기순/최신순 정렬, 좋아요 기능을 제공합니다. 텍스트는 다양한 폰트와 16가지 색상 중에서 선택할 수 있고, 정렬(좌/중앙/우)도 설정할 수 있습니다. 이미지 업로드는 JPG/PNG를 지원하며 제품별 권장 해상도를 안내합니다. 랜덤 적용 버튼을 누르면 무작위 디자인이 생성됩니다.
좌측 사이드바 (편집 도구)
선택한 요소를 세밀하게 조정할 수 있습니다. Undo/Redo로 작업을 취소하거나 다시 실행하고, 상하좌우 및 중앙 정렬이 가능합니다. 90도 단위 회전, 좌우/상하 반전, 복사, 삭제 기능도 제공됩니다.
우측 레이어 패널
추가된 모든 요소(텍스트, 스티커, 테마, 이미지)를 레이어로 관리합니다. 각 레이어별로 숨김/표시, 잠금/해제, 삭제, 순서 변경이 가능합니다. 이미지 레이어 선택 시 투명도 조절(10~100%)과 패턴 적용 기능도 제공되며, 패턴의 가로/세로 칼럼 수를 조절할 수 있습니다.
미리보기 및 공유
완성된 디자인을 미리보기 화면에서 확인하고, Facebook, 카카오톡, Instagram으로 공유할 수 있습니다.
주문 프로세스
구매 버튼을 클릭하면 전화번호 입력 모달이 표시됩니다. 개인정보 수집 동의와 카카오톡 알림 수신 동의 후 주문이 생성되고, 디자인 이미지가 서버에 업로드됩니다. 이후 삼성닷컴 구매 페이지로 자동 이동하여 실제 결제를 진행합니다.
삼성 전자 제품의 케이스와 스킨을 직접 디자인하고 주문할 수 있는 B2C 커스터마이징 플랫폼입니다. 스마트폰, 노트북, 태블릿, 버즈 등 다양한 제품을 캔버스 기반 에디터로 꾸밀 수 있습니다.
에디터 진입 및 기본 설정
삼성닷컴에서 상품을 선택하면 Custom Studio 에디터로 진입합니다. 먼저 제품 색상과 케이스/스킨 색상을 선택할 수 있으며, 노트북처럼 여러 면이 있는 제품은 최대 4개의 인쇄 영역을 탭으로 전환하며 각각 디자인할 수 있습니다.
상단 툴바 (7가지 도구)
색상 도구로 배경 및 케이스 색상을 변경하고, 액세서리 도구로 추가 악세서리를 선택할 수 있습니다. 스티커와 테마는 카테고리별 필터링, 인기순/최신순 정렬, 좋아요 기능을 제공합니다. 텍스트는 다양한 폰트와 16가지 색상 중에서 선택할 수 있고, 정렬(좌/중앙/우)도 설정할 수 있습니다. 이미지 업로드는 JPG/PNG를 지원하며 제품별 권장 해상도를 안내합니다. 랜덤 적용 버튼을 누르면 무작위 디자인이 생성됩니다.
좌측 사이드바 (편집 도구)
선택한 요소를 세밀하게 조정할 수 있습니다. Undo/Redo로 작업을 취소하거나 다시 실행하고, 상하좌우 및 중앙 정렬이 가능합니다. 90도 단위 회전, 좌우/상하 반전, 복사, 삭제 기능도 제공됩니다.
우측 레이어 패널
추가된 모든 요소(텍스트, 스티커, 테마, 이미지)를 레이어로 관리합니다. 각 레이어별로 숨김/표시, 잠금/해제, 삭제, 순서 변경이 가능합니다. 이미지 레이어 선택 시 투명도 조절(10~100%)과 패턴 적용 기능도 제공되며, 패턴의 가로/세로 칼럼 수를 조절할 수 있습니다.
미리보기 및 공유
완성된 디자인을 미리보기 화면에서 확인하고, Facebook, 카카오톡, Instagram으로 공유할 수 있습니다.
주문 프로세스
구매 버튼을 클릭하면 전화번호 입력 모달이 표시됩니다. 개인정보 수집 동의와 카카오톡 알림 수신 동의 후 주문이 생성되고, 디자인 이미지가 서버에 업로드됩니다. 이후 삼성닷컴 구매 페이지로 자동 이동하여 실제 결제를 진행합니다.












