# 디자인 구현 전 검토

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

## 결론

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

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

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

## 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개 샘플 글을 초기 운영 콘텐츠로 사용할지 여부