홈페이지 HTML·CSS 및 기능 수정
Cafe24 기반 다국어몰의 HTML, CSS, 네비게이션 메뉴, 문의 게시판, 검색 기능 및 반응형 레이아웃을 안전하게 수정하고 철저하게 테스트합니다.
이 페이지의 구성
HTML·CSS 및 기능 수정 범위
Cafe24 플랫폼 기반의 공식 홈페이지에서 헤더, 푸터, 네비게이션 메뉴, 문의 버튼, 검색창, 게시판 템플릿, 반응형 화면 및 페이지별 HTML·CSS 코드를 직접 수정·관리합니다. 단, 서버 인프라 관리나 결제 모듈 연동 등 디자인팀 소관 외의 전문 서버 기능은 인수인계 범위에 포함되지 않습니다.
안전한 작업 전 백업 절차
• 수정할 대상 언어몰과 정확한 파일 경로를 먼저 확인
• 수정 전 기존 HTML·CSS 전체 소스 복사 또는 별도 파일 백업
• 해당 코드가 공통 레이아웃인지, 특정 개별 페이지 코드인지 파악
• 수정 전 화면 상태를 캡처하여 시각적 기준점 마련
• 동일한 클래스(Class)명이 다른 페이지의 디자인에 의도치 않은 영향을 주는지 검토
주요 코드 관리 및 수정 업무
• 헤더 및 푸터 네비게이션 메뉴 구조 개편
• CONTACT, 통합 검색, 제품·회사·박람회 관련 메뉴 하이퍼링크 연결
• 고객 문의 게시판 글 작성 및 접수 페이지 연동
• 문의 완료 페이지 및 언어몰별 분기 경로 설정
• 연혁 타임라인, 공장 이미지 갤러리, 인증서 롤링 배너 구현
• PC·태블릿·모바일 디바이스 대응 반응형 CSS 스타일 조정
• 에셋 이미지 경로 정비 및 텍스트 정렬 상태 최적화
언어몰별 다국어 경로 관리 예시
Cafe24 다국어몰 환경에서는 언어별로 경로 체계가 다르므로 오작동이 없도록 주의해야 합니다.
| 언어몰 구분 | 문의 작성 경로 예시 |
|---|---|
| 한국어몰 | /board/product/write.html?board_no=6 |
| 영어몰 | /shop2/board/product/write.html?board_no=6 |
| 베트남어몰 | /shop3/board/free/write.html?board_no=6 |
💡 실제 운영 중인 사이트의 구조 개편에 따라 경로가 변경될 수 있으므로, 수정 작업 전 Cafe24 관리자 모드에서 최종 주소를 반드시 재확인하고 적용해야 합니다.
수정 후 크로스브라우징 및 디바이스 테스트
💻 화면 레이아웃 검수
PC, 태블릿, 모바일 해상도에서 콘텐츠 너비, 여백, 폰트 크기, 이미지 잘림 현상 및 불필요한 스크롤 발생 여부를 다각도로 확인합니다.
⚙️ 기능 동작 검수
메뉴 이동, CONTACT 버튼, 검색 결과, 게시판 작성 및 완료 화면, 첨부파일 업로드 등 인터랙티브 버튼의 정상 작동 여부를 테스트합니다.
오류 발생 시 신속 복구 가이드
코드 수정 후 레이아웃이 깨지거나 기능에 심각한 오류가 발생한 경우, 원인을 찾기 위해 임의로 여러 코드를 동시에 수정하지 마십시오. 작업 전 백업해 둔 원본 코드로 즉시 복구한 뒤, 수정 범위를 최소 단위로 좁혀가며 안전하게 재작업을 진행합니다.