학습 프로젝트

개요

이마트24 공식 웹사이트를 분석해 주요 페이지를 HTML/CSS/JavaScript로 구현한 클론 코딩 프로젝트입니다. 저는 이 중 화면 정의서 작성 및 상품 페이지(행사상품/차별화상품/Fresh Food), APP 서비스 페이지, 온라인 문의 페이지 개발을 담당했습니다.

• 개발 형태: 웹 인터랙티브 페이지
• 개발 인원: 4인
• 기술 스택: HTML, CSS, Javascript
• 개발 환경: VS Code

→ 성과 자료

화면 정의서

개발에 앞서 페이지별 흐름과 UI 구성을 정리한 화면 정의서를 직접 작성했습니다. 이를 기반으로 팀 내 합의를 이끌고, 구현 과정에서 불필요한 수정과 충돌을 줄일 수 있었습니다.

상품 페이지

상품 페이지는 행사상품/차별화 상품/fresh food, 총 세 개의 페이지로 구성돼있고, 각 페이지의 구성은 모두 동일합니다.

• ul, li, div로 카드형 레이아웃 구현

• onclick 이벤트로 페이지 전환 처리 → 선택된 페이지의 상품만 노출

• Flexbox로 균형 잡힌 배치 유지

• 반복 구조를 적용해 코드 중복 최소화 및 UI 일관성 확보

→ 포인트: 단순 정적 페이지라도 DOM 상태 관리와 이벤트 핸들링 최적화가 필요하다는 점을 체감

APP 서비스 페이지

APP 서비스 페이지는 스크롤 이벤트를 활용한 풀스크린 전환형 UI로 구현했습니다.

• transform과 transition으로 이미지 이동·회전 애니메이션 구현
• Wheel 이벤트를 가로채 한 번 스크롤 시 한 섹션씩 이동
• 각 섹션마다 이미지·텍스트에 show 클래스를 추가/제거 → fade-in, slide-in 효과 연출
• 앱 홍보 인트로 같은 사용자 경험을 제공

→ 포인트: 스크롤 이벤트 제어 및 애니메이션 타이밍 설계 경험

고객센터 – 온라인 문의

사용자가 상품, 서비스, 시설 등에 대해 질문이나 제안을 남길 수 있는 폼 기반 인터페이스입니다.

• 이메일 입력: 도메인 선택 + 직접 입력 기능, readonly 속성 제어
• 체크박스 로직: 전체 동의 ↔ 개별 동의(필수/선택/만14세) 상태 연동
• 유효성 검사: 이메일, 접수 유형, 업무 구분, 제목, 내용 등 단계별 검증 → 실패 시 alert 피드백
• 제출 처리: 모든 검증 통과 시 “등록 성공” 메시지 출력

→ 포인트: DOM 제어를 통한 실시간 검증 로직, 체크박스 상태 연동 구현

배운 점

이번 프로젝트를 통해,

• 화면 정의서를 직접 작성하며 UI/UX 기획 능력을 키웠고,
• 상품 페이지와 APP 서비스 개발을 통해 이벤트 제어와 DOM 상태 관리를 경험했으며,
• 온라인 문의 구현으로 실시간 입력 검증 로직과 사용자 피드백 처리를 익혔습니다.

아쉬운 점과 개선 아이디어

• CSS/JS 미분리: 스타일과 스크립트를 HTML에 직접 작성해 코드가 지저분해졌습니다.
  → 이후 프로젝트에서는 CSS와 JS 파일을 분리해 유지보수성을 높이고자 합니다.
• 헤더/푸터 하드코딩: 모든 페이지에 동일한 헤더·푸터를 그대로 넣다 보니 수정 시 반복 작업이 필요했습니다.
  → include 방식으로 공통 레이아웃을 관리하는 방법을 고려하고 있습니다.
• 상품 목록 출력 방식: 상품 목록을 하드코딩으로 나열해서 코드가 길어졌습니다.
  → 반복문(foreach 문 등)을 활용하면 더 깔끔하게 구현할 수 있었을 것입니다.