# Logo Design — HMSOFT 웹사이트 컬렉션

버전 1.0 · 2026-09-11 · 적용 대상: hmdesign.cloud의 17개 콘셉트 사이트

이 문서는 로고를 만들기 전에 읽는 제작 기준이다. `getdesign.md`가 웹 화면의 디자인 결정을 설명하는 것처럼, 브랜드의 성격을 실제 로고의 형태와 사용 규칙으로 연결한다. 유명 로고의 모양을 재현하는 프롬프트 모음이 아니다. 사이트별 결정은 `projects/{id}/LOGO.md`에 기록하며, 실제 산출물과 맞지 않는 설명은 수정한다.

## 1. 좋은 로고의 판단 순서

1. **누구의 이름인지 읽힌다.** 철자, 한글 자소, 글자의 속공간이 무너지지 않는다.
2. **그 브랜드에 어울린다.** 주얼리는 세팅의 정교함, 갤러리는 작품을 담는 공간처럼 구체적인 출발점이 있다.
3. **형태 자체로 구별된다.** 색과 설명을 지워도 다른 사이트와 차이가 남는다.
4. **실제로 사용할 수 있다.** 헤더, 모바일, 파비콘, 밝고 어두운 배경에서 작동한다.
5. **불필요한 장식을 제거한다.** 그라데이션·입체 목업·긴 해설로 약한 형태를 포장하지 않는다.

멋있어 보이는 설명은 결과의 근거가 아니다. 최종 판단은 실제 크기의 화면과 단색 비교판으로 한다. 자동 검사를 통과했다는 이유로 미적 완성도를 확정하지 않는다.

## 2. 제작 전에 작성할 브리프

각 `LOGO.md`에는 아래 항목이 있어야 한다.

```yaml
brand: 실제 화면에 표시하는 이름
site: 사이트 식별자
audience: 방문자와 방문 목적
character: 구체적인 성격 세 가지
subject_anchor: 형태의 출발점이 되는 제품·공간·행위
primary_form: 워드마크 / 심벌 결합 / 한글 레터링
alternatives: 검토한 다른 방향 두 가지와 채택하지 않은 이유
lettering: 글꼴 출처, 굵기, 자간, 고유하게 조정한 부분
symbol: 형태의 구조와 이름과의 연결
palette: 주색 / 밝은 배경 / 반전색
minimum_size: 헤더와 심벌의 실제 사용 크기
motion: 필요한 경우의 전개 방식, 시간, 정지 상태
files: 실제 생성된 파일 경로
review: 확인한 크기·배경·페이지와 남은 한계
```

브랜드 이름은 임의로 바꾸지 않는다. 기존 HMSOFT GROUP/BIO 등의 서브브랜드명은 유지하되 업종별 표현을 구분한다. 제작사 HMSOFT의 공식 로고·회사 사이트 로고와 가상 브랜드 로고를 혼동하지 않는다.

## 3. 타입과 레터링

- 글꼴은 출발점이다. 단순히 폰트와 이름을 교체한 것을 독자적인 레터링이라고 부르지 않는다.
- 짧은 이름은 글자 사이의 **보이는 면적**을 맞춘다. 동일한 수치의 자간만으로 완성하지 않는다. 특히 OR, RA, FO, RM, ON, NY처럼 곡선·대각선이 만나는 조합을 확인한다.
- 둥근 글자와 뾰족한 글자의 돌출은 시각적 높이를 맞추기 위한 것이다. 격자에 억지로 맞추지 않는다.
- 가는 세리프는 큰 워드마크에만 쓴다. 작은 아이콘에는 획을 보강한 별도 심벌을 만든다.
- 한글은 모아쓰기의 비례와 자소 사이의 공간을 먼저 본다. 붓 효과를 입힌 기성 폰트를 손글씨라고 설명하지 않는다.
- 글꼴에서 만든 윤곽은 원본 폰트와 라이선스를 기록한다. 완성 SVG에는 외부 폰트 의존성 없이 경로를 저장한다.
- 글자를 구분하지 못하게 만드는 과도한 절단, 연결, 기울임은 채택하지 않는다.

## 4. 심벌 구조

의미를 최대 두 층까지만 담는다. 예를 들어 ORA는 ‘O의 타원 + 보석을 잡는 네 모서리’, FORMA는 ‘F + 열린 전시 프레임’이다. 보석·왕관·잎·지구·회로·별을 한 도형에 쌓지 않는다.

심벌은 64단위의 작업 좌표에서 설계하되, 모든 브랜드에 같은 원·사각형 틀을 강제하지 않는다. 여백이 있는 열린 형태, 꽉 찬 실루엣, 유기적인 곡선을 업종에 따라 선택한다. 작은 크기에서는 얇은 선을 두껍게 하거나 세부 요소를 생략할 수 있지만 중심 실루엣은 유지한다.

단색 원본을 먼저 확정한다. 금색 재질, 엠보싱, 배경 사진은 적용 예시이며 원본 로고가 아니다. AI 이미지 생성은 필요할 경우 탐색 스케치에만 사용하며, 흐릿한 래스터를 SVG 파일에 넣어 벡터 로고라고 납품하지 않는다.

## 5. 17개 사이트별 방향

| 사이트 / 이름 | 형태의 출발점 | 워드마크 방향 | 피할 상투적 표현 |
| --- | --- | --- | --- |
| jewelry / ORA | 에메랄드 컷의 모서리와 프롱, 반지의 타원 | 여유 있는 세리프, O·R·A의 간격 조정 | 왕관, 반짝이 별, 얇은 다이아몬드 아이콘 |
| gallery / FORMA | 열린 프레임과 F의 양·음 공간 | 좁고 단단한 기하학적 대문자 | 물감 팔레트, 추상적인 무한대 |
| dining / 담온 | 온기를 담는 그릇과 열린 식탁 | 읽기 쉬운 한글, 단정한 세로 획 | 젓가락·숟가락 교차, 가짜 낙관 |
| wellness / MORI | 들숨과 날숨의 팽창, 열린 M 곡선 | 부드러운 소문자 중심, 과하지 않은 둥근 끝 | 연꽃, 요가 자세 클립아트 |
| onyu / ONYU | 중정을 둘러싸는 네 벽과 열린 입구 | 건축 비례의 넓은 대문자 | 지붕 모양, 부동산 열쇠 |
| serein / SEREIN | 수평선 위의 가는 비, S의 흐름 | 낮은 대비의 유려한 소문자 | 야자수, 파도와 태양의 뱃지 |
| interior / HMSOFT LIVING | 가구의 접합과 ㄱ자 구조 | 차분한 세리프, 넓은 속공간 | 의자 실루엣, 집 안의 잎 |
| cosmetics / NUUM | 일상의 리듬을 만드는 두 u와 둥근 어깨 | 직접 작성한 낮은 소문자 워드마크, n 파비콘 | 꽃·물방울 배지, 제품 라벨과 다른 이름 |
| coffee / HMSOFT ROASTERS | 추출수의 흐름과 R의 곡선 | 짧고 묵직한 로스터리 레터링 | 커피잔 안의 원두와 수증기 |
| streetwear / HMSOFT HYPE | 재단면과 접힌 H | 밀도 높은 대문자, 절제된 사선 | 유명 스포츠 스우시·삼선 |
| corporate / HMSOFT GROUP | 독립된 두 면이 맞물리는 접점 | 정렬이 단단한 산세리프 | 지구 궤도, 악수, 상승 화살표 |
| bio / HMSOFT BIO | 분열 직전 연결된 두 세포의 여백 | 열린 속공간의 산세리프 | DNA 나선, 가짜 의료 인증 |
| construction / HMSOFT E&C | 하중을 받는 보와 기둥의 결구 | 폭이 넓고 굵은 산업용 글자 | 안전모, 크레인 실루엣 |
| commerce / HMSOFT LUXE | 선택한 물건을 감싸는 접힌 종이 | 패션 에디토리얼의 대비 있는 세리프 | 쇼핑백 손잡이, 왕관 |
| platform / HMSOFT PLATFORM | 연결되기 전후의 작업 두 블록 | 읽기 쉬운 중간 굵기 산세리프 | 네온 구체, 범용 AI 별 |
| education / HMSOFT EDU | 펼쳐진 두 면과 다음 학습 단계 | 친근한 소문자와 열린 e | 학사모, 전구, 졸업 인증 배지 |
| gaming / HMSOFT GEAR | 키캡의 단면과 G의 열린 홈 | 각진 대문자와 일정한 절단 각도 | 동물 마스코트, RGB 방패 |

이 표는 디자인 가설이다. 실제 단색 비교에서 비슷하게 보이는 두 로고는 ‘업종이 다르다’는 설명으로 통과시키지 않고 구조를 다시 조정한다.

## 6. 사용 체계

기본 세트: `logo.svg`(주색 가로 조합), `logo-mono.svg`(검정), `logo-inverse.svg`(흰색), `symbol.svg`(심벌), `favicon.svg`(작은 크기 전용). 필요하면 워드마크 단독을 추가한다. 웹은 SVG를 사용하고 공유용 PNG는 벡터에서 파생한다.

- 가로 조합 주변에 심벌 높이의 1/4 이상을 기본 여백으로 확보한다. 이것은 이 프로젝트의 시작값이며 브랜드별 화면에서 조정한다.
- 헤더 로고 높이는 보통 28–40px, 클릭 영역은 44px 이상이다. 긴 서브브랜드의 최소 폭은 실제 글자 높이에 따라 별도로 정한다.
- 16·24·32px 아이콘은 실제 픽셀 크기로 확인한다. 16px에서 보이지 않는 작은 서브텍스트는 제외한다.
- 밝은 배경에서는 주색 또는 검정, 어두운 배경에서는 반전 원본을 사용한다. CSS 필터로 임의로 색을 뒤집지 않는다.
- 배경 사진 위에서는 명암이 안정된 위치에 놓는다. 로고를 살리려고 강한 외곽선이나 그림자를 덧씌우지 않는다.
- 홈 링크에는 브랜드명과 목적을 알 수 있는 접근 가능한 이름을 제공한다. 중복되는 심벌은 장식 이미지로 처리한다.

## 7. 로고 모션

정지 상태를 먼저 완성한다. 움직임은 형태가 만들어지는 원리를 보여주는 경우에만 추가한다. ORA는 세팅의 네 모서리가 타원에 정렬되는 짧은 전개, FORMA는 프레임이 열리고 F가 남는 전개처럼 브랜드에 근거가 있어야 한다.

기본 등장 길이 0.6–1.2초, 한 번만 재생. 대기 시간을 만드는 전체 화면 로고 인트로는 사용하지 않는다. 자동 회전·튕김·무한 깜박임을 17개 사이트에 반복하지 않는다. 사이트의 제품 필름과 로고 모션은 별개로 설계한다. `prefers-reduced-motion`에서는 즉시 완성된 로고를 보여준다. 정지 상태의 SVG 파일은 항상 별도로 제공한다.

## 8. 제작 순서와 검수

1. 해당 사이트의 실제 화면·이름·기존 자산을 확인하고 브리프를 쓴다.
2. 다른 구조의 후보 세 가지를 짧게 검토한다. 이름만 바꾼 세 안은 후보가 아니다.
3. 선택한 방향을 흑백으로 제작한다. 글자 간격과 심벌의 무게를 맞춘다.
4. 가로·심벌·반전·파비콘을 만들고 출처를 기록한다.
5. 비교판에서 17개를 같은 조건으로 본다. 그 뒤 각 사이트의 실제 헤더와 모바일에 적용해 다시 본다.
6. 잘린 경로·폰트 의존성·깨진 링크는 자동으로, 닮은 실루엣·어색한 간격·업종 적합성은 시각적으로 검수한다.
7. 채택 이유, 수정한 점, 실제로 확인한 화면, 미확인 사항을 `LOGO.md`에 남긴다. 사용자 승인이나 상표 검토를 받았다고 임의로 기록하지 않는다.

탈락 조건: 철자 오독 / 작은 크기에서 사라짐 / 비율 찌그러짐 / 단색에서 정체성 상실 / 다른 사이트와 사실상 동일한 실루엣 / 설명과 파일 불일치 / 타사 로고의 식별 가능한 복제.

## 9. 재사용할 제작 지시문

> `LOGO_DESIGN.md`와 해당 사이트의 `DESIGN.md`를 읽고 실제 헤더를 확인하라. 먼저 `LOGO.md`에 브랜드 브리프와 서로 다른 후보 방향 세 가지를 기록하라. 업종의 구체적인 제품·공간·행위에서 구조 하나를 선택하라. 단색 원본을 기준으로 워드마크와 심벌을 제작하고 글자의 보이는 간격을 조정하라. 폰트 사용과 직접 그린 부분을 구분해 기록하라. SVG 가로형·단색·반전·심벌·파비콘을 만들고 비교판 및 실제 390px/1440px 화면에서 확인하라. 실행한 검사만 완료로 기록하라. 기존 브랜드명과 제작사 공식 로고를 임의로 변경하지 마라.

## 10. 참고한 공개 원칙과 해석 범위

- [Google — Evolving the Google Identity](https://design.google/library/evolving-google-identity): 전체 이름과 작은 크기용 표식의 관계, 작은 크기에서 시각적 무게를 조정하는 접근을 참고했다. 구글의 G·색상·도형은 사용하지 않는다.
- [IBM Design Language — 8-bar](https://www.ibm.com/design/language/ibm-logos/8-bar/): 여백과 최소 크기, 양각·음각 원본을 관리하는 방식에 참고했다. IBM의 줄무늬 글자나 수치를 이 프로젝트의 규칙인 것처럼 복제하지 않는다.
- [Mozilla — Logo & Usage](https://mozilla.design/mozilla/logo-usage/): 워드마크·아이콘의 용도와 주변 여백을 분리해 설명하는 체계를 참고했다. Mozilla 로고 자산은 사용하지 않는다.
- [getdesign.md](https://getdesign.md/): 사람이 읽고 구현에 연결할 수 있는 디자인 문서 형식을 참고했다. 위 브랜드들의 공식 가이드와 getdesign의 독립 분석을 구분한다.

위 출처는 원칙을 검토한 자료다. 이 문서의 17개 디자인 방향, 수치의 시작값, SVG 구성과 검수 절차는 HMSOFT 컬렉션을 위해 새로 정한 제안이다. 문서가 존재한다는 사실만으로 로고 제작이 완료된 것은 아니다.