# GROUP · 산업시설의 흐름이 보이는 기업 디자인
2026-09-12 BRIEF와 REFERENCES 작성 후 설계.

## 토큰과 서체
White #ffffff / Deep petrol #173f4d / Steel #54707b / Mist #edf1f2 / Work yellow #e9c36a / Line #cad5d9.
SUIT 단일 가족. 제목 54–88px/650, 본문 16px/400, 캡션 13px. 회사의 전문 분야를 큰 한글 제목으로 명확히 드러내고 화려한 영문 슬로건은 쓰지 않는다.
HMSOFT GROUP의 기존 두 면 접합 심벌과 워드마크 유지. 서비스의 연결을 나타내는 현 로고와 운영 흐름이 맞는다.

## 페이지 편집
```
[ GROUP                   사업 / 프로젝트 / 상담 초안 ]
[ 현장이 멈추지 않도록.                 전문 분야 설명 ]
[      대표 물류시설의 넓은 항공 사진 / 프로젝트명     ]
[ 사업 선택 목록       관련 프로젝트 사진·업무 산출물 ]
[         입고→검수→보관→피킹→출고 흐름도             ]
[ 협업 과정과 각 단계의 문서                         ]
[ 시설 유형·필요 업무 선택            상담 초안 확인   ]
```
대표 사진은 현장의 맥락을 설명한다. 사업 목록과 실제 프로젝트 구상은 한 영역에서 바뀐다. 프로젝트 상세 창은 같은 사진과 과제/설계 범위/산출물로 구성한다. 세 개의 똑같은 서비스 카드 대신 선택 목록과 넓은 현장 편집을 쓴다.

## 이미지
대표 풀필먼트 센터 외관: 밝은 지붕, 푸른 도크, 실제적인 트럭 스케일, 수목과 차량 동선. 내부: 같은 청회색 철골과 노란 안전 표시, 선반과 컨베이어.
생산 캠퍼스/패키징 허브는 각각의 해당 공정 장면. 가상의 프로젝트 구상으로 명시한다. AI 이미지와 회사의 실적을 혼동하지 않는다.

## 모션과 사용
물류 흐름 재생을 누르면 하나의 물류 단위가 6초 동안 단계별로 이동하며 현재 설계 설명을 바꾼다. 일시정지/다시 시작, 직접 단계 선택. 화면 밖·탭 숨김에서 중단. reduced motion은 정지 단계 선택만 제공한다. 사업 선택은 사진과 설명을 220ms 교체한다. 화면 전체 반복 애니메이션은 없다.
모바일에서는 사업 선택→해당 사진→설명 순서, 흐름도는 세로 방향, 상담 초안은 한 열.

## 사전 비평
기존 '가능성을 연결한다'와 유리 건물 한 장은 누구의 사이트인지 설명하지 못했다. 물류와 설비 운영이라는 일을 먼저 정하고 이를 사진, 프로젝트, 흐름도, 상담 선택 항목까지 연결했다. 허구의 고객 로고·누적 실적·인증 배지를 완성도의 대용으로 넣지 않는다.


## 구현 후 확정한 자산과 조작
산업시설 외부, 내부 물류 동선, 설비 점검, 패키징 라인 네 장을 만들었다. 세 사업 분야와 프로젝트 구상이 각 이미지/업무/산출물로 이어진다. 흐름 도식은 한 번의 6초 재생 후 정지하며 직접 단계 선택과 재시작이 가능하다. 화면 밖과 숨긴 탭에서 정지한다. 상담 도구는 외부 전송 없이 시설/업무/검토 내용을 문서로 만들고 사용자가 복사한다. 법적 동의 폼이나 실제 접수 상태를 꾸며 넣지 않는다.