포트폴리오
소울이 기획·디자인·개발한 프로젝트입니다. 비슷한 서비스를 준비 중이라면 AI 상담에서 사례를 물어보세요.
PINOUT 핀아웃 디지털 액세서리 쇼핑몰 스킨
분야: 디자인 · 퍼블리싱 / 웹 / 쇼핑몰, 카페24, 반응형 참여 기간: 2026.10 관련 기술: 카페24 스마트디자인 Pro, HTML5, CSS3, JavaScript, 반응형 웹 [프로젝트 개요] 카페24 디자인센터에서 판매 중인 디지털 액세서리와 소형가전 반응형 스킨입니다. 충전기, 케이블, 이어폰, 키보드, 소형가전을 파는 브랜드를 위해 위쪽 기기 바에서 쓰는 기기를 고르면 몰 전체 카드에 호환 표시가 붙고, 카드마다 정격 셀 세 칸과 보증 기간이 나오도록 했습니다. 디지털 제품은 사진보다 숫자로 고른다는 점에 맞춰 비교표와 스펙 표, 보증과 수리 안내를 메인과 상세에 앞세웠습니다. 카페24 스마트디자인 Pro 기본 스킨의 모듈 구조는 그대로 두었습니다. [주요 기능] 1. 내 기기 바 - 기기 버튼 여섯 개 가운데 하나를 누르면 맞는 상품에는 노란 호환 표시, 맞지 않는 상품에는 회색 미지원 표시가 붙고 목록, 상세, 장바구니로 넘어가도 이어집니다. 2. 정격 셀 카드 - 카드 첫 줄에 모델명, 상품명 아래 출력, 포트, 무게 같은 정격 셀 세 칸, 가격 아래 보증 기간과 비교 체크를 둡니다. 3. 세 모델 비교 - 카드의 비교를 체크하면 비교 바에 쌓이고, 상세의 스펙 표를 읽어 와 한 표로 보여 주며 값이 다른 줄을 표시합니다. 4. 라인업 비교표 - 충전, 오디오, 데스크 탭마다 네 모델을 같은 줄에 놓고 출력, 포트, 크기, 무게, 보증, 가격을 견줍니다. 5. 내 기기에 맞나요 상세와 호환 필터 - 상세에서 기기를 고르면 맞는지와 충전 속도가 나오고, 목록에서는 내 기기 호환만 남기는 토글로 거릅니다. 스펙 표와 호환 표 틀을 함께 제공합니다. 6. 장바구니 호환 확인과 보증 수리 - 담은 상품의 호환을 다시 확인하고, 메인에 제품군별 보증 표와 수리 접수 단계, 시리얼 번호 입력 칸을 두어 상담 게시판으로 연결했습니다. [디자인] - 그래파이트와 신호 노랑 두 색으로 기기 상자 옆면 같은 인상을 냈고, 두 색은 CSS 변수로 바꿀 수 있습니다. - Pretendard 한 서체로 숫자와 스펙이 촘촘해도 또렷하게 읽히게 했습니다. [범위] - 메인, 상품 목록, 상품 상세, 장바구니, 주문, 회원가입, 로그인, 게시판까지 전 페이지 디자인 - PC·모바일 한 벌로 맞추는 반응형, 모바일 하단 탭 메뉴 - 관리자에서 배너, 메인 진열, 분류를 바꾸면 화면에 그대로 반영되도록 카페24 모듈 연결 - 업종에 맞춘 분류 구조와 상품 진열 세팅
DAMGYEOL 담결 주방 생활용품 쇼핑몰 스킨
분야: 디자인 · 퍼블리싱 / 웹 / 쇼핑몰, 카페24, 반응형 참여 기간: 2026.09 ~ 2026.10 관련 기술: 카페24 스마트디자인 Pro, HTML5, CSS3, JavaScript, 반응형 웹 [프로젝트 개요] 카페24 디자인센터에서 판매 중인 주방 생활용품 반응형 스킨입니다. 그릇, 조리도구, 수납, 욕실 소품처럼 종류가 많은 살림을 파는 몰을 위해 분류 바로가기와 순위가 붙은 베스트 탭으로 금방 찾고, 사진 속 공간에서 바로 담도록 메인을 짰습니다. 상세는 소재와 용량을 먼저 보여 주고, 장바구니와 회원, 게시판 화면까지 메인과 같은 톤으로 맞췄습니다. 카페24 스마트디자인 Pro 기본 스킨의 모듈 구조는 그대로 두었습니다. [주요 기능] 1. 배너 상품 칩과 분류 바로가기 - 배너 장면에 쓰인 상품을 칩으로 붙여 바로 상세로 보내고, 그 아래 분류 바로가기로 주방, 식기, 수납, 욕실에 바로 들어갑니다. 2. 순위가 붙은 베스트 탭 - 진열 이름이 그대로 탭 이름이 되어 몰의 분류대로 바꿔 쓸 수 있습니다. 3. 기획전과 공간 스타일링 - 주제 한 장에 상품 세 개를 함께 놓아 세트로 담기 쉽게 하고, 공간 사진 위 점을 누르면 그 자리에 놓인 상품이 카드로 나옵니다. 4. 소재와 용량이 먼저 보이는 상세 - 상품명 아래 소재와 용량 한 줄, 할인율과 가격, 배송비, 수량, 구매 버튼을 한 화면에 두고 본문은 사용 장면, 포인트 세 가지, 관리 방법 순서로 이어집니다. 5. 결제 정보가 따라오는 장바구니 - 상품을 한 줄로 정리하고 결제 정보 카드가 스크롤을 따라오며, 아래에 함께 담기 좋은 상품을 붙였습니다. 6. 살림 후기와 같은 톤의 회원 화면 - 사진과 별점, 구매 상품이 한 카드에 들어간 후기와 로그인, 회원가입, 공지사항, 검색 결과까지 같은 글꼴과 간격으로 맞췄습니다. [디자인] - 흰 바탕과 따뜻한 회색 면에 테라코타 한 색을 할인율과 순위, 혜택 띠에만 써서 살림 사진이 돋보이게 했습니다. - Pretendard 한 서체로 화면이 빨리 뜨고 색과 여백은 CSS 맨 위 변수 한 곳에서 바꿀 수 있습니다. [범위] - 메인, 상품 목록, 상품 상세, 장바구니, 주문, 회원가입, 로그인, 게시판까지 전 페이지 디자인 - PC·모바일 한 벌로 맞추는 반응형, 모바일 하단 탭 메뉴 - 관리자에서 배너, 메인 진열, 분류를 바꾸면 화면에 그대로 반영되도록 카페24 모듈 연결 - 업종에 맞춘 분류 구조와 상품 진열 세팅
HALEWELL 헤일웰 영양제 건강기능식품 쇼핑몰 스킨
분야: 디자인 · 퍼블리싱 / 웹 / 쇼핑몰, 카페24, 반응형 참여 기간: 2026.09 ~ 2026.10 관련 기술: 카페24 스마트디자인 Pro, HTML5, CSS3, JavaScript, 반응형 웹 [프로젝트 개요] 카페24 디자인센터에서 판매 중인 영양제와 건강기능식품 반응형 스킨입니다. 패키지 사진이 주인공인 상품 카드에 하루 단가를 자동으로 붙이고, 목적별 찾기와 드시는 분별 찾기, 정기구독 안내, 원료 이야기까지 메인 하나에 담았습니다. 흰 바탕에 헤일웰 그린 한 색만 포인트로 써서 깨끗한 인상을 냈습니다. 카페24 스마트디자인 Pro 기본 스킨의 모듈 구조는 그대로 두고 화면 마크업과 스타일을 새로 짰습니다. [주요 기능] 1. 패키지가 주인공인 카드 - 정사각 사진 칸에 병과 상자를 크게 두고 제품마다 다른 파스텔 색이 바탕을 받쳐 줍니다. 카드마다 담기 버튼이 있어 목록에서 바로 장바구니에 넣습니다. 2. 하루 단가 자동 표시 - 상품 간략설명에 일수를 적으면 판매가를 나눈 하루 금액이 카드와 상세에 자동으로 붙습니다. 3. 목적별, 대상별 찾기 - 피로, 눈, 장 같은 목적 버튼과 여성, 남성, 부모님, 아이 카드로 제품을 찾습니다. 4. 이달의 제품과 정기구독 - 색면 사진 위에 함량, 일수, 하루 금액 세 숫자를 올리고, 배송 주기와 할인, 회차, 변경과 해지 조건을 표 한 장으로 안내합니다. 5. 가격 옆에서 보는 상세 - 큰 패키지 사진과 할인율, 판매가, 배송비와 무료배송 기준, 가입 혜택을 한 화면에 두고 구매 버튼 아래 건강기능식품 표시 문구 자리를 마련했습니다. 6. 무료배송 막대 장바구니 - 장바구니 맨 위에 무료배송까지 남은 금액 막대를, 오른쪽에 결제 예정 금액 상자를 고정했습니다. [디자인] - 흰 바탕과 옅은 회색 교대 면에 헤일웰 그린 한 색을 혜택 띠와 할인율, 주 버튼에 썼습니다. - Pretendard 한 서체로 숫자와 표시 문구가 또렷하게 읽히게 했습니다. [범위] - 메인, 상품 목록, 상품 상세, 장바구니, 주문, 회원가입, 로그인, 게시판까지 전 페이지 디자인 - PC·모바일 한 벌로 맞추는 반응형, 모바일 하단 탭 메뉴 - 관리자에서 배너, 메인 진열, 분류를 바꾸면 화면에 그대로 반영되도록 카페24 모듈 연결 - 업종에 맞춘 분류 구조와 상품 진열 세팅
POSTER COLOR 포스터컬러 색조 화장품 쇼핑몰 스킨
분야: 디자인 · 퍼블리싱 / 웹 / 쇼핑몰, 카페24, 반응형 참여 기간: 2026.09 ~ 2026.10 관련 기술: 카페24 스마트디자인 Pro, HTML5, CSS3, JavaScript, 반응형 웹 [프로젝트 개요] 카페24 디자인센터에서 판매 중인 색조 화장품 반응형 스킨입니다. 립, 치크, 아이, 베이스를 셰이드 이름으로 파는 색조 브랜드를 위해 토마토 레드, 코발트, 라임 세 색면에 굵은 검정 선을 둘러 스크롤만 해도 구역이 나뉘게 했습니다. 카드마다 셰이드 칩과 스티커 라벨을 붙이고 상세에서는 색 버튼으로 셰이드를 고르게 해, 손님이 처음 묻는 무슨 색이 있는지를 화면이 먼저 답합니다. 카페24 스마트디자인 Pro 기본 스킨의 모듈 구조는 그대로 두었습니다. [주요 기능] 1. 셰이드가 보이는 카드 - 사진 위 스티커 라벨에 대표 셰이드 번호와 이름, 사진 아래 색 막대, 가격 아래 셰이드 칩 줄과 색 개수를 붙였습니다. 2. 색 버튼 상세 - 기본 옵션 목록을 색 사각과 이름이 붙은 버튼으로 다시 그렸고, 고르면 큰 사진 위 스티커가 그 색으로 바뀝니다. 재고와 품절, 추가금액은 카페24 기능 그대로 동작합니다. 3. 톤으로 찾는 색 - 파랑 색면 위 톤 버튼 셋과 종류 버튼으로 쿨톤, 웜톤, 뉴트럴에 맞는 상품만 남깁니다. 4. 발색 밴드와 카테고리 색면 타일 - 라임 머리 아래 텍스처 사진 다섯 칸에 셰이드 스티커와 제형 라벨을 붙이고, 첫 화면 아래 립, 치크, 아이, 베이스를 색면 네 칸으로 연결했습니다. 5. 신상 드롭과 룩 - 이번 달 새 색을 드롭 배너로 알리고, 입술, 볼, 눈에 쓴 세 색을 한 세트로 보여 주며 합계 금액을 자동으로 계산합니다. 6. 같은 색, 같은 선의 장바구니 - 무료배송까지 남은 금액 막대와 담은 상품의 셰이드, 결제 요약 판을 두고 로그인, 회원가입, 게시판, 주문서도 같은 선과 글꼴로 맞췄습니다. [디자인] - 토마토 레드, 코발트, 라임 세 색면과 굵은 검정 선으로 포스터 같은 인상을 냈고, 세 색과 선 굵기는 CSS 변수로 바꿀 수 있습니다. - 한글과 본문은 Pretendard, 영문 워드마크와 제목은 Archivo입니다. [범위] - 메인, 상품 목록, 상품 상세, 장바구니, 주문, 회원가입, 로그인, 게시판까지 전 페이지 디자인 - PC·모바일 한 벌로 맞추는 반응형, 모바일 하단 탭 메뉴 - 관리자에서 배너, 메인 진열, 분류를 바꾸면 화면에 그대로 반영되도록 카페24 모듈 연결 - 업종에 맞춘 분류 구조와 상품 진열 세팅
HAEON 해온 여성 데일리웨어 쇼핑몰 스킨
분야: 디자인 · 퍼블리싱 / 웹 / 쇼핑몰, 카페24, 반응형 참여 기간: 2026.09 ~ 2026.10 관련 기술: 카페24 스마트디자인 Pro, HTML5, CSS3, JavaScript, 반응형 웹 [프로젝트 개요] 카페24 디자인센터에서 판매 중인 여성 데일리웨어 반응형 스킨입니다. 매일 입는 옷을 파는 몰을 위해 모델 컷이 주인공이 되도록 여백을 넉넉히 두고, 배너 속 착용 상품부터 베스트, 신상품, 기획전, 룩북, 착용 후기까지 옷이 먼저 보이는 순서로 메인을 짰습니다. 카페24 스마트디자인 Pro 기본 스킨의 모듈 구조는 그대로 두고 화면 마크업과 스타일을 새로 짜서, 로그인부터 장바구니, 게시판까지 메인과 같은 톤으로 맞췄습니다. [주요 기능] 1. 배너 착용 상품 - 메인 배너에 모델이 입은 상품을 카드로 붙여 바로 상세로 이어집니다. 2. 옷이 먼저 보이는 메인 구성 - 베스트 탭, 신상품, 기획전, 코디 한 벌의 상품을 함께 보여 주는 룩북, 사진과 별점, 구매 상품이 한 카드에 담긴 착용 후기가 차례로 놓입니다. 3. 바로 담기는 상세 - 색상은 칩으로, 사이즈는 버튼으로 고르고 넘겨 보는 썸네일과 수량, 구매 버튼이 한 화면에 들어옵니다. 휴대폰에서는 구매 버튼이 화면 아래에 고정됩니다. 4. 카드형 장바구니 - 상품은 카드로 보이고 결제 예정 금액 상자가 스크롤을 따라 내려옵니다. 휴대폰에서는 주문 막대가 아래에 고정됩니다. 5. 로그인부터 게시판까지 같은 톤 - 로그인, 회원가입, 마이쇼핑, 상품 후기, 검색 결과 화면도 메인과 같은 글꼴과 간격으로 맞췄습니다. 6. 관리자에서 바꾸는 진열 - 메인진열 그룹에 상품을 넣으면 베스트, 신상품, 기획전, 룩북이 채워지고 비어 있는 영역은 자동으로 숨겨집니다. [디자인] - 흰 바탕과 따뜻한 회색 사진 칸에 벽돌빛 포인트 한 색을 할인과 순위에만 써서 옷 사진이 돋보이게 했습니다. - 한글과 본문은 Pretendard, 영문 제목은 Cormorant Garamond로 잡지 같은 인상을 냈습니다. [범위] - 메인, 상품 목록, 상품 상세, 장바구니, 주문, 회원가입, 로그인, 게시판까지 전 페이지 디자인 - PC·모바일 한 벌로 맞추는 반응형, 모바일 하단 탭 메뉴 - 관리자에서 배너, 메인 진열, 분류를 바꾸면 화면에 그대로 반영되도록 카페24 모듈 연결 - 업종에 맞춘 분류 구조와 상품 진열 세팅
SILLROOM 실룸 맞춤 커튼 패브릭 쇼핑몰 디자인
분야: 디자인 · 퍼블리싱 / 웹 / 쇼핑몰, 카페24, 반응형 참여 기간: 2026.10 관련 기술: 카페24 스마트디자인, HTML5, CSS3, JavaScript, 반응형 웹 [프로젝트 개요] 맞춤 커튼과 패브릭을 파는 동네 커튼 가게 같은 몰입니다. 첫 화면을 견적기로 만들어 창 크기와 원단, 주름 형태, 열림 방식을 고르면 필요한 폭 수와 완성 사이즈, 제작일, 예상 가격이 바로 나오게 했습니다. 아래로 많이 맞춘 커튼, 원단 견본 벽, 차광 단계 비교, 창 재는 법, 새 원단, 후기가 이어집니다. [주요 기능] 1. 맞춤 커튼 견적기 - 창 가로와 커튼 높이를 큰 숫자로 넣고 원단, 주름 형태, 주름 양, 열림 방향, 레일 포함 여부를 고르면 폭 수와 완성 사이즈, 제작일, 예상 가격이 바뀝니다. 2. 원단 견본 벽 - 원단 12종을 정사각 확대 사진으로 보여 주고 소재와 차광 단계, 원단 무게, 1폭 단가를 적었습니다. 누르면 견본 바구니에 다섯 장까지 담깁니다. 3. 차광 단계 비교 - 같은 창 사진에 1~4단계 어둡기를 겹쳐 나란히 비교합니다. 4. 창 재는 법 - 가로, 높이, 설치 위치 순서를 선 그림으로 보여 주고 방문 실측 신청으로 이어집니다. 5. 기준 사이즈 가격 카드 - 상품 카드에 원단 칩과 차광 막대, 기준 창 크기에서의 가격을 적고 후기 사진에는 실제 창 크기를 붙였습니다. [디자인] - 흰 바탕과 자두빛 도는 회색 면에 자두색 한 색을 혜택 띠와 할인율, 주 버튼, 차광 막대에 썼습니다. - 제목은 Gowun Batang, 본문과 화면 글자는 Pretendard입니다. - 견적 숫자와 예상 가격을 크게 써서 계산 결과가 먼저 읽히게 했습니다. [범위] - 메인 페이지 PC·모바일 반응형 디자인과 퍼블리싱 - 상품 카드는 반복 구조로 짜서 카페24 메인 진열 모듈로 옮길 수 있는 구조
LAMPHOUR 램프아워 조명 전문 쇼핑몰 디자인
분야: 디자인 · 퍼블리싱 / 웹 / 쇼핑몰, 카페24, 반응형 참여 기간: 2026.10 관련 기술: 카페24 스마트디자인, HTML5, CSS3, JavaScript, 반응형 웹 [프로젝트 개요] 스탠드, 펜던트, 전구를 파는 조명 전문 몰입니다. 어두운 바탕에 앰버 한 색을 써서 해 진 뒤의 거실을 떠올리게 했고, 색온도와 밝기, 소비전력, 연색성 숫자를 크게 보여 감으로 사지 않게 했습니다. 첫 화면 색온도 슬라이더 아래로 색온도로 고르기, 밝기 계산기, 전구 교체, 시간마다 다른 빛 장면, 후기가 이어집니다. [주요 기능] 1. 색온도 슬라이더 첫 화면 - 큰 K 숫자와 슬라이더를 두고, 밀면 숫자 색과 사진 속 빛 색, 아래 스펙 표가 함께 바뀝니다. 2. 색온도 눈금 - 색온도 그라데이션 막대 위에 상품 사진 원을 K값 자리에 놓고, 눈금이나 탭을 누르면 진열이 그 색온도로 걸러집니다. 3. 스펙 표 카드 - 상품 카드에 K, lm, W, Ra 네 칸과 색온도 칩, 디밍 표시를 붙였습니다. 4. 밝기 계산기 - 방 종류와 넓이를 고르면 필요한 밝기가 나오고 조명 조합 목록과 합계 가격, 조합 모두 담기 버튼이 이어집니다. 5. 시간마다 다른 빛 - 저녁 거실, 밤 침실, 아침 현관 장면마다 색온도와 쓰인 상품을 보여 줍니다. [디자인] - 어두운 바탕과 짙은 면에 앰버 한 색을 할인율과 순위, 주 버튼에 썼고 색온도 칩 네 색은 데이터 표시에만 씁니다. - IBM Plex Sans KR 한 서체로 가는 큰 숫자와 작은 스펙 글자를 나눴습니다. - 조명이 켜진 사진이 돋보이도록 선과 면을 낮은 대비로 맞췄습니다. [범위] - 메인 페이지 PC·모바일 반응형 디자인과 퍼블리싱 - 상품 카드는 반복 구조로 짜서 카페24 메인 진열 모듈로 옮길 수 있는 구조
DEULIM 들임 원목 가구 쇼룸 쇼핑몰 디자인
분야: 디자인 · 퍼블리싱 / 웹 / 쇼핑몰, 카페24, 반응형 참여 기간: 2026.10 관련 기술: 카페24 스마트디자인, HTML5, CSS3, JavaScript, 반응형 웹 [프로젝트 개요] 원목 가구를 쇼룸처럼 보여 주며 파는 가구 몰입니다. 첫 화면에 거실, 침실, 서재 장면을 크게 걸고 사진 속 가구마다 번호와 이름, 가격 라벨을 붙여 방 하나를 통째로 둘러보듯 고르게 했습니다. 아래로 많이 들인 가구, 장면 그대로 담기, 원목 고르기, 새로 들어온 가구, 쇼룸 방문 예약, 들인 집의 후기가 이어집니다. [주요 기능] 1. 장면 태그 - 공간 사진 위 번호 점과 흰 라벨에 가구 이름과 가격을 붙이고, 오른쪽 패널에 같은 번호 목록과 합계, 장면 세트가를 둡니다. 장면은 썸네일로 넘깁니다. 2. 장면 그대로 담기 - 다이닝 장면 사진 옆 체크 목록에서 가구를 고르면 선택 수와 정가 합계, 3점부터 10% 할인된 세트가가 바로 계산됩니다. 3. 원목 고르기 - 오크, 월넛, 애쉬를 색과 결, 경도 막대, 가격 차이, 수종별 상품 수로 비교합니다. 4. 쇼룸 방문 예약 - 7일 날짜 칩과 시간 칸, 미리 꺼내 둘 가구를 고르는 예약 칸입니다. 5. 수종과 치수 카드 - 상품 카드에 수종과 가로, 깊이, 높이 치수, 배송 방식을 함께 적었습니다. [디자인] - 흰 바탕과 옅은 회색 면에 월넛 한 색을 할인율과 번호, 주 버튼에 썼습니다. - Pretendard 한 서체로 쇼룸 이름표처럼 담백하게 적었습니다. - 공간 사진을 크게 쓰고 빨강 같은 강한 색은 넣지 않았습니다. [범위] - 메인 페이지 PC·모바일 반응형 디자인과 퍼블리싱 - 상품 카드는 반복 구조로 짜서 카페24 메인 진열 모듈로 옮길 수 있는 구조
LASTLOT 라스트로트 한정 드롭 경매 쇼핑몰 디자인
분야: 디자인 · 퍼블리싱 / 웹 / 쇼핑몰, 카페24, 반응형 참여 기간: 2026.10 관련 기술: 카페24 스마트디자인, HTML5, CSS3, JavaScript, 반응형 웹 [프로젝트 개요] 한 번 나가면 다시 없는 한정 상품을 드롭과 경매로 파는 몰입니다. 흑백 사진과 빨강 한 색으로 경매 카탈로그와 한정판 드롭의 긴장감을 냈고, 첫 화면에 카운트다운과 남은 수량 칸을 크게 올렸습니다. 아래로 드롭 일정, 라이브 경매, 아직 남은 로트, 지난 드롭 기록, 드롭 규칙이 이어집니다. [주요 기능] 1. 카운트다운 띠 - 헤더 바로 아래 검정 띠 전체에 남은 시간을 빨간 큰 숫자로 띄우고 로트 번호와 열리고 닫히는 시각을 적었습니다. 2. 세 칸 첫 화면 - 왼쪽 상품명과 사양 표, 가격, 가운데 흑백 사진, 오른쪽 남은 수량 30칸 격자를 두었고 구매를 누르면 칸이 하나 꺼지며 결제 대기 시간이 표시됩니다. 3. 드롭 일정 - 큰 날짜 숫자와 로트 번호, 선착순, 추첨, 라이브 경매 방식 배지, 수량과 가격, 알림 신청을 한 줄씩 정리했습니다. 4. 라이브 경매 - 방송 화면 옆에 현재가와 남은 시간, 입찰 수, 입찰 단위 버튼, 입찰 기록을 두고 마감 직전 입찰 시 시간이 연장되는 규칙을 보여 줍니다. 5. 로트 카드 - 흑백 사진에 마우스를 올리면 컬러로 바뀌고 로트 번호 딱지와 남은 수량 눈금을 붙였습니다. 완판된 로트는 빨간 띠와 가격 취소선으로 표시합니다. [디자인] - 흰 바탕과 검정, 회색 단계에 빨강 한 색을 카운트다운과 남은 수량, 완판 표시에만 썼고 사진은 흑백으로 맞췄습니다. - 한글은 Pretendard, 숫자와 로트 번호, 로고는 Anton 콘덴스드입니다. - 로트 카드는 1px 선 격자로 붙여 경매 카탈로그처럼 정리했습니다. [범위] - 메인 페이지 PC·모바일 반응형 디자인과 퍼블리싱 - 상품 카드는 반복 구조로 짜서 카페24 메인 진열 모듈로 옮길 수 있는 구조
모아데이 MOADAY 쇼호스트 공동구매 쇼핑몰 디자인
분야: 디자인 · 퍼블리싱 / 웹 / 쇼핑몰, 카페24, 반응형 참여 기간: 2026.10 관련 기술: 카페24 스마트디자인, HTML5, CSS3, JavaScript, 반응형 웹 [프로젝트 개요] 쇼호스트가 유튜브 라이브로 공동구매를 여는 공구몰입니다. 상품보다 호스트를 믿고 사는 구조라 첫 화면에 호스트 사진과 이름을 크게 두고, 그 호스트가 연 공구의 가격과 참여 인원, 목표, 마감 시간을 함께 보여 줍니다. 아래로 진행 중 공구, 공구 달력, 호스트 소개, 곧 열리는 공구, 앵콜 요청, 공구 후기가 이어집니다. [주요 기능] 1. 호스트 첫 화면 - 왼쪽 큰 인물 사진과 이름, 라이브 시각 옆에 공구가와 목표 대비 참여 막대, 사은품 눈금, 마감 카운트다운, 출고 정보를 놓았습니다. 2. 공구 카드 - 사진 위 호스트 아바타 칩과 참여 막대, 참여 인원과 남은 날을 붙이고 오픈 예정 공구에는 오픈 일시와 알림 버튼을 둡니다. 3. 공구 달력 - 한 달 격자 위에 공구 기간을 가로 막대로 그려 진행 중, 예정, 마감을 구분하고 막대마다 호스트 얼굴을 붙였습니다. 모바일에서는 날짜순 목록으로 바뀝니다. 4. 호스트 카드 - 호스트별 분야와 다음 공구 일정, 팔로우 버튼을 보여 줍니다. 5. 앵콜 요청 - 지난 공구에 요청 수 막대를 붙이고 정한 인원이 모이면 같은 가격으로 다시 여는 구조입니다. [디자인] - 흰 바탕과 차가운 회색 면에 마젠타 한 색을 혜택 띠, 할인율, 참여 막대, 주 버튼에 썼습니다. - Pretendard 한 서체에 호스트 이름과 공구가만 아주 크게 키웠습니다. - 공구 카드는 반복 목록 구조로 짜서 진열 그룹으로 채울 수 있습니다. [범위] - 메인 페이지 PC·모바일 반응형 디자인과 퍼블리싱 - 상품 카드는 반복 구조로 짜서 카페24 메인 진열 모듈로 옮길 수 있는 구조
TAPTAG 탭태그 숏폼 영상 커머스 쇼핑몰 디자인
분야: 디자인 · 퍼블리싱 / 웹 / 쇼핑몰, 카페24, 반응형 참여 기간: 2026.10 관련 기술: 카페24 스마트디자인, HTML5, CSS3, JavaScript, 반응형 웹 [프로젝트 개요] 유튜브 숏폼으로 제품을 소개하고 파는 영상 커머스 몰입니다. 첫 화면을 9:16 세로 영상 레일로 채워 숏폼 앱을 연 것 같은 인상을 냈고, 영상 속 상품 태그와 카드 아래 가격을 함께 두었습니다. 아래로 영상에 나온 제품, 영상 세트 한 번에 담기, 이번 주 숏폼 랭킹, 새로 찍은 제품, 다음 숏폼 공개, 리뷰 숏폼이 이어집니다. [주요 기능] 1. 세로 숏폼 레일 - 9:16 영상 여섯 편을 가로로 놓고 재생 중인 카드에만 테두리와 진행 막대, 깜빡이는 태그 점을 붙였습니다. 2. 영상 속 상품 태그 - 영상 위 태그에 상품명과 가격을 적고 카드 아래에도 같은 상품의 썸네일과 할인율, 판매가를 둡니다. 3. 영상 등장 칩 - 상품 카드마다 이 상품이 몇 편의 영상, 몇 초에 나오는지 칩으로 붙였습니다. 4. 영상 세트 한 번에 담기 - 루틴 영상 한 편과 시각별 상품 네 개를 함께 보여 주고, 두 개 이상 담으면 10% 세트 합계가 다시 계산됩니다. 5. 숏폼 랭킹 - 영상을 보고 구매한 수를 기준으로 상위 다섯 편을 보여 줍니다. [디자인] - 어두운 바탕과 짙은 회색 면에 앰버 한 색을 할인율과 재생 표시, 태그 점, 주 버튼에만 썼습니다. - Pretendard 한 서체로 영상 위에서도 또렷하게 읽히게 했습니다. - 영상 카드는 9:16, 상품 카드는 반복 목록 구조로 짰습니다. [범위] - 메인 페이지 PC·모바일 반응형 디자인과 퍼블리싱 - 상품 카드는 반복 구조로 짜서 카페24 메인 진열 모듈로 옮길 수 있는 구조
놀칸 NOLKAN 보드게임 취미 키트 쇼핑몰 디자인
분야: 디자인 · 퍼블리싱 / 웹 / 쇼핑몰, 카페24, 반응형 참여 기간: 2026.10 관련 기술: 카페24 스마트디자인, HTML5, CSS3, JavaScript, 반응형 웹 [프로젝트 개요] 보드게임과 만들기 키트를 파는 취미 몰입니다. 게임판의 칸처럼 굵은 선으로 화면을 나누고 파스텔 네 색으로 칸을 채워 들뜬 분위기를 내되, 정보는 숫자로 또렷하게 적었습니다. 첫 화면에서 모이는 인원을 고르면 아래 찾기와 연결되고, 모든 카드에 인원, 시간, 나이, 난이도 네 칸을 붙였습니다. 보드게임, 만들기 키트, 모임 세트로 구성했습니다. [주요 기능] 1. 게임판 첫 화면 - 2px 선으로 나눈 다섯 칸에 이번 주 1위 게임과 가격, 오늘 모이는 인원 선택, 퍼즐과 뜨개 상품, 새로 들어온 상품을 넣었습니다. 2. 몇 명이서, 몇 분? - 인원과 시간 칸을 누르면 카드가 바로 걸러지고 남은 개수가 바뀝니다. 맞는 게임이 없으면 조건 풀기 버튼이 나옵니다. 3. 숫자 칸 상품 카드 - 사진 아래 인원, 시간, 나이, 난이도 네 칸을 아이콘 없이 숫자로만 적고 카드마다 칸 색을 달리했습니다. 4. 만들기 키트 카드 - 완성까지 걸리는 시간과 나이, 난이도, 재료 구성을 한 줄로 적었습니다. 5. 모임 세트와 플레이 기록 - 세트는 인원과 총 시간, 게임 수와 세트가를, 후기는 인원과 걸린 시간, 판 수를 칸으로 보여 줍니다. [디자인] - 흰 바탕과 잉크 칸 선에 라임, 살구, 하늘, 라일락 네 색을 칸에 채우고 빨강은 할인율에만 썼습니다. - 한글은 Pretendard, 숫자와 영문은 Bricolage Grotesque입니다. - 상품 카드는 1:1 비율에 모서리 없이 칸 선을 공유합니다. [범위] - 메인 페이지 PC·모바일 반응형 디자인과 퍼블리싱 - 상품 카드는 반복 구조로 짜서 카페24 메인 진열 모듈로 옮길 수 있는 구조
NINETEENTH 나인틴스 골프웨어 용품 쇼핑몰 디자인
분야: 디자인 · 퍼블리싱 / 웹 / 쇼핑몰, 카페24, 반응형 참여 기간: 2026.10 관련 기술: 카페24 스마트디자인, HTML5, CSS3, JavaScript, 반응형 웹 [프로젝트 개요] 골프웨어와 골프 용품을 파는 클럽하우스형 프로숍입니다. 가운데 로고와 세리프 메뉴, 네이비 한 색으로 회원제 클럽의 조용한 분위기를 냈고, 첫 화면 클럽하우스 사진 위 카드에 대표 상품을 올렸습니다. 아래로 이번 시즌 새로 들어온 것, 스윙 스피드로 고르는 볼, 이니셜 각인, 클럽하우스 드레스 코드, 선물하기 좋은 것이 이어집니다. 폴로, 니트, 슬랙스, 골프화, 볼캡, 볼, 선물 세트로 구성했습니다. [주요 기능] 1. 가운데 로고와 세리프 메뉴 - 왼쪽 밑줄 검색창, 가운데 워드마크, 아래 줄 명조 메뉴로 클럽하우스 간판 같은 헤더를 만들었습니다. 2. 클럽하우스 첫 화면 - 호수 너머 클럽하우스 사진 위 흰 카드에 대표 상품 한 줄을 넣어 첫 화면에서 상품이 보이게 했습니다. 3. 볼 스코어카드 - 스코어카드 모양 표에 스윙 스피드, 비거리, 압축, 스핀, 1더즌 가격을 적고 스피드 구간을 누르면 맞는 볼 줄이 강조됩니다. 4. 이니셜 각인 - 영문 세 글자와 문구, 서체, 색, 상품을 고르면 골프공 미리보기와 각인비 합계가 바로 바뀝니다. 5. 클럽하우스 드레스 코드 - 칼라 있는 상의, 청바지 피하기 같은 규칙마다 해당 상품과 가격을 연결했습니다. [디자인] - 네이비 한 색과 흰 바탕, 옅은 미스트 면으로 회원제 클럽의 정돈된 인상을 냈습니다. - 한글 제목은 Noto Serif KR, 영문과 숫자는 Cormorant Garamond, 본문과 가격은 Pretendard입니다. - 따로 포인트 색을 두지 않고 할인율과 버튼까지 네이비로 맞췄습니다. [범위] - 메인 페이지 PC·모바일 반응형 디자인과 퍼블리싱 - 상품 카드는 반복 구조로 짜서 카페24 메인 진열 모듈로 옮길 수 있는 구조
SUBFOUR 서브포 러닝 피트니스 쇼핑몰 디자인
분야: 디자인 · 퍼블리싱 / 웹 / 쇼핑몰, 카페24, 반응형 참여 기간: 2026.10 관련 기술: 카페24 스마트디자인, HTML5, CSS3, JavaScript, 반응형 웹 [프로젝트 개요] 대회를 준비하는 러너를 위한 러닝 피트니스 몰입니다. 사진을 평행사변형으로 잘라 화면 전체가 앞으로 기울어 달리는 느낌을 냈고, 첫 화면에 목표 페이스 숫자와 상품 세 개를 함께 올렸습니다. 아래로 많이 신은 기어, 페이스 계산기, 레이스 준비 기획전, 보강 운동 용품, 기록 인증 후기가 이어집니다. 러닝화, 러닝 의류, 보급품, 보강 운동 도구로 구성했습니다. [주요 기능] 1. 사선 첫 화면 - 평행사변형으로 자른 사진과 기울인 헤드라인, 검정 사선 판 위 목표 페이스 숫자를 두고 아래 띠에 상품 세 개와 가격을 붙였습니다. 2. 페이스 계산기 - 거리와 목표 기록을 넣으면 1km 페이스와 400m 기록, 시속, 5km 지점 기록이 나오고 페이스 구간에 맞는 러닝화 세 켤레와 한 번에 담기 합계가 바뀝니다. 3. 페이스 칩 카드 - 평행사변형 순위 배지와 무게, 드롭, 권장 페이스 칩을 카드에 붙였습니다. 4. 기록 인증 후기 - 거리 배지와 이전 기록, 새 기록을 큰 숫자로 보여 주고 구매 상품을 연결했습니다. 5. 기울어진 화면 요소 - 버튼과 검색창, 카테고리 칸, 계산기 밴드를 같은 각도로 기울여 속도감을 이어 갔습니다. [디자인] - 흰 바탕과 잉크, 아스팔트 회색 한 밴드에 블레이즈 오렌지를 할인율과 순위, 주 버튼에 썼습니다. - 한글은 기울인 Pretendard, 숫자와 영문은 넓은 폭 Archivo 이탤릭입니다. - 상품 카드는 1:1 비율로 놓았습니다. [범위] - 메인 페이지 PC·모바일 반응형 디자인과 퍼블리싱 - 상품 카드는 반복 구조로 짜서 카페24 메인 진열 모듈로 옮길 수 있는 구조
SNUGFIT 스너그핏 휴대폰 케이스 액세서리 쇼핑몰 디자인
분야: 디자인 · 퍼블리싱 / 웹 / 쇼핑몰, 카페24, 반응형 참여 기간: 2026.10 관련 기술: 카페24 스마트디자인, HTML5, CSS3, JavaScript, 반응형 웹 [프로젝트 개요] 케이스, 필름, 충전기, 스트랩을 파는 휴대폰 액세서리 몰입니다. 케이스는 내 기종에 맞는지가 전부라는 점에서 출발해 첫 화면을 기종 선택 격자로 만들고, 고른 기종에 맞춰 진열 제목과 카드 호환 표시, 세트 구성이 모두 바뀌게 했습니다. 아래로 기종별 케이스, 3종 세트, 필름과 충전기, 신기종 케이스 출고 일정, 기종별 후기가 이어집니다. 지원 기종 32개로 구성했습니다. [주요 기능] 1. 기종 선택 격자 - 제조사 탭과 타일마다 카메라 배치로 그린 폰 뒷면 윤곽, 모델명을 넣었고 고른 타일은 네온 블루로 채웁니다. 2. 선택 요약 판 - 고른 기종의 모델명과 케이스, 필름, 렌즈, 충전, 스트랩 개수를 보여 주고 선택은 다시 방문해도 유지됩니다. 3. 기종에 맞춰 바뀌는 화면 - 진열 제목과 모든 카드의 호환 표시, 세트 구성, 모바일 하단 탭의 기종 칸까지 고른 기종으로 바뀝니다. 4. 케이스, 필름, 렌즈 세트 - 세 단계 버튼에서 하나씩 고르면 15% 할인과 결제 금액이 계산됩니다. 5. 신기종 케이스 출고 일정 - 기종별 공개일과 케이스 출고일, 준비 상품 수, 판매 상태를 표로 보여 주고 사전예약과 입고 알림으로 이어집니다. [디자인] - 흰 바탕과 옅은 회색 판에 네온 블루 한 색을 선택 표시와 할인율, 주 버튼에 썼습니다. - 한글은 Pretendard, 영문 모델명과 숫자는 Space Grotesk입니다. - 모서리 없이 카드끼리 1px 선을 공유하는 격자로 정리했습니다. [범위] - 메인 페이지 PC·모바일 반응형 디자인과 퍼블리싱 - 상품 카드는 반복 구조로 짜서 카페24 메인 진열 모듈로 옮길 수 있는 구조
PLAINDAY 플레인데이 컬러 소형가전 쇼핑몰 디자인
분야: 디자인 · 퍼블리싱 / 웹 / 쇼핑몰, 카페24, 반응형 참여 기간: 2026.10 관련 기술: 카페24 스마트디자인, HTML5, CSS3, JavaScript, 반응형 웹 [프로젝트 개요] 토스터, 전기포트, 드라이어처럼 매일 쓰는 소형가전 브랜드몰입니다. 기능보다 색과 생활 장면이 먼저 보이도록 첫 화면에 큰 색상 원을 두어 누르면 제품 사진이 그 색으로 바뀌게 했습니다. 아래로 색으로 고르기, 시간대별 생활 장면, 집에 맞는 용량, 많이 산 상품, 사진 후기가 이어집니다. 소형가전 10종과 색상 8가지로 구성했습니다. [주요 기능] 1. 첫 화면 색상 원 - 큰 색 원을 누르면 사진이 그 색 제품으로 바뀌고, 입고 예정 색에는 날짜를 적었습니다. 가격과 담기 버튼이 바로 위에 있습니다. 2. 색으로 고르기 - 여덟 색 타일에 상품 수를 적고, 고르면 진열이 걸러지며 카드 사진도 그 색 옵션으로 바뀝니다. 3. 카드 색상 칩 - 모든 카드에 색 칩과 색 이름을 붙이고 사진 오른쪽 아래 원형 담기 버튼을 두었습니다. 4. 하루 중 이 시간 - 아침 부엌, 오후 거실, 밤 침실 탭마다 큰 시각 숫자가 얹힌 장면 사진과 그 장면의 상품 세 개를 보여 주고 함께 담습니다. 5. 집에 맞는 용량 - 1인부터 5인 이상까지 고르면 전기포트, 블렌더, 토스터, 가습기의 맞는 용량과 모델이 나옵니다. [디자인] - 밝은 회백 바탕과 흰 면에 오렌지 한 색을 할인율과 주 버튼에만 썼습니다. - Pretendard 한 서체와 소문자 워드마크로 가볍게 맞췄습니다. - 카드와 사진은 모서리를 둥글리고 버튼은 알약 모양, 진열은 5열입니다. [범위] - 메인 페이지 PC·모바일 반응형 디자인과 퍼블리싱 - 상품 카드는 반복 구조로 짜서 카페24 메인 진열 모듈로 옮길 수 있는 구조
OVERTONE 오버톤 하이파이 오디오 쇼핑몰 디자인
분야: 디자인 · 퍼블리싱 / 웹 / 쇼핑몰, 카페24, 반응형 참여 기간: 2026.10 관련 기술: 카페24 스마트디자인, HTML5, CSS3, JavaScript, 반응형 웹 [프로젝트 개요] 앰프, 턴테이블, 스피커, 헤드폰을 파는 하이파이 오디오 전문점입니다. 따뜻한 먹색 바탕에 앰버 한 색만 써서 불 끈 청음실에서 다이얼만 빛나는 인상을 냈고, 첫 화면에 출력과 주파수 응답을 숫자와 그래프로 먼저 보여 줍니다. 아래로 입력 선택 다이얼, 이번 달 입고, 앰프 출력 계산, 청음실 예약, 시스템 기획전, 청음 후기가 이어집니다. 오디오 기기와 케이블 12종으로 구성했습니다. [주요 기능] 1. 주파수 응답 그래프 - 제품 사진 아래 20Hz~20kHz 로그 눈금 판에 앰버 곡선을 그리고, 슬라이드마다 제품 특성에 맞는 곡선으로 바뀝니다. 2. 입력 선택 다이얼 - 앰프 입력 셀렉터 모양 노브를 돌려 분류를 고르면 옆 진열이 걸러집니다. 3. 스펙 3칸 카드 - 모델 코드와 이름 아래 출력, 임피던스, 응답 범위 세 칸 표를 넣고 가격과 할인율을 이어 적었습니다. 4. 앰프 출력 계산과 미터 - 스피커 감도와 방 크기, 청취 거리, 음악 종류를 넣으면 채널당 권장 출력이 나오고 미터 바늘이 움직이며 몰의 앰프와 맞는지 표시됩니다. 5. 청음실 예약 - 7일 날짜와 시간대별 남은 자리, 듣고 싶은 조합을 고르면 예약 요청 버튼 문구가 바뀝니다. [디자인] - 따뜻한 먹색 바탕과 판, 앰버 한 색을 할인율과 활성 표시, 그래프 곡선에만 썼습니다. - 제목은 Noto Serif KR, 본문과 숫자는 Pretendard입니다. - 모서리를 거의 두지 않고 그림자 없이 선으로 구획했습니다. [범위] - 메인 페이지 PC·모바일 반응형 디자인과 퍼블리싱 - 상품 카드는 반복 구조로 짜서 카페24 메인 진열 모듈로 옮길 수 있는 구조
도톰 DOTOM 수건 욕실 패브릭 쇼핑몰 디자인
분야: 디자인 · 퍼블리싱 / 웹 / 쇼핑몰, 카페24, 반응형 참여 기간: 2026.10 관련 기술: 카페24 스마트디자인, HTML5, CSS3, JavaScript, 반응형 웹 [프로젝트 개요] 수건, 가운, 욕실 매트를 두께로 골라 파는 홈텍스타일 몰입니다. 첫 화면에 같은 크기 수건 네 가지를 g/㎡ 비례 두께의 띠로 쌓아 두께 차이를 눈으로 비교하게 했습니다. 카드마다 두께 숫자와 게이지 막대를 붙였고, 아래로 사이즈로 찾기, 많이 팔린 수건, 색을 골라 5장 세트, 정기 교체, 기념수건 단체 주문이 이어집니다. [주요 기능] 1. 두께 띠 첫 화면 - 400, 500, 600, 750 g/㎡ 네 줄을 실제 비례 두께로 쌓고, 누르면 오른쪽에 장당 무게와 원사, 건조 시간, 가격이 바뀝니다. 2. 사이즈 자 - 핸드타월부터 비치타월, 욕실 매트까지 같은 비율로 그린 사각형을 카테고리 진입으로 썼습니다. 3. 두께 게이지 카드 - 사진 아래 두께 숫자와 두께만큼 찬 막대, 크기와 장당 무게를 적고 색 칩은 접힌 수건 모양으로 그렸습니다. 4. 색을 골라 5장 세트 - 12색 팔레트에서 다섯 장을 고르면 수건 더미가 한 장씩 쌓이고 세트 가격이 나옵니다. 색 조합 프리셋 네 개도 둡니다. 5. 정기 교체 - 장수와 주기, 두께를 고르면 회당 결제 금액과 할인율, 첫 배송일과 다음 배송일이 계산됩니다. [디자인] - 흰 바탕에 물빛 블루그레이 네 단계를 두께 띠에 쓰고 푸터까지 밝게 맞췄습니다. - Pretendard 한 서체에 두께 숫자만 아주 가는 굵기로 써서 얇은 숫자와 두꺼운 띠가 대비되게 했습니다. - 빨강 없이 짙은 청회색으로 할인율과 주 버튼을 표시합니다. [범위] - 메인 페이지 PC·모바일 반응형 디자인과 퍼블리싱 - 상품 카드는 반복 구조로 짜서 카페24 메인 진열 모듈로 옮길 수 있는 구조
모눈상회 MONUN SUPPLY 문구 오피스 쇼핑몰 디자인
분야: 디자인 · 퍼블리싱 / 웹 / 쇼핑몰, 카페24, 반응형 참여 기간: 2026.10 관련 기술: 카페24 스마트디자인, HTML5, CSS3, JavaScript, 반응형 웹 [프로젝트 개요] 노트, 필기구, 사무용품을 파는 문구점입니다. 본문 전체를 모눈 위에 올리고 제목과 표, 카드 높이를 칸에 맞춰 노트 한 장 같은 화면을 만들었고, 할인 표시는 빨강 교정 자국처럼 손글씨로 그렸습니다. 아래로 신학기 많이 산 문구, 속지부터 고르기, 연필 이름 각인, 사무실 대량 구매 단가, 새로 들어온 것이 이어집니다. [주요 기능] 1. 모눈 바탕 - 본문 전체를 24px 모눈 위에 올리고 제목과 표, 카드 높이를 칸 배수로 맞췄습니다. 2. 빨강 교정 표시 - 정가에는 손으로 그은 빨강 취소선을, 할인율에는 손글씨 동그라미를 둘렀습니다. 3. 속지부터 고르기 - 모눈, 도트, 줄, 무지 탭을 누르면 종이 미리보기와 손글씨 메모, 해당 노트 목록이 바뀝니다. 4. 연필 이름 각인 - 이름을 넣으면 사진 위에 바로 새겨져 보이고 글씨 색 세 가지 가운데 고릅니다. 5. 사무실 대량 구매 단가 - 수량을 넣으면 구간 단가와 합계, 낱개로 살 때보다 아끼는 금액이 나오고 견적서 받기로 이어집니다. [디자인] - 파랑 잉크와 빨강 교정 두 색, 옅은 모눈 선으로 노트 한 장 같은 인상을 냈습니다. - 본문은 Pretendard, 빨강 손글씨 표시에만 Nanum Pen Script를 썼습니다. - 모든 요소의 높이를 모눈 칸에 맞춰 반듯하게 정렬했습니다. [범위] - 메인 페이지 PC·모바일 반응형 디자인과 퍼블리싱 - 상품 카드는 반복 구조로 짜서 카페24 메인 진열 모듈로 옮길 수 있는 구조
말끔 MALKKEUM 주방 청소 도구 쇼핑몰 디자인
분야: 디자인 · 퍼블리싱 / 웹 / 쇼핑몰, 카페24, 반응형 참여 기간: 2026.10 관련 기술: 카페24 스마트디자인, HTML5, CSS3, JavaScript, 반응형 웹 [프로젝트 개요] 기름때, 물때, 곰팡이처럼 집안 얼룩을 해결하는 주방 청소 도구 몰입니다. 첫 화면 코발트 면에 얼룩 이름을 버튼으로 깔아 문제를 고르면 답이 되는 세트가 나오도록 했습니다. 아래로 사용 전후 비교, 많이 팔린 청소 도구, 공간별 세트, 소모품 정기배송, 얼룩별 사용 후기가 이어집니다. [주요 기능] 1. 어떤 얼룩이세요 - 가스레인지 기름때, 탄 자국, 줄눈 곰팡이, 물때, 배수구, 바닥 여섯 버튼을 누르면 오른쪽 해결 세트의 구성과 가격이 바뀝니다. 2. 쓰기 전, 쓴 뒤 - 사진 위 막대를 끌어 사용 전후를 비교하고 쓴 도구와 걸린 시간, 연결 상품을 함께 보여 줍니다. 3. 얼룩 태그 카드 - 카드 위에 맞는 얼룩 태그와 사용 정보 한 줄을 붙이고 전폭 담기 버튼을 두었습니다. 4. 공간별 세트 - 주방, 욕실, 바닥 세트의 구성 목록과 묶음 가격을 보여 줍니다. 5. 소모품 정기배송 - 4주, 6주, 8주 주기를 토글로 바꾸면 할인율과 회당 가격이 바뀝니다. [디자인] - 코발트 한 색을 첫 화면 면과 할인율, 주 버튼에 쓰고 빨강 없이 정리했습니다. - Pretendard 한 서체에 굵은 한글 워드마크를 얹었습니다. - 카드는 흰 바탕과 옅은 파랑 회색 면을 번갈아 놓았습니다. [범위] - 메인 페이지 PC·모바일 반응형 디자인과 퍼블리싱 - 상품 카드는 반복 구조로 짜서 카페24 메인 진열 모듈로 옮길 수 있는 구조
FILLGRAM 필그램 리필 스테이션 쇼핑몰 디자인
분야: 디자인 · 퍼블리싱 / 웹 / 쇼핑몰, 카페24, 반응형 참여 기간: 2026.10 관련 기술: 카페24 스마트디자인, HTML5, CSS3, JavaScript, 반응형 웹 [프로젝트 개요] 세제와 샴푸 같은 원액을 필요한 만큼 그램 단위로 파는 리필 가게입니다. 첫 화면에 무게 계산기를 두어 원액을 고르고 양을 정하면 금액이 바로 계산되고, 택배 리필과 방문 리필 가운데 고를 수 있습니다. 상품 카드는 원액 통 라벨처럼 만들어 100g당 단가와 용량 칩을 붙였고, 아래로 스테이션 탱크 잔량, 빈 용기 반납 적립, 포장 없는 고체 제품, 방문 안내가 이어집니다. [주요 기능] 1. 무게 계산기 - 원액을 고르고 0~2kg 슬라이더를 밀면 그램 수와 g당 단가, 금액이 큰 숫자로 계산되고 택배 리필과 방문 리필 버튼이 이어집니다. 2. 원액 통 라벨 카드 - 사진 아래 선 상자에 100g당 단가 띠를 두고, 용량 칩을 누르면 가격이 바뀝니다. 3. 오늘 스테이션 탱크 - 원액별 잔량을 막대와 kg으로 보여 주고 적게 남은 원액은 노랑으로 표시해 입고 예정을 알립니다. 4. 빈 용기 반납 적립 - 반납할 용기 종류와 개수를 넣으면 받을 적립금이 계산됩니다. 5. 스테이션 방문 안내 - 용기 무게 빼는 법과 공병 대여처럼 매장 이용 순서를 표로 정리했습니다. [디자인] - 연두와 진한 잎색, 연두 면으로 리필 가게의 가벼운 인상을 냈습니다. - Pretendard 한 서체에 숫자는 고정폭으로 맞추고 계산 결과를 아주 크게 썼습니다. - 카드는 저울 라벨처럼 선 상자로 정보를 묶었습니다. [범위] - 메인 페이지 PC·모바일 반응형 디자인과 퍼블리싱 - 상품 카드는 반복 구조로 짜서 카페24 메인 진열 모듈로 옮길 수 있는 구조
OREUM 오름 반려견 아웃도어 장비 쇼핑몰 디자인
분야: 디자인 · 퍼블리싱 / 웹 / 쇼핑몰, 카페24, 반응형 참여 기간: 2026.10 관련 기술: 카페24 스마트디자인, HTML5, CSS3, JavaScript, 반응형 웹 [프로젝트 개요] 하네스, 리드줄, 방수 재킷처럼 산책보다 한 걸음 더 나가는 반려견 아웃도어 장비 몰입니다. 검정과 안전 오렌지를 쓰고, 첫 화면 능선 사진 위에 무게와 반사 거리 같은 스펙 숫자를 크게 올렸습니다. 카드에는 스펙 칩과 사이즈 칩을 붙였고, 아래로 많이 나간 장비, 사이즈 재기, 장면별 장비 세트, 신상품, 착용 후기가 이어집니다. [주요 기능] 1. 능선 사진과 스펙 숫자 - 능선 사진 위에 하네스 이름과 무게, 반사 거리, 조절 곳 수를 압축 서체로 크게 쓰고 오른쪽 아래에 가격 카드를 놓았습니다. 2. 사이즈 칩 카드 - 1:1 사진에 오렌지 순위 사각과 방수 같은 스펙 칩, XS~XL 사이즈 칩을 붙이고 품절 사이즈는 취소선으로 표시했습니다. 3. 사이즈 재기 - 강아지 옆모습 그림에 목둘레, 가슴둘레, 등길이를 점선으로 표시하고 치수를 넣으면 맞는 사이즈와 사이즈표 행이 강조됩니다. 4. 어디 가세요? - 캠핑, 근교 산책, 물놀이 탭마다 장면 사진과 필요한 장비 세트를 보여 주고 함께 사면 10% 할인된 합계가 바뀝니다. 5. 착용 후기 사이즈 배지 - 후기마다 가슴둘레와 구매 사이즈, 잘 맞는지를 배지로 붙였습니다. [디자인] - 안전 오렌지와 검정, 밝은 회색으로 아웃도어 장비 브랜드의 단단한 인상을 냈습니다. - 한글은 Pretendard, 로고와 숫자, 사이즈는 폭이 다른 Archivo입니다. - 모서리를 조금만 둥글리고 1.5px 선으로 구획했습니다. [범위] - 메인 페이지 PC·모바일 반응형 디자인과 퍼블리싱 - 상품 카드는 반복 구조로 짜서 카페24 메인 진열 모듈로 옮길 수 있는 구조
한가지 HANGAJI 반려견 수제간식 쇼핑몰 디자인
분야: 디자인 · 퍼블리싱 / 웹 / 쇼핑몰, 카페24, 반응형 참여 기간: 2026.10 관련 기술: 카페24 스마트디자인, HTML5, CSS3, JavaScript, 반응형 웹 [프로젝트 개요] 원재료 한 가지로 만드는 반려견 수제간식 공방의 몰입니다. 정육점 라벨처럼 원재료 이름을 크게 찍고 봉투마다 건조 날짜 도장을 찍어 무엇으로 언제 만든 간식인지 바로 보이게 했습니다. 아래로 이번 주 만든 간식, 원재료로 고르기, 알레르기 재료 빼고 고르기, 이번 주 건조 일정, 선물 세트가 이어집니다. [주요 기능] 1. 원재료 첫 화면 - 빨강 면에 원재료 이름을 아주 크게 쓰고 원재료 수와 건조 시간, 오늘 남은 수량을 적은 뒤 생고기 사진과 완성된 간식 사진을 나란히 놓았습니다. 2. 건조 날짜 도장 - 모든 카드 사진 위에 건조 날짜를 기울어진 빨강 도장으로 찍고 카드 맨 위에 원재료와 원산지를 적었습니다. 3. 빼고 고르기 - 닭, 소, 곡물, 생선, 유제품 빼고 칩을 눌러 알레르기가 있는 반려견도 맞는 간식을 찾게 했습니다. 4. 원재료로 고르기 - 원재료 이름을 크게 쓴 여섯 칸에 산지와 간식 수, 원재료 사진을 넣었습니다. 5. 이번 주 건조 일정 표 - 요일별 원재료와 건조 시간, 예약 수량을 표로 보여 주고 오늘 칸은 빨강으로 강조해 바로 예약하게 했습니다. [디자인] - 토마토 레드와 잉크, 흰 바탕으로 정육점 라벨 같은 인상을 냈습니다. - 제목과 원재료 이름은 Hahmlet, 본문은 Pretendard입니다. - 카드는 모서리를 둥글리고 버튼과 칩은 알약 모양으로 맞췄습니다. [범위] - 메인 페이지 PC·모바일 반응형 디자인과 퍼블리싱 - 상품 카드는 반복 구조로 짜서 카페24 메인 진열 모듈로 옮길 수 있는 구조
PLINTH 플린스 고양이 가구 용품 쇼핑몰 디자인
분야: 디자인 · 퍼블리싱 / 웹 / 쇼핑몰, 카페24, 반응형 참여 기간: 2026.10 관련 기술: 카페24 스마트디자인, HTML5, CSS3, JavaScript, 반응형 웹 [프로젝트 개요] 캣폴, 스크래쳐, 숨숨집 같은 고양이 가구와 용품을 파는 몰입니다. 고양이가 올라서는 가구를 조각의 좌대로 보고, 회색 벽 위 흰 액자와 미술관 벽 캡션으로 첫 화면을 전시장처럼 만들었습니다. 카테고리는 높은 곳, 긁는 곳, 쉬는 곳처럼 고양이 행동으로 나누고, 상품 설명은 캡션처럼 재료와 치수로 적었습니다. 아래로 많이 고른 가구, 캣폴 고르기, 신상품, 스크래쳐 리필 정기배송이 이어집니다. [주요 기능] 1. 전시 한 점 첫 화면 - 회색 벽 위 흰 액자에 고양이 사진을 걸고 오른쪽 벽 캡션에 전시 기간과 할인, 전시 상품 세 개의 가격을 적었습니다. 2. 전시실 안내판 카테고리 - 높은 곳, 긁는 곳, 쉬는 곳, 먹는 곳, 노는 곳, 화장실 여섯 칸에 상품 수를 붙였습니다. 3. 캡션형 상품 카드 - 회색 좌대 사진 아래 품번과 전시실, 이름, 재료와 치수, 가격을 미술관 캡션처럼 적었습니다. 4. 천장 높이로 캣폴 고르기 - 천장 높이와 가장 무거운 고양이를 고르면 봉 길이, 연장봉 수, 발판 수와 간격, 가격이 나옵니다. 5. 스크래쳐 리필 정기배송 - 4주, 6주, 8주 주기별 할인율과 가격을 비교해 신청합니다. [디자인] - 회색 벽과 흰 액자, 차콜만 쓰고 포인트 색 없이 할인도 차콜 밑줄로 표시했습니다. - Pretendard 한 서체로 전시 제목은 가는 300, 섹션 제목은 굵게 나눴습니다. - 모서리와 그림자 없이 액자에만 가는 테두리를 넣었습니다. [범위] - 메인 페이지 PC·모바일 반응형 디자인과 퍼블리싱 - 상품 카드는 반복 구조로 짜서 카페24 메인 진열 모듈로 옮길 수 있는 구조
NESTLIST 네스트리스트 출산 준비 쇼핑몰 디자인
분야: 디자인 · 퍼블리싱 / 웹 / 쇼핑몰, 카페24, 반응형 참여 기간: 2026.10 관련 기술: 카페24 스마트디자인, HTML5, CSS3, JavaScript, 반응형 웹 [프로젝트 개요] 처음 출산을 준비하는 부모를 위한 출산 육아용품 몰입니다. 첫 화면에서 예정일을 넣으면 남은 날과 지금 준비할 단계가 나오고, 그 아래 단계별 체크리스트 표에서 품목과 권장 수량을 확인하며 바로 담게 했습니다. 모든 상품 카드에 안전 인증과 대상 월령을 두 줄로 붙였고, 카시트 비교 표와 권장 수량 안내, 부모 후기가 이어집니다. [주요 기능] 1. 출산 예정일 D-day - 예정일을 바꾸면 남은 날짜와 지금 준비할 단계 문구가 바뀌고, 출산 후에는 월령 단계로 넘어갑니다. 2. 단계별 체크리스트 표 - 임신 중부터 12개월까지 탭마다 품목, 권장 수량, 필요 정도, 상품과 가격을 표로 정리했습니다. 다섯 개 이상 담으면 7% 할인이 계산되고 모바일에서는 행이 카드로 바뀝니다. 3. 인증 정보 카드 - 모든 카드 아래에 안전 인증과 대상 월령, 하중을 두 줄로 적고 전폭 담기 버튼을 붙였습니다. 4. 카시트 3종 비교 표 - 대상 키와 월령, 인증 기준, 고정 방식, 회전, 무게, 커버 세탁을 한 표에서 비교합니다. 5. 몇 개 사야 하나요 - 젖병, 배냇저고리, 손수건, 기저귀의 권장 수량을 큰 숫자로 보여 줍니다. [디자인] - 하늘색과 흰 바탕에 파랑 한 색을 할인율과 주 버튼, 활성 탭에 썼고 인증 표시만 초록 점으로 구분했습니다. - SUIT 한 서체에 숫자는 고정폭으로 맞췄습니다. - 표와 카드를 같은 선 굵기로 맞춰 정보 문서처럼 정돈했습니다. [범위] - 메인 페이지 PC·모바일 반응형 디자인과 퍼블리싱 - 상품 카드는 반복 구조로 짜서 카페24 메인 진열 모듈로 옮길 수 있는 구조
DONGNEMO 동네모 원목 교구 쇼핑몰 디자인
분야: 디자인 · 퍼블리싱 / 웹 / 쇼핑몰, 카페24, 반응형 참여 기간: 2026.10 관련 기술: 카페24 스마트디자인, HTML5, CSS3, JavaScript, 반응형 웹 [프로젝트 개요] 원목 블록과 교구를 파는 장난감 가게입니다. 로고의 원과 사각을 화면 구조로 가져와 첫 화면을 4칸 두 줄 블록 판으로 짜고, 칸마다 놀이 사진과 상품, 나이, 혜택을 맞춰 넣었습니다. 아래로 도형 카테고리, 나이별 발달로 고르기, 많이 담은 교구, 놀이 상자 정기배송, 소재와 안전 정보가 이어집니다. 교구 142종으로 구성했습니다. [주요 기능] 1. 블록 판 첫 화면 - 놀이 사진, 제목과 혜택, 원 안의 상품, 큰 숫자 칸, 놀이 상자 혜택을 4칸 두 줄 판에 블록처럼 맞추고 칸 사이 흰 줄을 이음새로 남겼습니다. 2. 도형과 숫자 카테고리 - 아이콘 대신 빨강, 초록, 회색 원과 사각 안에 상품 수를 적었습니다. 3. 나이별 발달 막대 - 나이를 고르면 소근육, 대근육, 인지, 언어, 사회성 다섯 칸 막대와 그 나이 놀이 정보, 맞는 교구 네 개가 나옵니다. 4. 놀이 상자 정기배송 - 아이 생일을 고르고 1회, 6개월, 12개월 가운데 고르면 상자당 가격과 할인율이 비교됩니다. 5. 소재와 안전 띠 - 원목 소재, 모서리 처리, 수성 도료, 안전 인증을 도형 표시와 짧은 사실로 정리했습니다. [디자인] - 빨강과 초록 두 색, 회색 면으로 원목 블록 판 같은 인상을 냈습니다. - Pretendard 한 서체에 숫자를 크게 써서 정보가 또렷하게 읽힙니다. - 할인율은 빨강, 활성 탭은 검정 채움으로 표시합니다. [범위] - 메인 페이지 PC·모바일 반응형 디자인과 퍼블리싱 - 상품 카드는 반복 구조로 짜서 카페24 메인 진열 모듈로 옮길 수 있는 구조
TWOFOLD 두겹 이중거즈 유아복 쇼핑몰 디자인
분야: 디자인 · 퍼블리싱 / 웹 / 쇼핑몰, 카페24, 반응형 참여 기간: 2026.10 관련 기술: 카페24 스마트디자인, HTML5, CSS3, JavaScript, 반응형 웹 [프로젝트 개요] 이중거즈 원단으로 만든 신생아와 유아 옷을 파는 몰입니다. 세이지와 라일락 두 톤으로 화면을 반씩 나눠 같은 옷을 두 가지 색으로 보여 주고, 월령 탭으로 사이즈부터 고르게 했습니다. 아래로 이번 주 많이 산 옷, 색으로 고르기, 출산 선물 상자 직접 담기, 원단 정보, 입혀 본 후기가 이어집니다. [주요 기능] 1. 두 톤 반반 첫 화면 - 왼쪽 세이지 면에 제목과 혜택, 롬퍼 사진을, 오른쪽 라일락 면에 우주복 사진과 같은 원단 3색 칩을 놓고 사진마다 상품명과 가격 태그를 붙였습니다. 2. 월령 탭 - 신생아부터 2~3세까지 탭을 누르면 사이즈 호칭과 키, 몸무게 표, 해당 상품 네 개가 바뀝니다. 3. 색으로 고르기 - 세이지, 라일락, 오트 큰 색 버튼을 누르면 그 색이 있는 상품만 남고 카드 색 칩에도 표시됩니다. 4. 출산 선물 상자 직접 담기 - 여섯 개 가운데 세 개를 고르면 10% 할인이 계산되고 카드 문구를 넣은 뒤 담을 수 있습니다. 5. 원단 한 장의 정보 - 겹 수와 소재, 수축률, 선세탁 횟수를 큰 숫자로 정리했습니다. [디자인] - 세이지와 라일락 두 톤에 오트를 더하고, 흰 바탕과 연한 면을 번갈아 써서 차분한 인상을 냈습니다. - 제목은 Gowun Dodum, 본문과 가격은 Pretendard입니다. - 할인율은 진한 라일락으로 표시해 다른 색이 끼어들지 않게 했습니다. [범위] - 메인 페이지 PC·모바일 반응형 디자인과 퍼블리싱 - 상품 카드는 반복 구조로 짜서 카페24 메인 진열 모듈로 옮길 수 있는 구조
GRAMDAY 그램데이 식단 도시락 쇼핑몰 디자인
분야: 디자인 · 퍼블리싱 / 웹 / 쇼핑몰, 카페24, 반응형 참여 기간: 2026.10 관련 기술: 카페24 스마트디자인, HTML5, CSS3, JavaScript, 반응형 웹 [프로젝트 개요] 식단 도시락과 단백질 간식을 파는 몰입니다. 사진보다 영양성분표가 주인공이 되도록 첫 화면 오른쪽에 성분표를 그대로 크게 그리고, 모든 카드에 영양표와 단백질 1g당 가격을 붙여 숫자로 비교하게 했습니다. 아래로 많이 담은 도시락, 목표별 플랜 만들기, 다음 주 식단표, 단백질 간식, 사진 후기가 이어집니다. [주요 기능] 1. 영양성분표 첫 화면 - 굵은 인디고 괘선의 성분표에 열량을 큰 숫자로 쓰고 1일 기준치 비율 가운데 단백질 행만 막대로 강조했습니다. 판매가와 플랜가를 함께 둡니다. 2. 숫자로 고르기 - 단백질 30g 이상, 400kcal 이하처럼 숫자 조건 여섯 칸에 해당 상품 수를 붙였습니다. 3. 영양표 카드 - 모든 카드에 네 칸 영양표와 단백질, 탄수화물, 지방 비율 막대, 단백질 1g당 가격을 넣었습니다. 4. 목표별 플랜 만들기 - 목표와 체중, 끼니, 기간을 넣으면 하루 단백질 목표와 도시락으로 채우는 양, 팩 수, 끼당 가격, 합계가 계산됩니다. 5. 다음 주 식단표 - 월~금 점심과 저녁 표를 감량과 근육 증가 플랜으로 바꿔 보고 하루 평균 열량과 주문 마감 시각을 확인합니다. [디자인] - 흰 바탕에 인디고 한 색을 세 단계 명도로 나눠 막대와 포인트에 썼고 할인도 인디고로 표시합니다. - 한글은 Pretendard, 숫자와 로고는 넓은 폭 Archivo입니다. - 상품 카드는 1:1 비율에 모서리를 살짝 둥글렸습니다. [범위] - 메인 페이지 PC·모바일 반응형 디자인과 퍼블리싱 - 상품 카드는 반복 구조로 짜서 카페24 메인 진열 모듈로 옮길 수 있는 구조
NUREUM 눌음 밀키트 간편식 쇼핑몰 디자인
분야: 디자인 · 퍼블리싱 / 웹 / 쇼핑몰, 카페24, 반응형 참여 기간: 2026.10 관련 기술: 카페24 스마트디자인, HTML5, CSS3, JavaScript, 반응형 웹 [프로젝트 개요] 밀키트와 간편식을 주 단위로 파는 몰입니다. 가격보다 조리 시간이 먼저 눈에 들어오도록 첫 화면을 카라멜 면, 사진, 검정 식단 칸의 세 단으로 나누고 조리 시간을 아주 큰 숫자로 올렸습니다. 어느 카드에서 담아도 다음 주 월~금 식단 칸이 채워지고 불 앞에 서는 시간 합계와 금액이 바뀝니다. 아래로 시간별 고르기, 다음 주 새 메뉴, 조리 눈금자, 정기 식단이 이어집니다. [주요 기능] 1. 조리 시간 3단 첫 화면 - 카라멜 면에 상품명과 조리 시간 큰 숫자, 필요한 도구와 가격을 쓰고 사진 옆 검정 칸에 다음 주 월~금 식단을 놓았습니다. 2. 다음 주 식단 칸 - 어느 카드의 더하기 버튼을 눌러도 빈 요일이 채워지고 조리 시간 합계와 금액, 무료배송까지 남은 팩 수가 바뀝니다. 3. 몇 분 있으세요 - 10분, 15분, 20분 안 탭을 누르면 카드가 조리 시간으로 걸러집니다. 카드 왼쪽 위에는 시간 칩을 붙였습니다. 4. 다음 주 새 메뉴 - 주차 탭과 요일 열에 날짜와 조리 시간을 적고 5일 한 번에 담으면 10% 할인됩니다. 5. 조리 눈금자 - 한 메뉴의 조리 과정을 0분부터 완성까지 눈금 위 단계 시각으로 펼쳤고 모바일에서는 세로 목록으로 바뀝니다. [디자인] - 카라멜 갈색과 검정, 밝은 회색 면을 쓰고 할인율도 카라멜 한 색으로 맞췄습니다. - 한글은 Pretendard, 조리 시간과 가격, 날짜 숫자는 Bricolage Grotesque입니다. - 상품 카드는 4:5 비율에 모서리를 살짝 둥글렸습니다. [범위] - 메인 페이지 PC·모바일 반응형 디자인과 퍼블리싱 - 상품 카드는 반복 구조로 짜서 카페24 메인 진열 모듈로 옮길 수 있는 구조
SEHAE 세해 전통 장류 쇼핑몰 디자인
분야: 디자인 · 퍼블리싱 / 웹 / 쇼핑몰, 카페24, 반응형 참여 기간: 2026.10 관련 기술: 카페24 스마트디자인, HTML5, CSS3, JavaScript, 반응형 웹 [프로젝트 개요] 된장, 간장, 고추장처럼 오래 묵힌 장을 파는 전통 장류 몰입니다. 먹색과 한식 명조, 세로쓰기 제목으로 장독대의 분위기를 냈고, 첫 화면에 숙성 일수를 큰 숫자로 올려 묵은 햇수가 곧 값이라는 점이 보이게 했습니다. 아래로 해 묵은 정도 비교, 독에서 뜬 장, 장독 분양, 한 해의 장 일, 먹어 본 이야기가 이어집니다. [주요 기능] 1. 세로 제목 기둥 - 섹션마다 세로쓰기 제목을 기둥처럼 세우고, 모바일에서는 가로 제목과 굵은 왼쪽 선으로 바꿨습니다. 2. 숙성 일수 첫 화면 - 세로 제목 옆에 숙성 일수를 큰 명조 숫자로 쓰고 담근 날과 뜬 날, 독 번호, 가격을 함께 적었습니다. 3. 해 묵은 정도 비교 - 한 해, 세 해, 다섯 해 묵은 장을 막대로 나란히 놓고 맛 한 줄과 100g당 가격, 담기 버튼을 붙였습니다. 4. 숙성 일수 카드 - 카드마다 숙성 일수를 큰 숫자로 쓰고 사진 위에 세로 라벨을 얹었습니다. 5. 장독 분양 - 독 배치도에서 분양할 독을 고르고 장과 독 크기, 맡기는 기간을 정하면 뜨는 날과 받는 양, 분양가가 계산됩니다. [디자인] - 먹색과 흰 바탕, 회백 면에 낙관 주색 한 점을 도장과 할인, 선택한 독에만 썼습니다. - 제목과 숫자, 가격은 Noto Serif KR 명조, 본문은 Pretendard입니다. - 모서리와 그림자를 빼고 선으로만 정리했습니다. [범위] - 메인 페이지 PC·모바일 반응형 디자인과 퍼블리싱 - 상품 카드는 반복 구조로 짜서 카페24 메인 진열 모듈로 옮길 수 있는 구조
HANPAN 한판제과 동네 베이커리 쇼핑몰 디자인
분야: 디자인 · 퍼블리싱 / 웹 / 쇼핑몰, 카페24, 반응형 참여 기간: 2026.10 관련 기술: 카페24 스마트디자인, HTML5, CSS3, JavaScript, 반응형 웹 [프로젝트 개요] 매일 몇 차례 빵을 굽는 동네 제과점을 위한 몰입니다. 첫 화면에 다음 판이 나오는 시각과 남은 시간, 그 판에 나오는 품목과 수량을 크게 띄워 손님이 시간을 맞춰 오게 했습니다. 상품 카드에는 판 시각과 남은 수량 막대를 붙이고 다 팔린 상품은 흐리게 둔 채 다음 판 시각을 적었습니다. 아래로 케이크 픽업 예약, 딸기 시즌, 택배로 받는 빵, 매장 안내가 이어집니다. [주요 기능] 1. 다음 판 카운트다운 - 딸기 레드 면에 다음 판 시각을 큰 숫자로 쓰고 남은 시간과 그 판에 나오는 품목, 수량을 함께 적었습니다. 2. 오늘 굽는 시간 - 하루 다섯 번의 굽는 시각을 칸으로 나눠 다 팔림, 판매 중, 굽는 중, 예정 상태를 색으로 구분했습니다. 3. 판 시각 배지와 남은 수량 - 카드마다 판 시각 배지와 남은 수량 막대를 붙이고, 다 팔린 상품은 흐리게 두고 다음 판 시각을 알려 줍니다. 4. 케이크 픽업 예약 - 케이크와 크기, 날짜, 시간, 문구를 고르면 합계가 계산되고 날짜별 남은 수와 휴무일을 표시합니다. 5. 택배로 받는 빵 - 냉동 생지의 굽는 온도와 시간, 실온 보관일을 적어 매장 빵과 따로 나눴습니다. [디자인] - 딸기 레드와 흰 바탕, 연분홍 면으로 갓 구운 빵집의 밝은 인상을 냈습니다. - 본문은 Pretendard, 섹션 제목은 Gowun Dodum, 시각과 가격 숫자는 Fraunces입니다. - 카드와 사진은 모서리를 크게 둥글리고 버튼은 알약 모양으로 맞췄습니다. [범위] - 메인 페이지 PC·모바일 반응형 디자인과 퍼블리싱 - 상품 카드는 반복 구조로 짜서 카페24 메인 진열 모듈로 옮길 수 있는 구조
SLAB 슬랩 정육 수산 쇼핑몰 디자인
분야: 디자인 · 퍼블리싱 / 웹 / 쇼핑몰, 카페24, 반응형 참여 기간: 2026.10 관련 기술: 카페24 스마트디자인, HTML5, CSS3, JavaScript, 반응형 웹 [프로젝트 개요] 한우와 수산물을 파는 정육점과 수산몰을 위한 디자인입니다. 차가운 철판 회색과 검정을 쓰고, 첫 화면 오른쪽에 축산물 표시 라벨을 확대한 판을 두어 등급과 중량, 숙성 일수, 100g당 단가가 먼저 읽히게 했습니다. 아래로 오늘 입고 수량, 많이 산 상품, 중량 계산기, 오늘 새벽 위판 목록, 정기배송이 이어집니다. [주요 기능] 1. 표시 라벨 첫 화면 - 등급, 중량, 산지, 숙성 일수, 이력번호, 100g당 단가를 축산물 표시 라벨처럼 확대해 첫 화면 오른쪽에 놓았습니다. 2. 오늘 입고 띠 - 검정 띠에 오늘 들어온 한우와 수산물 수량, 숙성실 온도를 숫자 여섯 칸으로 보여 줍니다. 3. 스펙 3칸 카드 - 상품 카드 안에 등급, 중량, 두께를 표로 넣고 왼쪽 위에 등급 각인 배지를 붙였습니다. 4. 몇 g 사면 될까 계산기 - 부위와 두께, 인원을 고르면 권장 중량, 예상 금액, 팬 굽기 시간, 커팅 장수가 나옵니다. 5. 새벽 위판과 출고 마감 - 항구와 위판 시각, 남은 수량, 손질 방법 칩을 목록으로 보여 주고 출고 마감까지 남은 시간과 도착 단계를 함께 둡니다. [디자인] - 철판 회색과 검정 면에 빨강을 할인과 등급 각인에만 써서 차가운 정육점 진열대 인상을 냈습니다. - 한글은 Pretendard, 숫자와 영문 로고는 Barlow Condensed입니다. - 모서리와 그림자 없이 선과 숫자로만 정리했습니다. [범위] - 메인 페이지 PC·모바일 반응형 디자인과 퍼블리싱 - 상품 카드는 반복 구조로 짜서 카페24 메인 진열 모듈로 옮길 수 있는 구조
짐없이 PACKLESS 여행 장비 렌탈 쇼핑몰 디자인
분야: 디자인 · 퍼블리싱 / 웹 / 쇼핑몰, 카페24, 반응형 참여 기간: 2026.10 관련 기술: 카페24 스마트디자인, HTML5, CSS3, JavaScript, 반응형 웹 [프로젝트 개요] 캐리어, 텐트, 카메라, 유모차 같은 여행 장비를 빌려주는 렌탈과 구독 몰입니다. 첫 화면에 대여 기간 토글을 두어 기간을 고르면 히어로와 랭킹 카드, 세트 가격이 모두 그 기간 기준으로 바뀌게 했습니다. 카드에는 하루 단가와 내일 출고 가능한 재고를 적었고, 아래로 많이 빌린 장비, 월 구독, 세트, 받는 곳과 돌려주는 곳 안내가 이어집니다. 여행 장비 142종으로 구성했습니다. [주요 기능] 1. 대여 기간 토글 - 3일, 7일, 14일, 30일을 누르면 첫 화면과 랭킹 카드, 세트의 가격과 하루 단가 표기가 한꺼번에 바뀝니다. 2. 렌탈 카드 - 순위 배지와 분류, 상품명, 스펙 한 줄, 기간 가격과 하루 단가, 내일 출고 가능 수량을 담았고 수량이 적으면 빨강으로 표시합니다. 3. 구독 요금제 비교 표 - 요금제 세 가지를 일곱 줄 표로 비교하고 월 결제와 연 결제 할인을 토글로 바꿉니다. 모바일에서는 첫 열을 고정한 가로 스크롤 표입니다. 4. 받는 곳, 돌려주는 곳 - 주문, 수령, 사용, 반납 네 단계와 공항 카운터, 택배 등 수령처 네 곳의 운영 시간을 정리했습니다. 5. 세트 3종 - 구성 칩과 정가, 할인율, 세트가를 함께 보여 주는 세트 카드입니다. [디자인] - 차콜 면과 청록 포인트, 밝은 회색 면으로 정비가 잘 된 장비 카운터 인상을 냈습니다. - 한글은 Pretendard, 숫자는 Space Grotesk로 나눠 가격이 또렷하게 읽힙니다. - 장비 카드는 1:1 비율에 모서리를 살짝 둥글렸습니다. [범위] - 메인 페이지 PC·모바일 반응형 디자인과 퍼블리싱 - 상품 카드는 반복 구조로 짜서 카페24 메인 진열 모듈로 옮길 수 있는 구조
손일 SONIL CLASS 원데이 클래스 예약 쇼핑몰 디자인
분야: 디자인 · 퍼블리싱 / 웹 / 쇼핑몰, 카페24, 반응형 참여 기간: 2026.10 관련 기술: 카페24 스마트디자인, HTML5, CSS3, JavaScript, 반응형 웹 [프로젝트 개요] 도자기, 가죽, 향, 베이킹처럼 손으로 하는 원데이 클래스를 티켓처럼 파는 몰입니다. 공방 게시판에 꽂힌 입장권을 떠올리도록 사진과 본문 사이에 절취선과 홈을 낸 티켓 카드를 만들고, 카드마다 다가오는 회차와 남은 자리를 칩으로 붙였습니다. 첫 화면에 7일 날짜 띠와 큰 가로 티켓을 두고, 아래로 이번 주 클래스, 함께 예약 계산, 주말 오전 클래스, 클래스 이용권, 공방 소개가 이어집니다. [주요 기능] 1. 티켓 카드 - 사진과 본문 사이에 점선 절취선과 좌우 반원 홈을 내고 다가오는 회차 두 개를 칩으로 붙였습니다. 남은 자리가 적으면 빨강, 마감은 회색입니다. 2. 7일 날짜 띠와 가로 티켓 - 첫 화면에 요일별 남은 자리를 띠로 보여 주고, 옆 큰 티켓에 날짜와 시간, 잔여석, 가격, 자리 잡기 버튼을 놓았습니다. 3. 함께 예약 계산 - 인원별 1인 할인표와 클래스, 인원을 고르면 1인 가격과 할인, 총 결제 금액이 바로 나옵니다. 4. 클래스 이용권 - 금액별 이용권 세 가지를 실물 티켓 모양으로 만들고 그루터기 쪽에 일련번호를 세로로 넣었습니다. 5. 클래스가 열리는 공방 - 공방 네 곳의 정원과 클래스 수를 소개합니다. [디자인] - 흰 바탕과 연한 회녹 면에 올리브를 주 버튼과 활성 표시에, 빨강을 할인과 잔여석에 썼습니다. - IBM Plex Sans KR 한 서체로 차분하게 맞췄습니다. - 카드는 4:3 비율에 모서리를 살짝 둥글렸습니다. [범위] - 메인 페이지 PC·모바일 반응형 디자인과 퍼블리싱 - 상품 카드는 반복 구조로 짜서 카페24 메인 진열 모듈로 옮길 수 있는 구조
수평 SUPYEONG 바다 앞 스테이 예약 쇼핑몰 디자인
분야: 디자인 · 퍼블리싱 / 웹 / 쇼핑몰, 카페24, 반응형 참여 기간: 2026.10 관련 기술: 카페24 스마트디자인, HTML5, CSS3, JavaScript, 반응형 웹 [프로젝트 개요] 펜션, 리조트, 스테이처럼 바다 앞 숙소를 예약으로 파는 몰입니다. 리조트 사이트의 조용하고 넓은 인상을 살리면서, 첫 화면 숙소 사진 아래 예약 바를 걸쳐 날짜와 인원부터 고르게 했습니다. 모든 숙소 카드에 바다까지 거리와 남은 객실을 붙였고, 아래로 이번 주말 빈 방, 날짜별 요금 달력, 기획전, 이번 주 바다 정보, 숙박 후기가 이어집니다. [주요 기능] 1. 예약 바 - 풀블리드 숙소 사진 아래 지역 선택, 체크인과 체크아웃 2개월 달력, 성인과 아동 인원, 빈 방 찾기를 한 줄로 걸쳤습니다. 2. 바다까지 거리 막대 - 모든 숙소 카드에 바다까지 몇 m인지 막대로 보여 주고 요일별 남은 객실을 함께 적었습니다. 3. 날짜별 요금 달력 - 숙소 하나의 한 달 달력에 날마다 1박 요금을 적고 마감일은 빗금으로 표시했습니다. 날짜와 박수를 고르면 2박 10%, 3박 15% 연박 할인과 결제 금액이 계산됩니다. 4. 이번 주 바다 표 - 지역별 일몰 시각, 수온, 파고, 빈 방, 최저가를 바다 사진 띠 위에 표로 정리했습니다. 5. 기획전 카드 - 와이드 사진 아래 숙소 세 곳을 목록으로 붙인 기획전 카드입니다. [디자인] - 흰 바탕에 바다 블루와 깊은 바다색 띠, 옅은 하늘 면을 써서 조용한 리조트 인상을 냈습니다. - 제목은 Noto Serif KR, 본문과 가격은 Pretendard입니다. - 숙소 카드는 4:3 비율에 모서리 없이 두었습니다. [범위] - 메인 페이지 PC·모바일 반응형 디자인과 퍼블리싱 - 상품 카드는 반복 구조로 짜서 카페24 메인 진열 모듈로 옮길 수 있는 구조
팔레톤 PALLETON 도매 대량구매 쇼핑몰 디자인
분야: 디자인 · 퍼블리싱 / 웹 / 쇼핑몰, 카페24, 반응형 참여 기간: 2026.10 관련 기술: 카페24 스마트디자인, HTML5, CSS3, JavaScript, 반응형 웹 [프로젝트 개요] 카페, 식당, 온라인 셀러, 사무실 구매 담당자가 소모품을 묶음 단위로 사는 도매몰입니다. 사진보다 숫자가 먼저 보이도록 첫 화면을 카테고리 트리, 이번 주 단가표, 빠른 주문 세 단으로 나눠 업무용 화면처럼 구성했습니다. 수량을 넣으면 해당 구간 단가가 켜지고, VAT 별도와 포함을 바꾸면 페이지의 모든 금액이 함께 바뀝니다. 포장 자재, 일회용품, 위생 청소용품, 사무용품 21개 품번으로 구성했습니다. [주요 기능] 1. 3단 작업 화면 - 왼쪽 카테고리 트리, 가운데 품번과 입수, 재고, 수량 구간별 단가가 적힌 단가표, 오른쪽 품번과 수량만 넣는 빠른 주문을 한 화면에 놓았습니다. 2. 수량 구간 단가 - 수량을 넣으면 그 구간 단가 칸이 녹색으로 켜지고 소계가 바로 붙습니다. 표와 계산기, 빠른 주문이 같은 규칙을 씁니다. 3. VAT 별도와 포함 전환 - 상단 띠의 스위치를 바꾸면 페이지의 모든 가격과 합계, 장바구니 금액이 함께 바뀝니다. 4. 택배박스 단가 계산기 - 수량과 묶음 단위를 고르면 적용 단가, 공급가, 부가세, 합계가 나오고 조금 더 담을 때 내려가는 단가도 알려 줍니다. 5. 업종별 발주 세트 - 카페 오픈, 온라인 셀러 포장, 사무실 월 소모품 세트를 품번과 수량 표로 보여 주고 한 번에 담습니다. 출고 마감 시계와 대량 견적 요청도 함께 두었습니다. [디자인] - 흰 바탕과 회색 판, 그래파이트 상단 띠에 녹색 한 색을 버튼과 적용 단가 칸에 썼고, 재고 부족만 녹슨 빨강으로 표시합니다. - IBM Plex Sans KR 한 서체에 숫자는 고정폭으로 맞춰 표가 반듯하게 읽힙니다. - 표 머리는 굵은 선, 행은 가는 선으로 나누고 그림자 없이 정리했습니다. [범위] - 메인 페이지 PC·모바일 반응형 디자인과 퍼블리싱 - 상품 카드는 반복 구조로 짜서 카페24 메인 진열 모듈로 옮길 수 있는 구조
산지도 SANJIDO 지역 특산물 쇼핑몰 디자인
분야: 디자인 · 퍼블리싱 / 웹 / 쇼핑몰, 카페24, 반응형 참여 기간: 2026.10 관련 기술: 카페24 스마트디자인, HTML5, CSS3, JavaScript, 반응형 웹 [프로젝트 개요] 여러 지역의 농수축산 특산물을 모아 파는 로컬 마켓입니다. 첫 화면에 9개 도를 남색 사각 타일로 배치한 지도를 두어 어느 지역 것을 살지부터 고르게 했습니다. 상품 카드마다 산지 꼬리표와 생산자, 중량, 100g당 단가, 보관 방법, 출고일을 적었고, 아래로 지역별 장보기, 이번 주 산지 출고표, 생산자 소개, 산지 기획전이 이어집니다. 9개 도 15개 품목으로 구성했습니다. [주요 기능] 1. 타일 지도와 지역 패널 - 9개 도를 남색 사각 타일로 놓고 판매 중 상품 수와 대표 품목을 적었습니다. 누르면 오른쪽 패널이 그 지역의 이번 주 출고 상품과 생산자 수로 바뀝니다. 2. 산지 정보 카드 - 사진 위 산지 꼬리표와 생산자명, 중량, 100g당 단가, 냉장, 냉동, 실온 보관 배지, 출고일을 한 카드에 담았습니다. 3. 지역 탭 - 강원, 경기, 충청, 전라, 경상, 제주 탭에 상품 수를 붙이고 누르면 4열 진열이 바뀝니다. 4. 이번 주 산지 출고표 - 산지, 상품, 생산자, 수확일, 출고일, 남은 수량 막대, 판매가, 담기를 한 줄 표로 정리했고 모바일에서는 카드형으로 접힙니다. 5. 생산자 소개 - 현장 사진과 경력, 재배 면적, 상품 수를 숫자 세 칸으로 보여 주고 대표 상품으로 연결합니다. [디자인] - 남색 지도 타일과 흙빨강 포인트, 차가운 회색 판으로 공공 장터의 신뢰감을 정돈했습니다. - Pretendard 한 서체에 숫자는 고정폭으로 맞췄습니다. - 상품 카드는 1:1 비율에 모서리 없이 4열로 놓았습니다. [범위] - 메인 페이지 PC·모바일 반응형 디자인과 퍼블리싱 - 상품 카드는 반복 구조로 짜서 카페24 메인 진열 모듈로 옮길 수 있는 구조
있다 ITDA 검색 중심 종합 쇼핑몰 디자인
분야: 디자인 · 퍼블리싱 / 웹 / 쇼핑몰, 카페24, 반응형 참여 기간: 2026.10 관련 기술: 카페24 스마트디자인, HTML5, CSS3, JavaScript, 반응형 웹 [프로젝트 개요] 카테고리와 상품 수가 많은 종합몰을 위한 검색 중심 디자인입니다. 사진과 아이콘을 덜어 내고 첫 화면을 68px 검색창 하나로 비워, 아는 물건은 바로 검색하고 모르는 물건은 글자 카테고리로 들어가게 했습니다. 아래로 많이 찾는 검색어, 카테고리 글자 격자, 가격대로 찾기, 검색이 늘어난 말, 브랜드 가나다 색인이 이어집니다. 20개 카테고리로 구성했습니다. [주요 기능] 1. 68px 검색창 - 밑줄 하나와 파란 커서만 남긴 큰 검색창에 입력하면 일치하는 글자를 강조한 자동완성과 상품 수가 나옵니다. 2. 많이 찾는 검색어 1~10 - 한 줄 글자 목록에 순위와 오르내림, 새로 들어온 표시를 붙였습니다. 3. 카테고리 글자 격자 - 아이콘 없이 이름과 상품 수만 적은 5×4 격자이며, 마우스를 올리면 칸이 검정으로 뒤집힙니다. 4. 가격대로 찾기 - 1만 원 이하부터 10만 원 이상까지 다섯 칸 탭을 누르면 해당 상품이 6열로 바뀝니다. 5. 검색이 늘어난 말과 브랜드 색인 - 이번 주 검색이 늘어난 말을 가는 큰 글자로 보여 주고, 브랜드는 가나다와 알파벳 색인으로 찾게 했습니다. [디자인] - 검정과 흰, 회색 단계에 군청 한 점을 커서와 검색어 순위, 할인율에만 썼습니다. - Pretendard 한 서체의 가는 300과 굵은 700 대비로만 성격을 냈습니다. - 모서리와 그림자를 모두 빼고 상품은 6열로 놓았습니다. [범위] - 메인 페이지 PC·모바일 반응형 디자인과 퍼블리싱 - 상품 카드는 반복 구조로 짜서 카페24 메인 진열 모듈로 옮길 수 있는 구조
엮음 YEOKKEUM 큐레이션 편집숍 쇼핑몰 디자인
분야: 디자인 · 퍼블리싱 / 웹 / 쇼핑몰, 카페24, 반응형 참여 기간: 2026.10 관련 기술: 카페24 스마트디자인, HTML5, CSS3, JavaScript, 반응형 웹 [프로젝트 개요] 공방과 소규모 브랜드의 물건을 주제별로 엮어 파는 큐레이션 편집숍입니다. 상품보다 기획전이 먼저 보이도록 첫 화면을 잡지 표지와 목차처럼 짜고, 명조 제목과 기간, 상품 수, 최대 할인을 표로 정리했습니다. 아래로 기획전 편집 그리드, 이번 주 들어온 물건, 주제별 베스트, 읽을거리, 입점 문의가 이어집니다. 커피 도구, 캠핑, 문구, 선물, 생활 소품으로 구성했습니다. [주요 기능] 1. 표지와 목차 - 왼쪽 세로 사진과 오른쪽 기획전 제목, 기간과 상품 수, 최대 할인 표, 상품 세 줄을 두고 아래에 지금 열린 기획전 다섯 칸 목차를 놓았습니다. 2. 기획전 편집 그리드 - 큰 가로 카드와 세로 카드, 3등분 카드를 섞어 잡지 지면처럼 짜고 모든 카드에 상품 세 줄과 담기 버튼을 붙였습니다. 3. 편집자 한 줄 - 신상품 카드 가격 아래에 용량이나 사용 시간처럼 사실만 적은 명조 한 줄을 넣었습니다. 4. 읽을거리 - 사진과 명조 제목, 관련 상품 수를 담은 글 세 편으로 매거진 섹션을 만들었습니다. [디자인] - 흰 바탕과 차가운 회색 판에 자두색 한 점을 할인율과 카테고리 라벨, 활성 탭에 썼습니다. - 제목과 기획전명, 편집자 한 줄은 Noto Serif KR, 나머지는 Pretendard입니다. - 사진과 버튼 모두 직각으로 두고 신상품 카드는 4:5 비율 4열입니다. [범위] - 메인 페이지 PC·모바일 반응형 디자인과 퍼블리싱 - 상품 카드는 반복 구조로 짜서 카페24 메인 진열 모듈로 옮길 수 있는 구조
하루장 HARUJANG 데일리 특가 종합 쇼핑몰 디자인
분야: 디자인 · 퍼블리싱 / 웹 / 쇼핑몰, 카페24, 반응형 참여 기간: 2026.10 관련 기술: 카페24 스마트디자인, HTML5, CSS3, JavaScript, 반응형 웹 [프로젝트 개요] 디지털, 신선식품, 생활, 주방 상품을 함께 파는 소상공인 종합몰을 위한 특가형 디자인입니다. 오픈마켓 타임딜의 긴박감을 살려 첫 화면에 진행 중인 딜 하나와 카운트다운, 할인가, 남은 수량을 크게 올렸습니다. 아래로 시간대별 타임딜, 판매율 막대가 붙은 딜 카드, 오늘의 랭킹, 9,900원 균일가, 내일 도착 신선 진열이 이어집니다. [주요 기능] 1. 진행 중인 딜 첫 화면 - 검정 면 위에 빨강 숫자칸 카운트다운과 할인율, 판매가, 남은 수량 막대를 두고 오른쪽에 다음 타임딜 세 건과 알림 받기 버튼을 놓았습니다. 2. 시간대 타임라인 탭 - 종료, 진행 중, 오픈 예정 시간대를 탭으로 나눠 누르면 그 시간대 딜 상품이 5열로 바뀝니다. 3. 카드 판매율 막대 - 모든 딜 카드에 몇 % 팔렸는지 막대로 보여 남은 양을 숫자로 알립니다. 4. 오늘의 랭킹 1~10 - 두 단 목록에 큰 순위 숫자와 오르내림, 새로 들어온 표시를 붙였습니다. 5. 균일가와 내일 도착 진열 - 가격 숫자가 제목 역할을 하는 균일가 코너와, 저녁 8시 전 주문하면 다음 날 도착하는 신선식품 진열을 두었습니다. [디자인] - 빨강과 검정, 연회색 판으로 장터의 활기를 냈고 빨강은 할인율과 카운트다운, 주 버튼에 썼습니다. - Pretendard 한 서체에 숫자는 고정폭으로 맞춰 시간이 흘러도 숫자가 흔들리지 않습니다. - 상품 카드는 5열로 촘촘하게 놓고 모서리를 살짝 둥글렸습니다. [범위] - 메인 페이지 PC·모바일 반응형 디자인과 퍼블리싱 - 상품 카드는 반복 구조로 짜서 카페24 메인 진열 모듈로 옮길 수 있는 구조
PINAFORE 피나포어 앞치마 단일 상품 쇼핑몰 디자인
분야: 디자인 · 퍼블리싱 / 웹 / 쇼핑몰, 카페24, 반응형 참여 기간: 2026.10 관련 기술: 카페24 스마트디자인, HTML5, CSS3, JavaScript, 반응형 웹 [프로젝트 개요] 상품 한두 개로 시작하는 1인 브랜드를 위한 단일 상품 몰입니다. 메인을 상품 상세처럼 구성해 왼쪽에는 끈, 주머니, 원단, 만드는 곳 네 챕터를, 오른쪽에는 색과 사이즈, 이름 자수, 수량, 합계를 고르는 구매 칸을 고정했습니다. 색 스와치를 누르면 첫 사진이 그 색 앞치마로 바뀌고 키를 넣으면 사이즈가 정해집니다. 앞치마를 다른 단품으로 바꿔도 같은 뼈대로 쓸 수 있습니다. [주요 기능] 1. 메인이 곧 상세 - 큰 사진과 네 챕터의 사진, 세리프 제목, 사실 세 칸을 내려가며 읽는 동안 오른쪽 구매 칸이 따라옵니다. 무료배송까지 남은 수량도 함께 보여 줍니다. 2. 색 스와치 사진 전환 - 색을 누르면 첫 사진이 그 색 앞치마로 바뀌고, 입고 예정 색은 사선으로 표시합니다. 3. 키로 사이즈 찾기 - 키 슬라이더를 움직이면 맞는 사이즈와 앞치마가 끝나는 위치 문장이 나오고 치수표 행과 사람 선 그림이 함께 바뀝니다. 4. 입어 본 사람들 - 후기마다 키, 사이즈, 색을 머리에 적고 사이즈와 무게, 세탁 후 만족도를 막대로 보여 줍니다. 5. 모바일 고정 구매 바 - 모바일에서는 하단 탭 대신 선택 요약과 합계, 구매 버튼이 붙은 바를 화면 아래에 고정했습니다. [디자인] - 흰 바탕과 분홍 회벽 면에 리넨 그린 한 색을 혜택 띠, 할인, 주 버튼에 썼습니다. - 제목과 브랜드는 고운바탕, 본문과 가격은 Pretendard입니다. - 상품 카드는 4:5 비율에 모서리 없이 두었습니다. [범위] - 메인 페이지 PC·모바일 반응형 디자인과 퍼블리싱 - 상품 카드는 반복 구조로 짜서 카페24 메인 진열 모듈로 옮길 수 있는 구조
SEOHA 서하 작가 원화 판화 쇼핑몰 디자인
분야: 디자인 · 퍼블리싱 / 웹 / 쇼핑몰, 카페24, 반응형 참여 기간: 2026.10 관련 기술: 카페24 스마트디자인, HTML5, CSS3, JavaScript, 반응형 웹 [프로젝트 개요] 원화와 판화, 포스터를 직접 파는 작가 개인 숍입니다. 갤러리처럼 작가 이름을 간판으로 쓰고, 흰 벽과 바닥선 위에 액자 한 점과 캡션 라벨을 걸어 첫 화면을 전시장처럼 만들었습니다. 원화는 실제 크기 비율로 같은 눈높이에 걸고 판매된 작품에는 갤러리 관행대로 빨간 점을 붙였습니다. 원화, 판화 에디션, 포스터와 엽서로 구성했습니다. [주요 기능] 1. 흰 벽 첫 화면 - 액자 한 점과 오른쪽 벽 캡션 라벨에 작가, 작품명, 기법, 크기, 가격, 구매와 벽에 대 보기 버튼을 넣었습니다. 2. 실제 크기 비율로 건 원화 - 크기가 다른 원화를 같은 비율과 눈높이로 걸고 아래에 50cm 축척 막대를 두었습니다. 판매된 작품은 빨간 점으로 표시합니다. 3. 에디션 막대 - 판화마다 남은 수량을 가는 막대로 보여 주고 다 팔린 판은 재판 알림으로 이어집니다. 4. 우리 집 벽에 대 보기 - 크기와 액자, 소파나 책상을 고르면 벽에 실제 비율로 걸리고 액자 포함 크기와 합계 금액이 계산됩니다. 5. 주문 뒤 받기까지 - 번호 배정, 출력, 서명, 액자, 발송까지 실제 순서를 날짜별로 보여 줍니다. [디자인] - 흰 벽과 회벽, 바닥색만으로 전시장을 만들고 따로 포인트 색 없이 검정 버튼을 썼습니다. 빨강은 판매 표시에만 씁니다. - Pretendard 한 서체로 캡션처럼 담백하게 적었습니다. - 그림자는 벽에 걸린 액자에만 넣었습니다. [범위] - 메인 페이지 PC·모바일 반응형 디자인과 퍼블리싱 - 상품 카드는 반복 구조로 짜서 카페24 메인 진열 모듈로 옮길 수 있는 구조
DRUM LOG 드럼로그 1인 로스터리 원두 쇼핑몰 디자인
분야: 디자인 · 퍼블리싱 / 웹 / 쇼핑몰, 카페24, 반응형 참여 기간: 2026.10 관련 기술: 카페24 스마트디자인, HTML5, CSS3, JavaScript, 반응형 웹 [프로젝트 개요] 혼자 원두를 볶아 파는 1인 로스터리를 위한 몰입니다. 타자기로 친 작업 일지처럼 고정폭 글자와 흑백 사진을 써서 첫 화면에 오늘 볶은 원두의 시각과 배치 번호, 가격을 기록표로 올렸습니다. 아래로 이번 주 볶은 원두, 마시기 좋은 날 계산, 드립백과 선물, 정기배송 신청서, 작업 일지가 이어집니다. [주요 기능] 1. 오늘 로스팅 기록표 - 시각, 배치 번호, 원두, 투입량, 1차 크랙, 가격, 담기를 한 줄씩 적고 옆 흑백 드럼 사진에 볶은 날 도장을 찍었습니다. 2. 종이 태그 카드 - 모든 사진 왼쪽 아래에 배치 번호와 볶은 날을 적은 흰 종이 태그를, 카드 안에 마시기 좋은 기간을 붙였습니다. 3. 언제 마시면 가장 맛있나 - 볶은 날과 핸드드립, 에스프레소, 콜드브루 가운데 추출 방법을 고르면 기간이 날짜로 계산되어 달력에 칠해집니다. 4. 정기배송 신청서 - 주기와 양, 고르는 방식을 선택하면 1회 금액과 할인율, 한 달 금액이 바로 계산됩니다. 5. 작업 일지 - 날짜와 흑백 사진, 배출 온도와 생두 입고 같은 작업 기록을 적고 그 원두 상품으로 연결했습니다. [디자인] - 흰 바탕과 회색 종이 면에 잉크 파랑 한 색을 날짜, 배치 번호, 할인율, 주 버튼에 썼고 사진은 흑백으로 맞췄습니다. - Nanum Gothic Coding 고정폭 서체 하나로 타자기 기록지 느낌을 냈습니다. - 상품 카드는 4:5 비율에 모서리 없이 두었습니다. [범위] - 메인 페이지 PC·모바일 반응형 디자인과 퍼블리싱 - 상품 카드는 반복 구조로 짜서 카페24 메인 진열 모듈로 옮길 수 있는 구조
TENTONE 텐톤 셀프 네일 젤 컬러 쇼핑몰 디자인
분야: 디자인 · 퍼블리싱 / 웹 / 쇼핑몰, 카페24, 반응형 참여 기간: 2026.10 관련 기술: 카페24 스마트디자인, HTML5, CSS3, JavaScript, 반응형 웹 [프로젝트 개요] 젤 컬러처럼 색 자체가 상품인 셀프 네일 몰입니다. 첫 화면을 사진 대신 96색 칩 벽과 손톱 다섯 개 미리보기로 채워 색을 고르는 일과 담는 일이 한 화면에서 끝나도록 했습니다. 아래로 많이 칠한 색, 이달의 다섯 손톱 조합, 셀프 젤 시작 키트 계산, 칠한 손 후기가 이어집니다. 젤 컬러 96색과 네일 스티커, 베이스와 탑, LED 램프, 케어 제품으로 구성했습니다. [주요 기능] 1. 96색 칩 벽 - 12계열 열과 밝기 8단 행으로 손톱 모양 칩을 늘어놓고 펄, 글리터, 시어 마감을 칩 표면으로 구분했습니다. 마감으로 거르면 나머지 칩은 흐려집니다. 2. 내 조합 손 미리보기 - 칩을 누르면 오른쪽 손톱 다섯 개에 순서대로 칠해지고 피부 톤 세 단계로 바꿔 볼 수 있습니다. 3병 15%, 5병 25% 할인이 바로 계산됩니다. 3. 어울리는 색 네 칸 - 마지막에 고른 색과 같은 계열, 한 톤 진한 색, 반대 색, 펄 포인트를 네 칸으로 보여 주고 바로 더합니다. 4. 손톱 칩 카드 - 칠한 손 사진 위에 손톱 모양 색 칩을 얹고, 이름 위에 색 번호와 계열, 마감을, 아래에 비슷한 색 세 개를 붙였습니다. 5. 다섯 손톱 조합과 키트 계산 - 다섯 색 조합 네 가지를 세트가로 보여 주고, 램프 유무와 병 수를 고르면 키트 금액과 1회 비용이 바뀝니다. [디자인] - 흰 바탕과 무채색 화면에 마젠타 한 색만 할인율과 장바구니 수에 쓰고, 나머지 색은 모두 상품 칩이 맡습니다. - 한글과 숫자는 Pretendard, 워드마크만 Bricolage Grotesque입니다. - 상품 카드는 4:5 비율에 모서리 없이 두었습니다. [범위] - 메인 페이지 PC·모바일 반응형 디자인과 퍼블리싱 - 상품 카드는 반복 구조로 짜서 카페24 메인 진열 모듈로 옮길 수 있는 구조
TEMPER 템퍼 남성 그루밍 쇼핑몰 디자인
분야: 디자인 · 퍼블리싱 / 웹 / 쇼핑몰, 카페24, 반응형 참여 기간: 2026.10 관련 기술: 카페24 스마트디자인, HTML5, CSS3, JavaScript, 반응형 웹 [프로젝트 개요] 스킨케어를 단순하게 끝내고 싶은 남성을 위한 그루밍 몰입니다. 첫 화면에서 피부 타입을 고르면 세안, 정돈, 보습 세 제품과 세트 가격이 바로 정해지도록 했습니다. 검정 면과 흰 면을 번갈아 두고 구리색 선으로 리듬을 냈으며, 쉐이빙은 면도날 교체 주기 계산과 정기배송으로 따로 묶었습니다. 스킨케어, 쉐이빙, 바디와 헤어 제품, 3단계 세트로 구성했습니다. [주요 기능] 1. 피부 타입 3단계 첫 화면 - 지성, 복합, 건성, 민감 탭을 누르면 세안, 정돈, 보습 세 칸의 제품명과 용량, 가격이 바뀌고 아래 세트 줄에 15% 세트가가 계산됩니다. 2. 구리 금속 선 - 구리 그라데이션은 2px 선에만 쓰고 넓은 구리 면은 혜택 띠 한 곳에만 두었습니다. 3. 루틴 단계 칩 - 모든 스킨케어 카드 맨 위에 세안, 정돈, 보습 단계 번호와 맞는 피부 타입을 붙이고, 베스트 탭도 단계로 거릅니다. 4. 면도날 교체 주기 계산기 - 일주일 면도 횟수와 수염 굵기를 넣으면 날 하나의 사용 횟수와 교체 주기가 나오고, 그 주기에 맞춘 리필 정기배송 가격과 신청 버튼이 이어집니다. 5. 피부 타입 배지 후기 - 후기마다 피부 타입과 나이대를 먼저 보여 같은 타입의 후기를 찾기 쉽게 했습니다. [디자인] - 검정과 석탄색 면, 돌회색 면을 번갈아 두고 구리색을 선과 숫자에만 써서 담금질한 금속 같은 인상을 냈습니다. - 한글과 가격은 Pretendard, 워드마크와 단계 번호, 계산 숫자는 Barlow Condensed입니다. - 상품 카드는 4:5 비율에 모서리 없이 두었습니다. [범위] - 메인 페이지 PC·모바일 반응형 디자인과 퍼블리싱 - 상품 카드는 반복 구조로 짜서 카페24 메인 진열 모듈로 옮길 수 있는 구조
GLOSSARY 글로서리 K뷰티 색조 쇼핑몰 디자인
분야: 디자인 · 퍼블리싱 / 웹 / 쇼핑몰, 카페24, 반응형 참여 기간: 2026.10 관련 기술: 카페24 스마트디자인, HTML5, CSS3, JavaScript, 반응형 웹 [프로젝트 개요] 립 글로스, 틴트, 쿠션, 하이라이터처럼 광택이 특징인 K-뷰티 제품을 파는 편집몰입니다. 은색 크롬 질감과 연라벤더를 써서 반짝이는 패키지가 매대에 줄지어 있는 인상을 냈습니다. 첫 화면의 신제품과 특가 카드 아래로 실시간 랭킹, 광 단계로 고르기, 세트 빌더, 이번 주 메이크업, 발색 리뷰가 이어집니다. 색조와 기초 제품 16종으로 구성했습니다. [주요 기능] 1. 크롬 질감 - 은색 금속 그라데이션을 헤더 아래 띠, 첫 화면 글 면, 카테고리 링, 광 단계 표시에만 썼습니다. 2. 광 단계로 고르기 - 매트, 새틴, 글로시, 글래스 네 단계를 광 정도를 그린 원으로 고르면 그 마무리의 제품 네 개가 나옵니다. 모든 카드에도 광 단계 칩을 붙였습니다. 3. 실시간 랭킹 5열 - 순위 숫자와 오르내림 칸을 붙이고 1~3위는 라벤더로 표시했습니다. 4. 3개 고르면 25% 세트 빌더 - 미니 여섯 종에서 세 개를 고르면 오른쪽 내 세트 칸과 할인, 결제 금액이 바로 계산됩니다. 5. 광택 컬러칩 - 칩마다 하이라이트를 얹어 글로스처럼 보이게 했고 카드와 첫 화면, 리뷰 셰이드에 같은 칩을 씁니다. [디자인] - 은색 크롬 그라데이션과 연라벤더 면, 진한 라벤더 할인율로 반짝이는 매대 인상을 냈습니다. - 한글과 가격은 Pretendard, 워드마크와 특가 시간 숫자는 Unbounded입니다. - 상품 카드는 3:4 비율에 모서리를 크게 둥글렸습니다. [범위] - 메인 페이지 PC·모바일 반응형 디자인과 퍼블리싱 - 상품 카드는 반복 구조로 짜서 카페24 메인 진열 모듈로 옮길 수 있는 구조
UMBER 엄버 비건 내추럴 화장품 쇼핑몰 디자인
분야: 디자인 · 퍼블리싱 / 웹 / 쇼핑몰, 카페24, 반응형 참여 기간: 2026.10 관련 기술: 카페24 스마트디자인, HTML5, CSS3, JavaScript, 반응형 웹 [프로젝트 개요] 클레이 마스크, 클렌징밤, 페이스 오일, 바디 버터처럼 제형이 특징인 비건 브랜드를 위한 몰입니다. 첫 화면을 짙은 흙색 바탕 위 제형 클로즈업 사진으로 채워 손등에 짜 놓은 질감부터 보이게 했습니다. 아래로 제형으로 고르기, 많이 다시 산 제품, 원료 산지, 신제품, 리필 안내가 흙색과 테라코타 면을 번갈아 가며 이어집니다. 스킨케어와 바디 제품 19종으로 구성했습니다. [주요 기능] 1. 제형 매크로 첫 화면 - 펴 바른 크림 사진을 화면 전체에 깔고 왼쪽 아래에 명조 제목, 오른쪽 아래에 가격이 적힌 흰 상품 카드를 놓았습니다. 2. 제형으로 고르기 - 클레이, 밤, 무스, 크림, 오일, 고체 여섯 칸 텍스처 타일을 누르면 아래 상품 네 개가 바뀝니다. 3. 제형 칩과 원료 산지 - 카드 사진 왼쪽 아래에 제형 사진 원형 칩을, 상품명 아래에 원료 산지 한 줄을 붙였습니다. 4. 원료 산지 밴드 - 테라코타 면에 산지와 원료, 가공 방식, 그 원료로 만든 상품 가격을 함께 보여 줍니다. 5. 리필 계산기 - 제품과 1년 사용 개수를 고르면 본품만 살 때와 리필을 쓸 때의 비용, 1년 절약액, 줄어드는 플라스틱 양이 나옵니다. [디자인] - 짙은 흙색과 테라코타, 연한 흙분홍 면을 번갈아 써서 흙냄새 나는 인상을 냈습니다. - 한글 제목은 Gowun Batang 명조, 본문과 가격은 Pretendard, 워드마크는 Cormorant입니다. - 상품 카드는 4:5 비율에 모서리 없이 두고 칩과 버튼만 둥글렸습니다. [범위] - 메인 페이지 PC·모바일 반응형 디자인과 퍼블리싱 - 상품 카드는 반복 구조로 짜서 카페24 메인 진열 모듈로 옮길 수 있는 구조
ASSAY 어세이 더마 화장품 쇼핑몰 디자인
분야: 디자인 · 퍼블리싱 / 웹 / 쇼핑몰, 카페24, 반응형 참여 기간: 2026.10 관련 기술: 카페24 스마트디자인, HTML5, CSS3, JavaScript, 반응형 웹 [프로젝트 개요] 성분과 함량을 따져 고르는 손님을 위한 더마 화장품 몰입니다. 첫 화면에 대표 제품 하나와 함량, pH, 용량을 숫자 표로 올려 무엇이 몇 % 들었는지가 먼저 보이게 했습니다. 아래로 많이 산 제품, 성분으로 찾기, pH로 보는 전 제품, 같이 써도 되는지 표가 이어집니다. 세럼, 토너, 크림, 선케어, 클렌저, 아이크림 12종으로 구성했습니다. [주요 기능] 1. 함량 판독 카드 - 모든 상품 카드에 주성분 두 가지의 %와 막대, pH 점, 제조월을 표기했습니다. 2. 첫 화면 판독표 - 제품명 아래 함량, pH, 용량을 네 칸 숫자 표로 놓고 로트 번호와 제조일을 함께 적었습니다. 3. 성분으로 찾기 - 성분 탭 여섯 개를 누르면 왼쪽에 권장 함량과 잘 맞는 pH, 같이 쓰는 법이, 오른쪽에 함량 순 제품 표와 담기 버튼이 나옵니다. 4. pH 점 그래프 - 전 제품을 pH 순으로 한 줄씩 놓고 피부 표면 pH 범위 띠 위에 점으로 찍었습니다. 5. 같이 써도 되는지 표 - 성분끼리 같이, 아침과 저녁 나눠서, 다른 날로 쓰는지를 표로 정리하고 옆에 단계별 가격과 세트 할인이 붙은 루틴 세트 두 개를 두었습니다. [디자인] - 흰 바탕과 연회색 면, 가는 선과 표로 실험실처럼 정돈하고 민트를 막대와 혜택 띠에, 짙은 민트를 할인율과 순위에 썼습니다. - 한글은 Pretendard, 숫자와 영문은 IBM Plex Sans로 나눠 숫자가 또렷하게 읽히게 했습니다. - 상품 카드는 1:1 비율에 모서리 없이 4열로 놓았습니다. [범위] - 메인 페이지 PC·모바일 반응형 디자인과 퍼블리싱 - 상품 카드는 반복 구조로 짜서 카페24 메인 진열 모듈로 옮길 수 있는 구조
HOPSCOTCH 홉스카치 양말 모자 소품 쇼핑몰 디자인
분야: 디자인 · 퍼블리싱 / 웹 / 쇼핑몰, 카페24, 반응형 참여 기간: 2026.10 관련 기술: 카페24 스마트디자인, HTML5, CSS3, JavaScript, 반응형 웹 [프로젝트 개요] 양말, 모자, 헤어소품처럼 단가가 낮고 종류가 많은 소품 몰입니다. 섹션 바탕을 깅엄과 스트라이프 무늬로 깔고 둥근 글꼴과 굵은 선을 써서 경쾌하게 만들었고, 여러 개를 함께 담을수록 이득인 구조를 첫 화면부터 보여 줍니다. 아래로 많이 산 것, 3+1 묶음 만들기, 새로 들어온 모자, 양말 사이즈와 모자 머리둘레 안내가 이어집니다. [주요 기능] 1. 무늬 바탕 섹션 - 첫 화면은 분홍 깅엄, 묶음 칸은 버터색 스트라이프, 사이즈 칸은 초록 깅엄으로 깔았습니다. 무늬는 이미지 없이 CSS로만 그렸습니다. 2. 3+1 양말 묶음 만들기 - 양말 여섯 종에서 네 켤레를 고르면 오른쪽 칸이 차고 가장 싼 한 켤레가 자동으로 빠지며 결제 금액이 계산됩니다. 3. 무늬로 고르기 탭 - 스트라이프, 무지, 컬러믹스 탭 앞에 작은 무늬 원을 두고 카드에도 같은 무늬를 표시했습니다. 4. 머리둘레 슬라이더 - 52~62cm 사이에서 머리둘레를 고르면 버킷햇, 비니, 볼캡의 맞는 사이즈가 문장으로 나옵니다. 5. 둥근 칸과 굵은 선 - 모든 칸을 2px 선과 둥근 모서리로 감싸고 순위는 버터색 원 숫자로 표시했습니다. [디자인] - 토마토, 분홍, 초록, 버터, 하늘 다섯 색과 짙은 잉크 선으로 피크닉 담요 같은 인상을 냈습니다. - 한글 제목은 둥근 Jua, 영문은 Fredoka, 본문과 가격은 Pretendard입니다. - 상품 카드는 1:1 비율에 그림자 없이 선으로만 구분했습니다. [범위] - 메인 페이지 PC·모바일 반응형 디자인과 퍼블리싱 - 상품 카드는 반복 구조로 짜서 카페24 메인 진열 모듈로 옮길 수 있는 구조
STOCKROOM 스톡룸 가방 신발 카탈로그 쇼핑몰 디자인
분야: 디자인 · 퍼블리싱 / 웹 / 쇼핑몰, 카페24, 반응형 참여 기간: 2026.10 관련 기술: 카페24 스마트디자인, HTML5, CSS3, JavaScript, 반응형 웹 [프로젝트 개요] 가방과 신발을 여러 종 파는 셀렉트숍과 도매형 몰을 위한 디자인입니다. 분위기 사진 대신 흰 바탕 누끼와 품번, 색, 사이즈 재고를 앞세워 인쇄 카탈로그처럼 빠르게 비교하도록 했습니다. 첫 화면 표지 격자에 상품 다섯 개의 가격이 보이고, 아래로 가방, 신발, 색상으로 고르기, 신발 사이즈 찾기, 사진 속 상품이 이어집니다. 가방 18종과 신발 20종으로 구성했습니다. [주요 기능] 1. 카탈로그 표지 - 1px 선 격자에 큰 칸 하나와 작은 칸 네 개를 두고 누끼 사진, 품번, 가격, 색 스와치를 넣었습니다. 2. 색상으로 고르기 - 색 원 열한 칸에 개수를 적고, 누르면 그 색 상품만 남습니다. 결과가 없으면 조건 지우기 버튼이 나옵니다. 3. 격자와 표 보기 전환 - 표 보기로 바꾸면 사진, 품번, 이름, 색, 스펙, 사이즈 범위, 판매가가 한 줄씩 정리됩니다. 4. 카드 스펙과 사이즈 재고 - 가방은 크기와 무게, 신발은 굽과 소재, 핏을 적고 사이즈별 재고 칸에서 품절은 회색 취소선으로 표시합니다. 5. 신발 사이즈 찾기 - 발 길이와 발볼, 신발 종류를 고르면 맞는 사이즈를 큰 숫자로 보여 주고 KR, EU, US 표의 해당 칸을 강조합니다. [디자인] - 흰 바탕과 무채색으로 정리하고 할인 빨강 한 색만 남겼습니다. - 워드마크와 품번, 큰 숫자는 넓은 폭 Archivo, 한글은 Pretendard로 맞췄습니다. - 상품 카드는 1:1 흰 누끼이고, 카드끼리 1px 선을 공유해 카탈로그 지면처럼 붙였습니다. [범위] - 메인 페이지 PC·모바일 반응형 디자인과 퍼블리싱 - 상품 카드는 반복 구조로 짜서 카페24 메인 진열 모듈로 옮길 수 있는 구조
LODESTAR 로드스타 파인 주얼리 쇼핑몰 디자인
분야: 디자인 · 퍼블리싱 / 웹 / 쇼핑몰, 카페24, 반응형 참여 기간: 2026.10 관련 기술: 카페24 스마트디자인, HTML5, CSS3, JavaScript, 반응형 웹 [프로젝트 개요] 진주, 다이아몬드, 금 반지처럼 단가가 높은 파인 주얼리 브랜드를 위한 몰입니다. 밤하늘 남색 바탕에 금선과 세리프 글자를 써서 보석함을 여는 인상을 냈고, 사진은 확대 디테일로, 설명은 순도와 중량, 캐럿 숫자로 보여 줍니다. 첫 화면 아래로 많이 고른 주얼리, 확대 보기, 신상품, 반지 호수 찾기, 각인 미리보기, 공방 소개가 이어집니다. [주요 기능] 1. 금선 액자 첫 화면 - 남색 면 안에 얇은 금선 프레임을 두르고 왼쪽에 세리프 제목과 대표 상품, 오른쪽에 진주 클로즈업을 놓았습니다. 2. 루페 확대 - 사진 위에 마우스를 올리면 원형 렌즈가 2.6배로 확대하고, 옆에 캐럿, 컬러, 투명도, 세팅, 밴드 폭 표를 둡니다. 3. 반지 호수 찾기 - 5호부터 21호까지 칩을 누르면 원 크기와 둘레, 안지름이 바뀌고 측정 링 신청으로 이어집니다. 4. 각인 미리보기 - 입력한 글자가 금 밴드 안쪽에 바로 새겨져 보이며 서체 세 가지 가운데 고를 수 있습니다. 5. 소재와 중량 카드 - 카드마다 소재와 중량, 옐로, 로즈, 화이트 금색 옵션 칩을 붙였습니다. [디자인] - 남색 바탕과 금색 선, 옅은 안개색 면으로 밤의 보석함 같은 인상을 냈습니다. - 한글 제목은 Noto Serif KR, 영문 라벨은 Cormorant Garamond 이탤릭, 본문과 가격은 Pretendard로 나눴습니다. - 상품 카드는 4:5 비율에 모서리와 그림자 없이 두었습니다. [범위] - 메인 페이지 PC·모바일 반응형 디자인과 퍼블리싱 - 상품 카드는 반복 구조로 짜서 카페24 메인 진열 모듈로 옮길 수 있는 구조
HOLDLINE 홀드라인 애슬레저 요가웨어 쇼핑몰 디자인
분야: 디자인 · 퍼블리싱 / 웹 / 쇼핑몰, 카페24, 반응형 참여 기간: 2026.10 관련 기술: 카페24 스마트디자인, HTML5, CSS3, JavaScript, 반응형 웹 [프로젝트 개요] 요가, 필라테스, 러닝을 하는 손님을 위한 애슬레저 몰입니다. 첫 화면 오른쪽 딥 틸 면을 고르는 판으로 만들어 운동 강도를 누르면 조임 정도를 나타낸 핏 단계와 상품 세 개가 바로 바뀝니다. 굵기가 다른 선 네 개로 핏 단계를 나타내는 표시를 로고, 카드, 필터, 모바일 하단 탭까지 같은 모양으로 반복했습니다. 레깅스, 롱슬리브, 브라탑, 후디, 남성 티와 조거, 요가 소품으로 구성했습니다. [주요 기능] 1. 운동 강도 선택판 - 회복, 요가, 웨이트, 러닝 네 칸에서 강도를 고르면 핏 단계와 상품 세 개의 가격, 담기 버튼이 바뀝니다. 2. 핏 단계 막대 - 굵기가 늘어나는 선 네 개를 로고, 카드, 필터, 하단 탭에 같은 모양으로 쓰고 카드마다 단계와 맞는 운동을 한 줄로 적었습니다. 3. 베스트 핏 단계 거르기 - 종류 탭 옆 핏 단계 버튼을 누르면 다른 단계 카드는 흐려집니다. 4. 핏 단계 4가지 표 - 단계별 원단 무게, 혼용률, 늘어나는 정도, 맞는 운동과 대표 상품 가격을 한 표로 보여 줍니다. 5. 레깅스 기장 고르기 - 키를 고르면 21, 23, 25, 28인치 막대 위에 끝나는 자리가 표시되고 가장 맞는 기장이 강조됩니다. [디자인] - 딥 틸 한 색과 흰 바탕, 차가운 틸 회색 면만으로 정돈된 스튜디오 인상을 냈습니다. 할인도 빨강 없이 틸로 표시합니다. - Pretendard 한 서체로 로고 영문까지 맞췄습니다. - 상품 카드는 3:4 비율에 모서리를 살짝 둥글렸습니다. [범위] - 메인 페이지 PC·모바일 반응형 디자인과 퍼블리싱 - 상품 카드는 반복 구조로 짜서 카페24 메인 진열 모듈로 옮길 수 있는 구조
SECOND RAIL 세컨드레일 빈티지 리세일 쇼핑몰 디자인
분야: 디자인 · 퍼블리싱 / 웹 / 쇼핑몰, 카페24, 반응형 참여 기간: 2026.10 관련 기술: 카페24 스마트디자인, HTML5, CSS3, JavaScript, 반응형 웹 [프로젝트 개요] 1980~2000년대 레더, 데님, 트렌치, 울 코트 같은 빈티지 옷을 한 점씩 파는 리세일 몰입니다. 첫 화면에 검은 레일 바를 두고 오늘 입고된 옷을 옷걸이에 걸린 모양으로 늘어놓았으며, 판매된 옷도 판매완료 도장을 찍은 채 그대로 걸어 둡니다. 모든 상품에 고유번호, 컨디션 등급, 실측을 붙여 사진만으로 알기 어려운 상태를 숫자로 확인하게 했습니다. [주요 기능] 1. 오늘의 레일 - 고리로 걸린 오늘 입고 다섯 점과 남은 옷, 판매 완료 수, 다음 입고 카운트다운을 첫 화면에 둡니다. 2. 올리브 꼬리표 - 모든 카드 왼쪽 위에 고유번호와 등급을 적은 꼬리표를 달고, 품목 칩과 등급 표, 후기까지 같은 모양을 씁니다. 3. 내 옷 치수와 비교 - 잘 맞는 겉옷의 어깨, 가슴, 총장을 넣으면 카드마다 차이가 계산되고 잘 맞는 옷만 걸러 볼 수 있습니다. 4. 컨디션 등급과 흠 표시 - S, A, B, C 등급 정의와 함께 상세 사진 위에 흠 위치 번호와 크기를 표시합니다. 5. 가격 내림 표와 내 옷 팔기 - 입고 14일 뒤부터 7일마다 10%씩 내려가는 가격 표와, 수거 박스 4단계와 예상 판매가를 보여 주는 판매 신청 칸을 두었습니다. [디자인] - 흰 바탕과 짙은 레일 색 위에 올리브 한 색을 꼬리표, 할인율, 주 버튼에만 씁니다. - 한글은 Pretendard, 로고와 고유번호, 실측 숫자는 좁은 폭 Archivo로 나눴습니다. - 상품 카드는 3:4 비율에 모서리 없이 두었습니다. [범위] - 메인 페이지 PC·모바일 반응형 디자인과 퍼블리싱 - 상품 카드는 반복 구조로 짜서 카페24 메인 진열 모듈로 옮길 수 있는 구조
CHALKLINE 초크라인 남성 맞춤 수트 쇼핑몰 디자인
분야: 디자인 · 퍼블리싱 / 웹 / 쇼핑몰, 카페24, 반응형 참여 기간: 2026.10 관련 기술: 카페24 스마트디자인, HTML5, CSS3, JavaScript, 반응형 웹 [프로젝트 개요] 남성 맞춤 수트와 셔츠를 파는 테일러링 몰입니다. 원단 번호를 고르고 치수 9개를 넣으면 21일 뒤 수트가 도착한다는 주문 흐름을 화면 순서 그대로 배치했습니다. 첫 화면에 이번 주 원단 티켓과 실측 라벨을 두고, 아래로 원단 견본, 많이 맞춘 수트, 치수 입력, 주문 뒤 진행 단계, 쇼룸 실측 예약이 이어집니다. 맞춤 수트, 셔츠, 재킷, 코트, 바지와 원단 8종 견본으로 구성했습니다. [주요 기능] 1. 이번 주 원단 티켓 - 차콜 면에 패턴 조각을 점선 초크 선으로 깔고 원단 확대 사진, 원단 번호, 맞춤가를 절취선 티켓에 담았습니다. 오른쪽 실측 사진에는 어깨너비와 소매길이 라벨을 붙였습니다. 2. 원단 견본 8종 - 확대 사진과 셀비지 띠에 원단 번호, 혼용률, 계절을 적고 분류 칩으로 거릅니다. 누르면 주문서에 바로 담깁니다. 3. 치수 입력 - 모델과 A~I 아홉 칸 치수를 넣고 핏을 고르면 완성 치수 표, 기성 사이즈 환산, 옵션 합계, 출고일이 자동으로 계산됩니다. 4. 주문 뒤 21일 - 주문 후 1일, 3일, 10일, 21일에 무엇이 진행되는지 순서대로 보여 줍니다. 5. 쇼룸 실측 예약 - 날짜별 남은 자리와 시간을 고르는 예약 칸이며 마감된 시간은 따로 표시합니다. [디자인] - 차콜과 차가운 회색 면 위에 스틸 블루 한 색을 할인율, 선택 원단, 주 버튼에만 썼습니다. - 한글과 가격은 Pretendard, 로고와 원단 번호, 치수 기호는 Cormorant Garamond로 나눴습니다. - 상품 카드는 3:4, 원단 견본은 4:3 비율에 모서리 없이 두었습니다. [범위] - 메인 페이지 PC·모바일 반응형 디자인과 퍼블리싱 - 상품 카드는 반복 구조로 짜서 카페24 메인 진열 모듈로 옮길 수 있는 구조
OVERCAST 오버캐스트 룩북형 여성 의류 쇼핑몰 디자인
분야: 디자인 · 퍼블리싱 / 웹 / 쇼핑몰, 카페24, 반응형 참여 기간: 2026.10 관련 기술: 카페24 스마트디자인, HTML5, CSS3, JavaScript, 반응형 웹 [프로젝트 개요] 시즌마다 룩북을 찍는 여성 의류 브랜드를 위한 몰입니다. 첫 화면부터 착장 여섯 벌이 각각 화면 전체를 채우고, 스크롤할 때마다 한 착장씩 넘어갑니다. 착장마다 입은 상품 두세 개의 이름과 가격, 착장째 담기 버튼을 붙여 보는 흐름이 곧 사는 흐름이 되도록 했습니다. 코트, 재킷, 블레이저, 원피스, 니트로 구성했습니다. [주요 기능] 1. 풀스크린 착장 룩북 - 착장 하나가 화면 높이를 가득 채우고 스크롤 스냅으로 넘어갑니다. 헤더는 룩북 위에서 투명하게 두었습니다. 2. 착장 패널 - 착장마다 왼쪽 아래 작은 패널에 룩 번호와 입은 상품 이름, 가격, 착장째 담기 버튼을 넣었습니다. 3. 착장째 담기 시트 - 상품마다 사이즈 칩을 고르고 빼고 싶은 상품은 체크를 풉니다. 전부 담으면 5% 할인되고, PC는 오른쪽 서랍, 모바일은 아래 시트로 열립니다. 4. 룩북 목차 - 착장 사진과 벌 수, 합계 금액을 담은 여섯 칸 목차에서 원하는 착장으로 바로 이동합니다. [디자인] - 차가운 회색 바탕에 스틸 블루 한 점을 할인율, 활성 탭, 담기 버튼에만 썼습니다. - Pretendard 한 서체로 글자를 줄이고 제호만 자간을 넓혀 사진이 주인공이 되게 했습니다. - 상품 카드는 3:4 비율에 모서리 없이 두었습니다. [범위] - 메인 페이지 PC·모바일 반응형 디자인과 퍼블리싱 - 상품 카드는 반복 구조로 짜서 카페24 메인 진열 모듈로 옮길 수 있는 구조
CURBSIDE 커브사이드 스트릿 캐주얼 쇼핑몰 디자인
분야: 디자인 · 퍼블리싱 / 웹 / 쇼핑몰, 카페24, 반응형 참여 기간: 2026.10 관련 기술: 카페24 스마트디자인, HTML5, CSS3, JavaScript, 반응형 웹 [프로젝트 개요] 숏패딩, 후디, 카고 팬츠처럼 오버핏이 많은 스트릿 캐주얼을 파는 몰입니다. 첫 화면은 크기가 다른 사진 칸을 엇갈려 놓은 격자로 짜고 칸마다 상품 이름과 가격 태그를 붙여 이번 주 주력 상품이 바로 보이게 했습니다. 그 아래로 실시간 랭킹, 사이즈 찾기, 셋업 묶음, 구매 후기 스냅이 이어집니다. 숏패딩, 후디, 카고 팬츠, 티셔츠, 셋업으로 구성했습니다. [주요 기능] 1. 비대칭 사진 격자 첫 화면 - 큰 칸 하나와 사진 세 칸, 할인 쿠폰 칸을 엇갈려 배치하고 사진마다 검정 상품 태그에 이름과 가격을 적었습니다. 2. 실시간 랭킹 5열 - 검정 사각에 라임 순위 숫자를 넣고, 할인율은 라임 바탕 검정 글자로 강조했습니다. 3. 내 사이즈 찾기 - 품목 세 가지와 키, 몸무게, 정핏과 오버핏 가운데 원하는 핏을 고르면 큰 사이즈 숫자와 실측이 나오고 바로 담을 수 있습니다. 4. 셋업 묶음 담기 - 상하의 두 벌을 함께 담으면 10% 할인되는 묶음 진열입니다. 5. 구매 후기 스냅 - 후기 사진을 비대칭 격자로 놓고 키, 몸무게, 구매 사이즈 라벨을 붙였습니다. [디자인] - 아스팔트 검정과 콘크리트 회색 위에 라임 한 색을 혜택 띠, 할인율, 순위, 주 버튼에만 씁니다. - 영문 제목과 숫자는 Anton 콘덴스드, 한글은 Pretendard 굵은 글자로 맞췄습니다. - 2px 굵은 선과 모서리 없는 4:5 카드로 거리 포스터 같은 힘을 냈습니다. [범위] - 메인 페이지 PC·모바일 반응형 디자인과 퍼블리싱 - 상품 카드는 반복 구조로 짜서 카페24 메인 진열 모듈로 옮길 수 있는 구조
월요판 MONDAY EDITION 코트 니트 쇼핑몰 디자인
분야: 디자인 · 퍼블리싱 / 웹 / 쇼핑몰, 카페24, 반응형 참여 기간: 2026.10 관련 기술: 카페24 스마트디자인, HTML5, CSS3, JavaScript, 반응형 웹 [프로젝트 개요] 코트와 니트처럼 설명할 거리가 많은 남녀 의류를 파는 몰입니다. 새 옷이 들어오는 월요일을 신문의 호수로, 카테고리를 지면으로 불러 첫 화면이 신문 1면처럼 읽히도록 설계했습니다. 명조 헤드라인 아래 흑백 사진과 입고 소식을 두고, 오른쪽 지면 색인에 상품과 가격을 함께 놓았습니다. 울 코트, 트렌치, 블레이저, 니트를 중심으로 구성했습니다. [주요 기능] 1. 신문 1면 첫 화면 - 발행일과 호수가 적힌 제호 아래 명조 헤드라인, 흑백 사진 두 장, 두 단 본문을 놓고 오른쪽 색인에 지면 번호와 상품, 가격을 붙였습니다. 2. 기온별 아우터 표 - 날씨 상자 자리에 기온 구간별 겉옷 표를 두어 구간을 누르면 맞는 상품 목록으로 이동합니다. 3. 흑백 상품 사진 - 사진은 흑백으로 두고 카드에 마우스를 올리면 원래 색이 나타납니다. 빨강은 호수, 할인율, 장바구니 수에만 씁니다. 4. 치수표 지면 - 품목을 고르면 실측표가 나오고, 가진 겉옷의 가슴 단면을 넣으면 가장 가까운 사이즈 행이 강조됩니다. 5. 독자 투고와 판권 푸터 - 구매 후기는 독자 투고, 공지는 알림, 푸터는 판권 형식으로 신문의 틀을 끝까지 이었습니다. [디자인] - 흰 종이 바탕에 검정 실선과 가는 회색 선으로 지면을 나누고, 빨강 한 색만 포인트로 씁니다. - 제호와 헤드라인, 상품명은 Noto Serif KR 명조, 가격과 정보는 Pretendard로 나눴습니다. - 상품 카드는 3:4 세로 비율에 모서리 없이 두고, 4열 사이에 세로 단 구분선을 넣었습니다. [범위] - 메인 페이지 PC·모바일 반응형 디자인과 퍼블리싱 - 상품 카드는 반복 구조로 짜서 카페24 메인 진열 모듈로 옮길 수 있는 구조
SOUL 홈페이지 — AI 상담원이 맞이하는 대화형 회사 홈페이지
분야: 개발 · 디자인 · 기획 / 웹 / 홈페이지, AI 챗봇·RAG, 관리자(CMS) 참여 기간: 2026.07 ~ 2026.09 관련 기술: Next.js 16, React 19, TypeScript, Tailwind CSS 4, Vercel AI SDK, Claude API, RAG(OpenAI 임베딩 + PostgreSQL pgvector), AWS S3, MCP [프로젝트 개요] 소울의 회사 홈페이지입니다. 소개 페이지를 스크롤하는 대신, 첫 화면에서 AI 상담원과 대화하며 회사·서비스·작업 사례를 알아보고 바로 견적 문의까지 남길 수 있는 앱형 대화 화면으로 만들었습니다. 왼쪽 메뉴와 가운데 대화창, 두 영역만으로 모든 정보를 보여줍니다. [주요 기능] 1. 대화형 첫 화면 - 왼쪽 메뉴(작업·서비스·진행 절차·회사소개·견적 문의)를 누르면 실제 데이터로 만든 카드가 대화창에 바로 나타납니다. - 자유 질문에는 AI 상담원이 실시간으로 답합니다. - RAG 검색: 작업 사례를 물으면 포트폴리오 설명을 임베딩한 벡터 검색으로 질문과 가장 가까운 사례를 찾아, 근거 사례를 이미지 카드로 함께 보여줍니다(예: "교육 앱 만들어 본 적 있어요?" → 다음칸 사례 카드). - 추천 질문 버튼, 새로고침해도 이어지는 대화, 새 대화 시작 지원. 2. 대화창 안 사례 상세 - 작업 카드를 누르면 페이지를 옮기지 않고 대화창 안에서 이미지를 넘겨 보고 설명을 펼쳐 봅니다. - "이 사례와 비슷하게 상담하기"로 바로 문의 대화를 시작할 수 있습니다. 3. 견적 문의 - 대화 중 문의 폼으로 이름·연락처·내용을 남기면 접수되고, 대화 내용을 AI가 요약해 담당자에게 전달합니다. - 임시 휴무일·운영시간을 반영해 응답 시점을 안내합니다. 4. 테마와 모바일 - 웜(기본)·라이트 두 테마를 전환할 수 있고, 선택은 다음 방문에도 유지됩니다. - 모바일에서는 메뉴가 서랍으로 접혀 대화 화면을 넓게 씁니다. 5. 관리자와 AI 에이전트 연동 - 관리자 화면에서 대화 통계·인기 질문, 문의, 포트폴리오, 회사 정보, 휴무일을 관리합니다. - 같은 관리 기능을 MCP 도구로도 제공해, AI 에이전트가 대화로 포트폴리오 등록·회사 정보 수정을 할 수 있습니다. [기술적 특징] - 메뉴 답변은 AI를 거치지 않는 데이터 카드, 자유 질문만 AI 호출 — 응답 속도와 비용을 함께 잡음 - RAG: 포트폴리오를 등록·수정하면 제목과 설명을 자동으로 임베딩해 pgvector 에 저장하고, 질문이 들어오면 코사인 유사도로 사례를 찾아 AI 답변의 근거로 넘김 — 사례를 추가하는 즉시 상담원이 그 사례로 답할 수 있음 - AI 제공사 장애·한도 초과 시 다른 모델로 자동 전환 - 검색엔진용 서비스·회사소개·포트폴리오 페이지와 sitemap·OG 이미지 별도 제공 [성과 및 가치] - 방문자 응대·사례 소개·문의 접수를 24시간 한 화면에서 처리 - 회사 정보와 포트폴리오를 한 번 고치면 화면과 AI 답변에 함께 반영되는 운영 구조 - AI 에이전트가 직접 사이트를 관리할 수 있는 기반 마련
다음칸 — 문제 사진 한 장으로 한 단계씩 같이 푸는 AI 수학 과외 앱
분야: 개발 · 디자인 · 기획 / iOS, Android / 교육ㆍ학습, AI 튜터, 모바일 앱 참여 기간: 2026.09 관련 기술: Flutter, Dart, Python FastAPI, PostgreSQL, Claude API, SymPy, AWS S3, Apple·Google 로그인 [프로젝트 개요] 다음칸은 학생이 막힌 수학 문제를 사진으로 찍으면, 과외 선생님처럼 한 단계씩 대화하며 같이 풀어 주는 모바일 앱입니다. 답만 알려주는 풀이 앱이 아니라 "어디서 막혔는지"를 먼저 묻고, 학생 수준에 맞춰 설명하고, 자주 막히는 부분을 기억해 맞춤 연습 문제로 이어지도록 설계했습니다. 기획·디자인(앱 이름·로고 포함)·앱·서버 개발을 모두 소울이 직접 했습니다. [주요 기능] 1. 사진 인식과 확인 - 문제 사진을 찍으면 AI가 문제·수식·보기를 읽어 원본 사진과 나란히 보여줍니다. - 읽은 내용이 틀리면 바로 신고할 수 있고, 신고 내용은 인식 품질 개선에 쓰입니다. - 객관식 보기(①~⑤)와 <보기> ㄱㄴㄷ 합답형, 그래프가 있는 문제까지 읽습니다. 2. 도움 방식 선택 - 풀이 전에 "처음부터 같이 풀기 / 막힌 부분만 / 힌트만 / 답만 확인" 중 원하는 방식을 고릅니다. - 같은 문제로 다시 들어오면 하던 단계부터 이어서 할지, 처음부터 다시 할지 선택할 수 있습니다. 3. 한 단계씩 대화형 풀이 - 단계마다 식의 변화를 카드로 보여주고, 바뀐 부분을 강조해 설명합니다. - "이해했어요 / 이 부분 모르겠어요"로 답하면, 모르는 단계는 더 잘게 나눠 쉬운 말로 다시 설명합니다. - 학생 수준을 기억해 다음 문제부터 설명 깊이를 맞춥니다. 4. AI 답 검산 - AI가 낸 최종 답은 수식 계산 엔진(SymPy)으로 한 번 더 확인하고, 계산으로 확인이 어려운 문제는 별도 교차 확인을 거칩니다. 5. 약점 기록과 맞춤 연습 - 어느 단계에서 자주 막히는지, 단원별 이해도를 기록 화면에서 보여줍니다. - 약점에 맞춘 연습 문제를 3개씩 새로 만들어 내고, 정답은 계산으로 검증한 문제만 냅니다. - 그래프 문제는 AI가 만든 설계도로 앱이 직접 그래프를 그려, 그림과 정답이 어긋나지 않게 했습니다. [기술적 특징] - Flutter 한 코드로 안드로이드·iOS, 폰·태블릿을 함께 지원 - 수식은 LaTeX로 통일해 앱에서 수학 기호 그대로 표시 - 문제 사진은 비공개 저장소에 보관, Apple·Google 계정 로그인과 앱 안 회원 탈퇴 지원 - 풀이 계획을 사진 인식 직후 미리 만들어 대화 시작 대기 시간을 줄임 - 앱 실행 시 새 버전 안내, 하루 사용 한도 등 운영 기능을 서버 설정만으로 조절 [성과 및 가치] - 사진 촬영부터 풀이·연습까지 한 흐름으로 이어지는 학습 경험 구현 - AI 설명에 계산 검증을 붙여 수학 앱에서 가장 중요한 "틀린 답" 위험을 낮춤 - 기획·브랜딩·디자인·앱·서버 개발을 한 팀에서 끝낸 사례