디자인 구현 전 검토

검토일: 2026-08-04 대상: design/의 공개 페이지 12개, 관리자 페이지 7개, 공통 에셋

결론

현재 디자인의 색상, 타이포그래피, 카드 구성, 홈의 정보 흐름은 구현 기준으로 사용할 수 있습니다. 다만 design/*.html은 화면 확인용 프로토타입이므로 운영 코드로 복사하거나 그대로 배포하면 안 됩니다. 공개 화면은 공통 PHP 템플릿과 시맨틱 HTML로 다시 구성하고, 관리자 인증·문의·게시글·회사 정보는 서버와 MariaDB를 통해 처리해야 합니다.

구현 착수 전 아래 P0 항목을 설계에 반영합니다.

관리자 인증 및 모든 관리자 URL의 서버 측 접근 통제
문의 접수·답변 확인 방식 확정과 개인정보 동의 문구 보완
모바일 헤더·관리자 목록의 별도 레이아웃 추가
회사 정보, 연락처, 실적 수치, 이미지 원본 확정
페이지별 중복 프로토타입을 공통 템플릿 구조로 전환

P0: 구현 전에 반드시 수정

관리자 인증

모든 관리자 상세 HTML에 adminAuthed: true가 설정되어 있어 URL 직접 접근만으로 관리 화면이 노출됩니다.
시안용 관리자 비밀번호가 모든 HTML과 design/README.md에 평문으로 포함되어 있습니다.
인증 판단이 브라우저 JavaScript에서 이루어져 비밀번호를 바꾸더라도 우회할 수 있습니다.
운영 구현에서는 비밀번호 해시, 서버 세션, 로그인 시도 제한, 로그아웃, CSRF 방어를 적용합니다.
/admin 및 하위 URL은 검색엔진 제외와 서버 측 인증 검사를 모두 적용합니다. 공개 푸터의 관리자 진입 버튼은 제거합니다.

데이터 저장

게시글, 문의, 회사 정보가 localStorage에만 저장되어 다른 브라우저·기기·관리자에게 공유되지 않습니다.
문의자가 접수해도 관리자가 다른 브라우저에서 볼 수 없고, 브라우저 데이터 삭제 시 내용이 사라집니다.
운영 구현에서는 MariaDB를 단일 원본으로 사용하고 게시글 이미지 파일만 웹 루트 밖 또는 보호된 업로드 경로에 저장합니다.
디자인에 포함된 샘플 문의에는 이름, 연락처, 이메일 등 실제 개인정보처럼 보이는 값이 있으므로 운영 데이터에 포함하지 않습니다.

문의와 개인정보 흐름

화면은 문의 비밀번호로 답변을 확인할 수 있다고 안내하지만 비밀번호는 필수가 아니며 저장도 되지 않고, 공개 답변 조회 화면도 없습니다.
문의 내용은 필수로 표시되지만 현재 제출 검증에서는 누락되어 빈 내용도 접수됩니다.
이름·연락처 형식, 본문 길이, 스팸 요청, 반복 제출에 대한 검증이 없습니다.
개인정보 동의 문구에 수집 항목, 이용 목적, 보유 기간, 동의 거부권과 불이익, 개인정보처리방침 연결을 명확히 표시해야 합니다.
초기 출시 권장안은 전화·이메일 회신 방식으로 단순화하고 공개 답변 조회 비밀번호를 제거하는 것입니다. 웹 답변 조회가 필요하면 별도의 접수번호 + 비밀번호 조회 페이지와 비밀번호 해시 저장, 시도 제한을 설계합니다.

반응형 구조

공개 헤더가 로고, 3개 메뉴, 전화번호, 상담 버튼을 한 줄 고정 배치해 모바일 너비에서 넘칩니다. 햄버거 메뉴 또는 2단 모바일 헤더가 필요합니다.
홈 히어로의 minmax(340px, 1fr)는 320px급 화면에서 가로 넘침 가능성이 있습니다.
관리자 글 목록은 1fr 120px 110px 156px 고정 4열이라 태블릿·모바일에서 사용할 수 없습니다. 작은 화면에서는 카드 목록으로 전환합니다.
우측 하단 전화상담 고정 버튼은 모바일에서 콘텐츠·푸터를 가릴 수 있으므로 크기와 안전 여백을 조정합니다.

P1: 첫 배포 전에 보완

홈

히어로, 블로그 카드가 이미지 자리표시자 상태입니다. 실제 시공 이미지와 사용 권한, 대체 텍스트를 확보합니다.
20년, 1,200+, 24시간 내 견적 회신, 정기 사후관리는 대외 표시 가능한 근거와 정확한 서비스 조건을 확인합니다.
서비스 카드가 설명만 있고 상세 이동이 없습니다. 최소한 문의 유형이 미리 선택된 상담 화면으로 연결하거나 서비스 상세 섹션 앵커를 제공합니다.
모든 회사명 표기를 (주)지티에스정보통신으로 통일합니다.

블로그 목록·상세

카드 전체가 onclick만 사용되어 키보드 접근과 새 탭 열기가 불가능합니다. 실제 <a> 링크로 변경합니다.
숫자 파일명 대신 의미 있는 slug URL을 사용합니다. 예: /blog/office-network-checklist.
제목 외에 페이지별 description, canonical, Open Graph, 구조화 데이터, 대표 이미지 메타데이터가 필요합니다.
업로드 이미지마다 대체 텍스트, 캡션, 대표 이미지 선택 기능을 제공합니다.
관리자 글 편집에 초안/공개 상태가 없어 저장 즉시 노출됩니다. 초안과 공개 상태를 분리합니다.

문의

지도는 자리표시자이며 실제 지도 사용 여부와 개인정보·외부 스크립트 정책을 정해야 합니다. 초기에는 지도 링크 버튼과 주소 텍스트만 제공하는 편이 가볍습니다.
성공 화면에는 접수번호, 접수 일시, 회신 방법, 예상 응답 시간을 표시합니다.
오류는 alert가 아니라 필드별 메시지와 요약 메시지로 제공하고 aria-live를 적용합니다.
전화번호 자동 형식화, 이메일 형식, 글자 수 제한, 서버 검증, CSRF, 허니팟 또는 속도 제한을 적용합니다.

관리자

게시글 목록과 문의 목록은 시맨틱 테이블 또는 모바일 카드 구조로 구현합니다.
삭제는 즉시 영구 삭제보다 확인 단계와 복구 가능한 소프트 삭제를 권장합니다.
이미지 업로드는 확장자·MIME·용량·픽셀 크기 검증, 안전한 파일명, EXIF 제거, WebP 변환을 적용합니다.
답변이 고객에게 이메일로 전송되는지, 사이트에서 조회되는지, 단순 내부 기록인지 명확히 구분합니다.
회사 정보 변경은 입력 형식 검증과 변경 이력을 적용하고 관리자 비밀번호 변경 메뉴는 별도로 둡니다.

P2: 품질 및 운영 개선

19개 HTML 각각에 약 152KB의 동일한 스타일·데이터·로직이 반복됩니다. 공통 레이아웃, 컴포넌트, 데이터 접근 계층으로 분리합니다.
약 2MB인 동일 폰트 파일이 두 이름으로 중복되어 있습니다. 하나만 사용하고 필요한 경우 서브셋 또는 시스템 폰트 폴백을 검토합니다.
현재 화면은 전용 JavaScript 런타임에 의존합니다. 공개 콘텐츠는 서버 렌더링해 JavaScript 실패 시에도 제목·본문·연락처가 보여야 합니다.
design/assets/styles.css와 hero-network.png는 현재 렌더링되는 프로토타입에서 사용되지 않습니다. 구현 시 사용 자산만 선별합니다.
접근성 QA에 키보드 이동, 포커스 표시, 200% 확대, 색상 대비, 이미지 대체 텍스트, 오류 안내를 포함합니다.
성능 QA에 모바일 LCP, 폰트 로딩, 이미지 지연 로딩, 캐시 헤더, 압축을 포함합니다.

페이지별 구현 방향

화면	유지할 구성	수정할 구성
홈	히어로 → 실적 → 서비스 → 강점 → 프로세스 → 블로그 → CTA 흐름	실제 이미지, 수치 검증, 서비스 이동 링크, 모바일 헤더
블로그 목록	카테고리와 카드 그리드	링크 시맨틱, 실제 썸네일, 빈 결과, 서버 페이지네이션
블로그 상세	제목·작성 정보·본문·문의 CTA	slug, SEO 메타, 이미지 alt/캡션, 이전·다음 글
1:1 문의	좌측 폼·우측 연락처 구조	개인정보 고지, 검증, 스팸 방어, 회신 방식 확정, 지도 대체
관리자 로그인	단일 로그인 화면	서버 인증, 시도 제한, 세션 만료, 비밀번호 재설정
글 관리	목록·작성·수정 흐름	공개 상태, slug, 대표 이미지, alt, 소프트 삭제
문의 관리	상태·상세·답변 흐름	DB 저장, 답변 전달 방식, 개인정보 접근 기록·보관기간
회사 정보	한 화면 설정	검증, 변경 이력, 권한 분리 여부

구현 기준 정보 구조

공개: /, /blog, /blog/{slug}, /contact, /privacy
관리자: /admin/login, /admin/posts, /admin/inquiries, /admin/company
관리자 URL은 디자인 파일명과 무관하게 모든 요청에서 서버 인증을 선행합니다.
공개 페이지는 PHP 서버 렌더링을 기본으로 하고 JavaScript는 메뉴, 필터, 폼 편의 기능에만 점진적으로 사용합니다.

구현 전 사용자 확인 항목

문의 답변 방식: 전화·이메일 회신만 제공할지, 웹 답변 조회까지 제공할지
표시할 대표번호, 지점번호, 이메일, 주소, 대표자, 사업자등록번호의 최종 값
20년, 1,200+, 24시간, A/S 문구의 대외 사용 가능 여부
실제 시공 사진과 로고 원본의 사용 가능 여부
블로그 9개 샘플 글을 초기 운영 콘텐츠로 사용할지 여부

9.4 KiB Raw Blame History