개요

2026-05-06 · 코드 작성 D1 이전, "착수 전 디자인 합의" 작업

한 줄 요약

대하 회사 사이트(daehatech.co.kr)에서 브랜드 컬러·폰트를 그대로 추출하고, Linear의 정보밀도·인터랙션 패턴을 얹어, 로그인 화면(index.php)을 1차로 만들었다. 코드 한 줄 짜기 전에 "이 시스템은 어떻게 보여야 하는가"를 먼저 합의하기 위함.

결정한 것

1. 기술 스택 (요구사항 정의서대로 확정)

빌드 파이프라인 없음 = React/shadcn/Tailwind PostCSS 모두 불가. 디자인은 plain CSS + CSS 변수로 처리.

2. 디자인 레퍼런스 — Linear (패턴만)

VoltAgent/awesome-design-md 70개 브랜드 DESIGN.md 중 후보 추리기:

• ❌ 화려한 다크 시네마틱(RunwayML, ElevenLabs, Bugatti) — 마케팅 페이지용. 사내 데이터툴엔 부적합
• ✅ Linear — 폼·키보드·고밀도 테이블이 주인공. 우리 16컬럼 발주표와 동형
• ✅ Notion·Airtable — 차순위 후보로 고려

Linear에서 빌리는 것: 레이아웃·정보밀도·인터랙션 패턴. 컬러는 빌리지 않음 — 그건 회사 브랜드.

3. 브랜드 컬러 — 회사 사이트에서 추출

http://www.daehatech.co.kr/asset/css/style.css에 이미 CSS 변수로 깔끔하게 정의돼 있어 그대로 채택:

--cBlack: #1D1D1F;   /* 본문 텍스트 */
--cBlue:  #007FFF;   /* 액센트 */

추가로 사이트가 패턴으로 쓰는 컬러 8종을 그대로 토큰화:

시그니처 패턴도 그대로 차용:

• CTA: linear-gradient(138deg, #007FFF 0%, #70E2FF 100%)
• 포커스: box-shadow: 0 0 5px #9ED4FF

4. 로고 — CI 14종 중 ci-10 선택

회사가 제공한 CI 14종(흰색/검정/네이비 × 워드마크/슬로건/한글/영문) 중:

• 좌측 어두운 비주얼 패널 → daeha_ci-10.png (흰색 + "High Pressure Technology" 슬로건). 두 줄 자리를 자연스럽게 채우고, 어두운 BG에 흰색 글자가 가장 깔끔
• favicon → daeha_ci-01.png (네이비 워드마크). 작은 사이즈에서 가장 식별 쉬움

만든 것

daehatech.kr/                    ← FTP 동기화 디렉토리 (닷홈 /html/)
├── index.php                    ← 로그인 진입 (CSRF·보안 헤더 포함)
└── assets/
    ├── css/
    │   ├── tokens.css           ← 디자인 토큰 (모든 페이지 공통)
    │   └── login.css            ← 로그인 화면 전용
    └── images/
        ├── main.png             ← 좌측 비주얼 배경 (산업용 압축기)
        └── Logo/                ← 회사 CI 14종

레이아웃: split-screen (좌 1.15 : 우 1).

• 좌측: 압축기 사진 + 다크네이비 그라데이션 + 회사 메시지 + 핵심 기능 3종 카드
• 우측: 로그인 폼 + 시스템 공지 + 회사 홈페이지 카드 링크 + 푸터

시행착오·교정

1. 미리보기 사본을 만들었다가 사용자 지적

index.php와 함께 PHP 없는 환경에서 보라고 index.html 사본을 만들었더니, 사용자가 "html은 만들 필요 없어, 바로 서버에 올려서 확인할거야". 워크플로우 충돌. 즉시 삭제. 이후로는 본체만 만들기로.

2. 텍스트 가독성 부족

처음엔 그라데이션 오버레이가 약했고(0.88 → 좌측 너무 밝음), 압축기 사진의 흰 부분과 흰 글자가 겹쳐 안 보였다. 4단 강화:

• 그라데이션 진하게(0.88 → 0.95)
• ::before에 텍스트 영역 비네트 추가
• 타이틀·서브에 text-shadow (그라데이션 텍스트는 drop-shadow)
• 기능 카드 배경을 흰색 반투명 → 다크네이비 반투명으로

3. 로고가 텍스트로 대체돼 있었음

처음엔 좌측 상단에 흰색 텍스트로 "daeha · Industrial Engineering"을 직접 쓰는 가짜 로고를 만들었다. 사용자가 실제 CI 자산 14종을 업로드하면서 진짜 로고로 교체. 이미지 로고 + 클릭 시 홈으로 이동(index.php).

4. 회사 홈페이지 링크 위치 이동

처음엔 좌측 비주얼 푸터에 작은 텍스트 링크로 두었는데 "우측 하단에 더 잘 보이게" 요청. 우측 패널 하단에 카드형 링크로 승격 — 좌측 액센트 바(브랜드 그라데이션) + 회사 아이콘 + URL 표기 + hover 시 액센트가 그라데이션으로 채워지는 인터랙션.

다음 (D1, 진짜 코딩 시작)

1. CodeIgniter 4 부트스트랩 (composer install + 디렉토리 구조)
2. DB 스키마 8테이블 마이그레이션 (인덱스를 처음부터 박는다 — 1만 행 1초 목표)
3. 세션 인증 + bcrypt
4. 변경 이력 미들웨어 (모든 mutation에 자동 기록) — 이게 늦으면 나중에 모든 컨트롤러를 다시 까야 한다
5. 엑셀 업/다운 PoC 30분 — D6 일정 리스크 사전 점검

도메인·호스팅 사전 준비 (대하 측)

D1 시작 전에 클라이언트가 끝내야 하는 것:

• 닷홈 호스팅 가입 + 도메인 구매 (대하 명의 직접 결제)
• FTP·MySQL·phpMyAdmin 접속 정보 전달
• 초기 관리자 계정 1명 정보 (성명·연락처·이메일)
• 기존 엑셀 데이터 이관 범위 결정