완성 프로젝트 URL ⬇️
https://sulbing-clone.vercel.app/
Main 페이지
Brand 페이지
Menu 페이지
Menu 상세페이지
| 박경빈 | 배기열 | 이석진 | 이나영 | 임나연 |
|---|---|---|---|---|
 |
 |
 |
 |
 |
| GitHub | GitHub | GitHub | GitHub | GitHub |
학습 목적에 맞게 설빙 페이지를 재설계 및 클론
프로젝트 기간 : 2025-05-16 ~ 2025-05-19
| 페이지 | 담당자 | 주요 기능 |
|---|---|---|
| 메인페이지 | 이석진 | 메인 배너, 메뉴 섹션, SNS |
| 브랜드 페이지 | 이나영 | 설빙 스토리, 연혁 BI 소개 |
| 메뉴 페이지 | 박경빈, 임나연 | 전체 메뉴, 카테고리별 메뉴 (설빙, 사이드, 음료) |
| 뉴스 & 고객센터 | 배기열, 이나영 | 공지사항, FAQ, 온라인 고객센터 상담 내역 |
| 매장 찾기 | 이석진 | 지도 API 연동 |
| 푸터 | 임나연 | 공통 하단 정보 |
| ID | Function Description | Note |
|---|---|---|
| H1 | 공통 헤더가 페이지 상단에 고정되어야 한다 | <Header> 컴포넌트로 공통 구성 |
| H2 | 로고 및 주요 메뉴(BRAND, MENU, NEWS, STORE)를 포함해야 한다. | 메뉴 항목은 링크로 구성 (내부 라우팅 사용) |
| ID | Function Description | Note |
|---|---|---|
| <메인 배너> | ||
| HMB1 | 메인 배너는 슬라이드 형식으로 자동/수동 전환이 가능해야 한다. | |
| HMB2 | 슬라이드는 좌/우 화살표 및 하단 도트 인디케이터가 포함되어야 한다. | |
| HMB3 | 각 슬라이드는 이미지 배너를 포함하며, 링크로 구성되어야 한다. | |
| <MENU 섹션> | ||
| HMS1 | '사이드', '음료' 메뉴 카테고리 버튼이 제공되어야 한다. | |
| HMS2 | 각 메뉴에 대한 썸네일 목록이 표시되어야 한다. | 이미지 + 제품명 구성, 최대 6개 |
| <SNS 섹션> | ||
| SNS1 | SNS 로고 아이콘 (Facebook, Instagram, YouTube) 포함 | |
| SNS2 | Instagram 포스트에 대한 썸네일 목록이 표시되어야 한다. | 이미지 링크 구성, 최대 4개 |
| <기타> | ||
| HH1 | 하단에는 [STORE]와 [창업안내] 버튼이 좌우로 배치되어야 한다. | 클릭시 각 페이지로 이동 |
| HH2 | 페이지가 로드되면 눈꽃이 내리는 애니메이션이 표시된다. | 우선순위 낮음 |
| ID | Function Description | Note |
|---|---|---|
| ST1 | 왼쪽에는 검색 섹션이 표시되어야 한다. | |
| ST2 | 도/시, 구/군, 매장명으로 검색이 가능해야 한다. | |
| ST6 | 검색 버튼을 누르면 아래에 검색 결과가 나열되어야 한다. | |
| ST3 | 오른쪽에는 지도가 표시되어야 한다. | 카카오맵 API 사용 |
| ST4 | 지도는 상호작용 가능해야 한다 (확대, 축소, 이동) | 카카오맵 API 사용 |
| ST5 | 지도에는 전국 매장의 위치가 표시되어야 한다. | 매장 목록은 별도의 더미데이터를 작성 |
| ID | Function Description | Note |
|---|---|---|
| F1 | 공통 헤더가 페이지 상단에 고정되어야 한다 | <Header> 컴포넌트로 공통 구성 |
| F2 | 푸터는 로고, 메뉴, 회사 정보 등 모든 텍스트가 포함된 하나의 통합 이미지로 구성되어야 한다. | |
| F3 | 이미지 위에 ‘고객센터’, ‘개인정보처리방침’, ‘이메일무단수집거부’, ‘법적고지’, ‘경영주 전용 페이지’ 등 클릭 가능한 영역을 투명 링크 영역으로 정확하게 매핑해야 한다. | |
| F4 | 푸터 이미지 내에 포함된 회사 사업자 정보, 연락처 등은 모두 이미지 안에 표현되어야 하며, 별도의 텍스트로 구현하지 않는다. | <a> 태그로 투명한 절대 위치 영역 지정 |
| F5 | 모바일 환경에서도 이미지가 선명하게 보이고, 투명 링크 영역들이 동일하게 정확히 작동해야 한다. | |
| F6 | 푸터 내 모든 링크는 시멘틱 <footer> 태그 내에 포함되고, 접근성을 위해 각 링크에 aria-label 등 적절한 속성이 부여되어야 한다. |
| ID | Function Description | Note |
|---|---|---|
M1 |
GNB (Global Navigation Bar) 에서 “Menu” 항목 클릭 시 메뉴 목록 페이지로 이동 및 Subtab 카테고리와 메뉴목록이 정상적으로 표시되어야 함 |
|
M2 |
“Menu” 페이지 이동 후 각 Subtab 카테고리 클릭 시 메뉴 목록이 카테고리에 맞게 표시되어야 함 |
|
M3 |
“Menu” 페이지에서 각 메뉴 항목 클릭 시 메뉴 상세 페이지로 이동 및 메뉴 슬라이드와 상세 메뉴가 정상적으로 표시되어야 함 |
|
M4 |
메뉴 상세 페이지에서 메뉴 슬라이드 Up/Down 버튼 클릭 시 슬라이드 페이지가 위 아래로 이동되어야 함 |
|
M5 |
메뉴 상세 페이지에서 메뉴 슬라이드 내 각 메뉴 이미지 클릭 시 메뉴가 해당 메뉴로 변경되어야 함 |
| ID | Function Description | Note |
|---|---|---|
BF1 |
서브 내비게이션 클릭 시 해당 섹션(설빙 스토리 / 연혁 / BI 화면)으로 앵커 이동할 수 있다. | |
BF2 |
설빙 스토리 페이지에 텍스트와 이미지가 정상적으로 표시된다. | |
BF3 |
연혁 페이지에서 연도별 상세 텍스트가 정상적으로 표시된다. | |
BF4 |
BI 페이지에 LOGO 및 SYMBOL 동영상 파일이 업로드 되어 페이지 내에서 원할히 재생 가능해야 한다. |
| ID | Function Description | Note |
|---|---|---|
| D1 | 공지 사항에서 정보 제공 | 사용자가 원하는 목록 클릭 시 해당 정보 제공 |
| D2 | 질문 타이틀 내용 클릭 시 상세 정보 제공 | FAQ에서 토글 클릭 시 해당 질문 사항의 상세 내용 열람 가능 |
| D3 | 메인 페이지에서 원하는 기능 선택 가능 | 메인 페이지를 통해 공지사항,문의 사항 등 원하는 정보를 선택하여 열람 가능 |
| ID | Function Description | Note |
|---|---|---|
| NF1 | 배경색은 #d6d6d6으로 지정한다. | |
| NF2 | 푸터 전체 이미지가 PC와 모바일 화면 크기에 맞게 적절히 크기 조절 및 반응형으로 표시되어야 한다. | CSS 미디어쿼리 및 이미지 크기 조절 적용 |
| ID | Function Description | Note |
|---|---|---|
| BNF1 | 현재 선택된 내비게이션 항목은 시각적으로 강조되어 사용자에게 활성화 상태임을 명확히 보여준다. | |
| BNF2 | Brand 페이지에서 사용자가 스크롤 할 때 텍스트와 이미지는 fade-in과 slide-in 애니메이션 효과를 갖는다. 애니메이션은 지연을 두어 순차적으로 표시된다. | |
| BNF3 | 연혁 페이지에 각 연도별 텍스트 및 관련 요소는 내비게이션 탭 클릭 시 slide-in 애니메이션이 적용된다. |
| ID | Function Description | Note |
|---|---|---|
MNF1 |
“Menu” 페이지 내 카테고리는 페이지 최상단에 center 위치하여 UX를 향상시킬 수 있도록 한다. |
|
MNF2 |
“Menu” 페이지 내 카테고리 선택 시 Bold 효과를 주어 선택된 것으로 보이도록 해야함 |
|
MNF3 |
“Menu” 페이지에서 신규 메뉴는 이미지 좌상단에 “NEW” 표시를 하여 UX를 향상시킬 수 있도록 한다. |
“NEW” 표시는 <img> 태그를 사용하는 것으로 함 |
MNF4 |
“Menu” 페이지에서 시그니처 메뉴는 이미지 좌상단에 “SIGNATURE” 표시를 하여 UX를 향상시킬 수 있도록 한다. |
“SIGNATURE” 표시는 <img> 태그를 사용하는 것으로 함 |
MNF5 |
“Menu” 페이지에서 각 메뉴에 마우스 오버 시 “Hover” 효과를 추가하여 UX를 향상시키도록 한다. |
| ID | Function Description | Note |
|---|---|---|
| D1 | 버튼 클릭 시 해당 버튼에 맞는 정보 제공 | ex) 공지사항 클릭 > 공지사항으로 이동 |
| D2 | 고객 센터 내용 작성 시 확인 메시지 출력 | 정보 일치 시 : 확인 되었습니다 / 정보 불일치 : 없는 내용입니다 |
| D3 | 온라인 상담 내용 작성 완료 시 확인 메시지 출력 | 완료 시 : 정보가 저장되었습니다 |
| D4 | 성명,연락처,비밀번호 같은 필수 데이터를 입력하지 않으면 다음으로 넘어갈 수 없고, 누락된 정보 알림 메시지 출력 | 정보 누락 시 : 필수 입력 사항을 입력하지 않으셨어요 |
| D5 | 카테고리 선택 | 문의 유형 : 이물질 or 레시피 / 이용 방법 : 배달 or 포장 / 상담 분류: 온라인 or 매장 서비스 |
| D6 | 돋보기 아이콘 클릭 | 매장 위치 조회 및 선택 (삭제될 수도 있음 |
2025/05/15
- 클론할 사이트 선택
- 사이트맵 및 기능 세분화
- 페이지 및 기능별 역할분담
- 각 파트멸 요구사항 분석 (기능 / 비기능)
- 사이트맵 정리 (박경빈)
- Global Navigation 개발 (이석진)
- Main 개발 (이석진)
- Brand section 개발 (이나영)
- Menu section 개발 (박경빈, 임나연)
- News&Support section 개발 (배기열)
- Store section 개발 (이석진)
- Footer section 개발 (임나연)
2025/05/16
- 파트별 개발 현황 체크
- 사이트맵 정리 (완료)
- lobal Navigation 개발 (완료)
- Main 개발 (70% 완료)
- Brand section 개발 (완료)
- Menu section 개발 (50% 완료)
- News & Support section 개발 (30% 완료)
- Store section (개발 예정)
- Footer section 개발 (완료)
- 이슈 및 마일스톤 생성
- Main 페이지 개발
- Menu section 개발
- News & Support section 개발
- Store section 개발
2025/05/16
- 파트별 개발 현황 체크
- Main 개발 (완료)
- Menu section 개발 (완료)
- News & Support section 개발 (완료)
- Store section (완료)
- QA Tesing
- Debugging
이번 설빙 프로젝트에서는 메뉴 페이지를 클론 코딩했다. 단순히 화면만 따라 만든 게 아니라, 실제 웹사이트를 참고해서 기능과 비기능 요구사항을 나누고, 테스트 항목도 정리해가며 진행했다.
Next.js를 사용했고, 익숙하진 않았지만 기능 하나하나를 정확하게 구현하는 걸 목표로 삼았다. 초반 이틀은 기능 개발에 집중했고, 이후 UI와 JSON 데이터 작업을 병행했다.
사이트 CSS가 가려져 있어서 UI 위치를 눈대중으로 맞추느라 시간이 꽤 걸렸고, 총 98개의 메뉴 정보를 JSON에 입력하는 것도 생각보다 큰 작업이었다. 마지막에는 팀원이 함께 도와줘서 무사히 마무리할 수 있었다.
이번 프로젝트는 프론트엔드 개발을 처음 경험하는 기회였다. 평소 생각보다는 조금 난이도가 있었다. 그동안 프론트엔드를 다소 가볍게 생각했던 점을 반성하게 되었다. 그래도 개발 과정은 정말 재미있었다.
React의 등장 배경과 설계 사상은 흥미로웠다. 특히, 웹 페이지를 구성하는 요소들을 컴포넌트 단위로 분리하고, 순수 렌더링 로직과 사이드 이펙트 코드를 명확히 분리하는 구조가 인상 깊었다. 이는 생산성을 높이고 버그 가능성을 줄이기 위한, 오랜 시행착오 끝에 정립된 결과라고 생각된다.
또한, 프레임워크와 관련 도구 전반에 걸쳐 다양한 패턴과 모범 사례가 잘 정리되어 있는 점도 신선하게 느껴졌다. 웹 개발은 커뮤니티 규모가 매우 크고, 이에 따라 품질 확보를 위한 논의와 해결책도 상당히 발전해 있다는 인상을 받았다.
이번 경험을 통해 프론트엔드 개발이 단순히 화면을 그리는 작업을 넘어, 설계와 아키텍처 수준에서 많은 고민이 요구되는 분야임을 체감할 수 있었다. 동시에, 앞으로 배우게 될 백엔드 개발에서는 어떤 구조와 원리가 적용되는지 더 궁금해졌고, 보다 복잡한 시스템 설계와 데이터 흐름을 다루게 될 생각에 기대가 커졌다.
이번 설빙 프로젝트에서는 푸터랑 푸터에서 연결되는 여러 페이지들을 클론 코딩했다. 단순히 화면만 따라 만든 게 아니라, 실제 웹사이트를 참고해서 기능적/비기능적 요구사항을 나눠보고, 각 항목에 대해 테스트 케이스도 작성해서 체크리스트처럼 하나하나 작동 여부를 확인했다. 푸터를 구현하면서 가장 어려웠던 건, 브라우저에서 화면을 확대하거나 축소해도 링크 버튼이 이미지 안의 정해진 위치에 딱 고정되게 만드는 부분이었다. 생각보다 섬세하게 계산해야 했고, 반응형까지 고려하다 보니 시행착오도 많았다. 그래도 덕분에 세세한 UI 위치 조정이나 반응형 처리에 대해 좀 더 실전적인 감각을 익힐 수 있는 좋은 경험이 되었다.