기능과 결과, 데이터 사용 범위를 쉽게 이해할 수 있게 설명합니다.Explain functions, results, and data use in language that is easy to understand.
HYUNTOOLS BRAND GUIDELINES · V1.0하나의 브랜드,
하나의 브랜드,
일관된 경험.One brand,
one consistent experience.
HyunTools와 연결된 모든 서비스가 같은 목소리와 시각 언어를 유지하도록 공식 디자인 원칙을 정리했습니다.These official design principles keep every HyunTools service aligned in voice and visual language.
01 · IDENTITY작은 불편을 줄여
작은 불편을 줄여
더 중요한 일에 집중하도록.Reduce everyday friction
and focus on what matters.
HyunTools는 일상과 업무에 필요한 서비스를 한곳에서 제공하는 독립적인 서비스 허브입니다.HyunTools is an independent service hub that brings everyday and professional tools together in one place.
장식보다 실제 문제 해결과 빠른 작업 흐름을 우선합니다.Prioritize solving real problems and completing work quickly over decoration.
제한, 보관 기간과 외부 연결 여부를 숨기지 않고 안내합니다.State limits, retention periods, and external connections openly.
OFFICIAL NAMINGHyunTools
문장 안에서도 대문자 H와 T를 유지합니다. Hyuntools, HYUN TOOLS, 현툴즈를 공식 표기로 사용하지 않습니다.Keep the capital H and T in every context. Do not use Hyuntools, HYUN TOOLS, or a translated spelling as the official name.
02 · LOGO
형태와 대비를 그대로 유지합니다.Preserve the shape and contrast.
현재 공식 로고는 어두운 표면에 최적화된 흰색 Hyun과 Logo Blue의 Tools 조합입니다.The current official logo combines a white Hyun with Logo Blue Tools and is optimized for dark surfaces.
기본 배경은 Midnight 또는 충분히 어두운 이미지 영역을 사용합니다.Use Midnight or a sufficiently dark image area as the default background.
HH
로고 주위에는 로고 H 높이만큼의 안전 여백을 확보합니다.Keep clear space around the logo equal to the height of the H.
최소 너비Minimum width120px
그보다 작을 때는 별도 심벌 자산을 준비하기 전까지 텍스트 이름을 사용합니다.Below this size, use the text name until a dedicated symbol asset is available.
밝은 배경Light backgroundsDark container
공식 라이트 로고가 준비되기 전에는 어두운 컨테이너 안에 기본 로고를 배치합니다.Place the default logo inside a dark container until an official light-background logo is available.
웹 동작Web behaviorNon-selectable
장식용 브랜드 로고는 선택·드래그되지 않도록 처리합니다.Decorative brand logos should not be selectable or draggable.
로고 금지 사례Do not
- 비율을 늘이거나 기울이기Stretch or tilt the logo
- Tools의 파란색을 임의로 변경하기Change the Tools blue arbitrarily
- 그림자·외곽선·그라데이션 추가하기Add shadows, outlines, or gradients
- 복잡하거나 대비가 낮은 배경에 바로 놓기Place it directly on a busy or low-contrast background
03 · COLOR
블루를 중심으로 차분하고 선명하게.Calm, clear, and centered on blue.
브랜드 색상은 방향을 안내하고 상태를 구분할 때 사용합니다. 한 화면에서 강조색이 경쟁하지 않게 합니다.Use brand colors to guide direction and distinguish states without making accent colors compete on one screen.
Logo Blue
#335FFF공식 로고의 Tools 색상Tools color in the official logo
Action Blue
#4E75FF주요 버튼과 상호작용Primary buttons and interactions
Accent Bright
#7892FF제목과 포커스 강조Headings and focus emphasis
Midnight
#06080D기본 페이지 배경Default page background
Surface
#0D111A카드와 모달 표면Card and modal surfaces
Foreground
#F6F8FC주요 텍스트Primary text
SERVICE ACCENTS서비스는 구분하고, 구조는 통일합니다.Distinguish services and unify the structure.
서비스별 강조색은 아이콘·작은 라벨·상태에 한정하며 버튼 형태와 레이아웃 규칙은 공통으로 유지합니다.Limit service accents to icons, small labels, and states while keeping button shapes and layout rules shared.
- HyunTools
#4E75FF - HyunWork
#9D77FF - HyunCode
#53C8E7 - HyunDocs
#5BCD98 - HyunDesign
#DF6CBF - HyunFocus
#E59B56
04 · TYPE & UI
작아도 읽히고, 달라도 같은 방식으로.Readable at every size, consistent across services.
정보 위계는 크기와 굵기로 만들고, 모든 공통 컨트롤은 동일한 상태와 동작을 제공합니다.Create hierarchy with size and weight, and give shared controls the same states and behavior.
DISPLAY · GEIST SANS필요한 서비스를
한곳에서.The services you need,
in one place.
한곳에서.The services you need,
in one place.
BODY · GEIST SANS / PRETENDARD
본문은 가능하면 14px 이상, 보조 설명은 12px 이상을 기준으로 사용합니다. 읽어야 하는 정보를 장식처럼 지나치게 작게 표시하지 않습니다.Use at least 14px for body copy and 12px for supporting text whenever possible. Never shrink readable information until it looks decorative.
LABEL · GEIST MONO · 11PX · 0.16EMGeist Sans를 기본으로 사용하고, 수치·코드·영문 라벨은 Geist Mono를 사용합니다.Use Geist Sans by default and Geist Mono for numbers, code, and English labels.
Microsoft Fluent Regular를 기본으로 사용하며, 작은 UI는 16px, 일반 UI는 20px, 강조 영역은 24px을 사용합니다.Use Microsoft Fluent Regular: 16px for compact UI, 20px for standard UI, and 24px for emphasis.
4px 단위를 기준으로 8·12·16·24·32px 간격을 사용하고, 주요 터치 영역은 최소 44×44px로 만듭니다.Use a 4px base with 8, 12, 16, 24, and 32px spacing, and keep primary touch targets at least 44×44px.
키보드 포커스, 충분한 명암, 명시적인 이름과 애니메이션 감소 설정을 모든 공통 UI에 적용합니다.Apply keyboard focus, sufficient contrast, explicit names, and reduced-motion support to every shared UI.
서비스 검색Search servicesNEWRADIUS 10–16
05 · VOICE
정중하되, 돌려 말하지 않습니다.Be respectful and direct.
사용자가 다음 행동을 바로 결정할 수 있도록 현재 상태, 영향과 해결 방법을 짧고 구체적으로 안내합니다.Describe the current state, its impact, and the solution briefly so users can decide what to do next.
파일이 7일 후 자동으로 삭제됩니다.The file is deleted automatically after seven days.
× 곧 파일이 사라질 수 있습니다.The file may disappear soon.
Google 계정으로 동기화하기Sync with your Google account
× 동기화 관련 옵션Sync-related options
저장하지 못했습니다. 연결을 확인하고 다시 시도하세요.Could not save. Check your connection and try again.
× 오류가 발생했습니다.An error occurred.
용어 통일Consistent terminology
- 로그인 — 계정 인증Sign in — authenticate an account
- 연결 — 외부 서비스 권한 허용Connect — grant access to an external service
- 동기화 — 계정에 데이터를 맞춰 저장Sync — keep data aligned with the account
- 보관 — 정해진 기간 동안 유지Store — retain something for a defined period
06 · ACCESSIBILITY
접근성은 선택 기능이 아니라 기본 품질입니다.Accessibility is a baseline quality, not an option.
WCAG의 인식·운용·이해·견고성 원칙을 기준으로 키보드 조작, 포커스 표시, 텍스트 명암, 상태 설명과 동작 감소를 함께 확인합니다.Use the WCAG principles of perceivable, operable, understandable, and robust to review keyboard use, focus, contrast, state descriptions, and reduced motion together.
- 주요 터치 영역 최소 44×44pxPrimary touch targets at least 44×44px
- 색상 외 아이콘·텍스트로 상태 전달Communicate state with icons and text, not color alone
- 모달의 초점 이동과 ESC 닫기Manage modal focus and support Escape to close
- prefers-reduced-motion 지원Support prefers-reduced-motion