SERVICE BUILDER
Build. Adapt. Deliver.
만들고, 변화에 맞추고, 끝까지 완성합니다.
Brand Story
20년의 개발 경험을 기반으로, 기획부터 운영까지 책임지는 서비스 빌더.
YESHTML5는 비즈니스 요구사항을 기술적으로 해석하고, 실제 운영 가능한 서비스로 구현합니다.
사용자 경험, 시스템 구조, 데이터, 배포 환경을 함께 고려해 서비스 전반의 일관성을 확보합니다.
웹과 앱 프로젝트에서 축적한 경험을 바탕으로 기획, 설계, 개발, 배포, 운영까지 책임 있게 수행합니다.
Brand Philosophy
同行
클라이언트와 같은 방향을 보고,
서비스의 시작부터 운영까지 함께합니다.
좋은 서비스의 완성 기준은 개발 종료가 아니라 안정적인 운영입니다.
사용자 요구와 비즈니스 우선순위, 기술 환경의 변화를 지속적으로 점검하고 변경 영향을 관리합니다.
YESHTML5는 유지보수 가능한 구조와 명확한 운영 기준을 바탕으로 장기간 신뢰할 수 있는 서비스를 구축합니다.
기능을 독립적인 컴포넌트와 모듈로 설계해 변경 범위를 통제하고, 재사용성과 유지보수성을 확보합니다.
Brand Keyword
Build
요구사항을 운영 가능한 서비스로 구현합니다.
아이디어와 요구사항을 구체화하고, 검증 가능한 서비스 구조로 설계합니다.
프론트엔드부터 백엔드, 데이터베이스, 배포 환경까지 일관된 기준으로 구현합니다.
- Web Application
- Mobile Application
- Backend System
- Cloud Infrastructure
Adapt
변경 영향을 분석하고 안정적으로 개선합니다.
운영 과정에서는 사용자 요구, 비즈니스 우선순위, 기술 환경이 지속적으로 변화합니다.
변경 범위와 위험을 분석하고, 안정성과 확장성을 고려해 단계적으로 개선합니다.
- Requirement Change
- Platform Expansion
- Technology Shift
- Team Structure
Deliver
안정적으로 운영되는 상태까지 책임집니다.
완료 기준은 코드 작성이 아니라 사용자가 실제로 이용할 수 있는 운영 상태입니다.
배포 경로와 운영 환경을 점검하고, 출시 후에도 안정적으로 동작하는지 확인합니다.
유지보수와 인수인계를 고려해 코드 구조와 기술 문서를 정리합니다.
- Store Release
- Deployment Pipeline
- Production Operations
- Long-Term Maintenance
Process
명확한 기준을 세우고 검증 가능한 결과물로 완성합니다.
브랜드 아이덴티티도 서비스와 동일하게 요구사항 정의, 설계, 검증, 자산화의 순서로 진행했습니다.
스케치에서 검토한 비례와 획 두께를 수치화하고, 벡터 좌표와 사용 규정으로 정리했습니다.
Build · Adapt · Deliver는 결과뿐 아니라 작업 과정에 적용하는 실행 원칙입니다.
스케치
보조선을 기준으로 글자 비례와 획 두께를 검토하고, 강조 요소와 색상 역할을 정의합니다.
완성
확정된 비례를 벡터 좌표로 변환하고, 45° 사선컷과 브랜드 색상 규칙을 정확히 적용합니다.
Voice
사실과 기준으로 설명합니다.
전문성은 수식어가 아니라 확인 가능한 경험과 구체적인 실행 기준에서 드러납니다.
'혁신적인', '최고의', '완벽한'과 같은 추상적 표현은 사용하지 않습니다.
YESHTML5는 적용 기술, 담당 범위, 운영 기간과 성과처럼 검증할 수 있는 정보를 우선합니다.
모든 문구는 사실에 근거하고, 고객이 업무 범위와 결과를 명확히 판단할 수 있도록 작성합니다.
Word Mark
하나의 기준으로 일관되게 운영합니다.
워드마크는 가로형 한 벌을 기준으로 사용하며, 배경에 따라 지정된 색상 버전만 적용합니다.
정사각형 지면에서는 가독성을 위해 워드마크를 축소하지 않고, 오렌지 E에서 파생한 아이콘 마크를 사용합니다.
Icon Mark
16px 환경을 기준으로 식별성과 선명도를 확보했습니다.
정사각형 지면에서는 워드마크를 축소하지 않고, 브랜드 식별 요소인 오렌지 E를 독립 아이콘으로 사용합니다.
세 개의 바와 45° 사선컷을 1px 정수 좌표에 맞춰 브라우저 탭과 작은 화면에서도 형태가 선명하게 유지됩니다.
배경은 투명하게 유지해 브라우저와 운영체제의 지면 색을 그대로 사용합니다.
아이콘 비례
- 기준 캔버스
- 16 × 16px
- 좌표 단위
- 1px 정수 그리드
- 바 두께
- 3px
- 바 간격
- 2px
- 사선 커팅
- 45° · 3px
- 안전 여백
- 좌우 2px
아이콘 사용 규정
- 01파비콘 · 홈 화면 · PWA처럼 정사각형 지면에서만 씁니다.
- 0216px 미만으로 축소하지 않습니다.
- 03배경색을 추가하지 않고 오렌지 마크만 사용합니다.
- 04워드마크 옆에 장식처럼 반복해서 붙이지 않습니다.
형태
각진 지오메트릭 산세리프를 기반으로 굵은 획과 넓은 자폭을 적용했습니다.
대문자 획은 수평과 수직 구조로 정렬해 기술적이고 안정적인 인상을 유지합니다.
워드마크는 YESHTML5만 사용하고, 도메인 표기는 별도의 텍스트 정보로 분리합니다.
사선
E와 5에만 45° 사선컷을 적용해 워드마크의 고유한 식별 요소를 만들었습니다.
E의 수평 바 세 개와 5의 상단 가로획은 동일한 각도와 오프셋 기준을 사용합니다.
일반 서체로 대체할 수 없는 커스텀 조형이므로 워드마크는 반드시 제공된 벡터 자산으로 사용합니다.
색 배분
차콜은 축적된 경험과 안정성을, 오렌지는 변화 대응과 실행력을 나타냅니다.
45° 사선컷이 적용된 E와 5에만 오렌지를 사용해 형태적 특징과 강조 원칙을 일치시켰습니다.
YES와 HTML5가 함께 읽히는 구조를 유지하되, 색상 배분은 가독성과 일관성을 우선합니다.
비례
- 전체 비율
- 1350 : 250 (5.4 : 1)
- 대문자 높이
- 140 (기준선 y=195)
- 획 두께
- 30 (대문자 높이의 1/4.7)
- 자간
- 26
- 사선 커팅
- 45° · 오프셋 30
적용
최소 크기
렌더 높이 16px 이상. 작은 지면에서도 대문자 획과 E·5의 사선 형태를 유지합니다.
여백
사방으로 획 두께(렌더 높이의 8%)의 2배 이상. 권장은 4배입니다.
배경별 톤
테마를 따라 자동 전환
밝은 글자로 고정
다크 모드에서도 어두운 글자 고정
하지 않는 것
- 01워드마크를 폰트로 조판해 대체하지 않습니다. E 와 5 의 45도 커팅은 서체가 제공하지 않는 형태입니다. 반드시 SVG 를 씁니다.
- 02색을 임의로 바꾸지 않습니다. 오렌지는 E 와 5 에만 들어갑니다.
- 03오렌지는 강조색 전용이며 배경색으로 사용하지 않습니다.
- 04가로세로 비율을 바꾸지 않습니다. 늘리거나 좁히지 않습니다.
- 05워드마크 안에 도메인이나 설명 문구를 결합하지 않습니다.
- 06회전 · 기울임 · 그림자 · 외곽선 · 그라데이션을 넣지 않습니다.
Color System
세 가지 색상으로 일관성을 관리합니다.
각 색상은 배경, 본문, 강조 역할을 명확히 구분해 사용합니다. 제한된 팔레트로 화면 간 일관성과 브랜드 인지도를 유지합니다.
#F5F1E8
RGB 245 241 232
- 기록
- 설계
- 일관성
#131B22
RGB 19 27 34
- 20년의 경험
- 기술의 깊이
- 신뢰
#F65C05
RGB 246 92 5
- 변화
- 전환
- 실행력
종이#F5F1E8
순백보다 부드러운 종이색을 사용해 장시간 화면을 읽을 때의 시각적 부담을 줄였습니다.
기록과 설계 문서의 인상을 전달하며, 콘텐츠가 안정적으로 읽히는 기본 배경을 구성합니다.
차콜과 오렌지가 각자의 역할을 명확히 수행할 수 있도록 전체 색상 체계의 기준면으로 사용합니다.
차콜#131B22
순수 검정보다 푸른 기가 있는 차콜을 사용해 화면에 깊이와 안정감을 부여했습니다.
종이색 배경에서 높은 명도 대비를 확보해 본문과 주요 정보의 가독성을 유지합니다.
20년의 개발 경험과 기술적 신뢰를 나타내는 주색으로, 텍스트와 핵심 UI에 일관되게 적용합니다.
오렌지#F65C05
오렌지는 변화와 실행을 나타내는 강조색으로, 사용자의 시선이 필요한 지점에만 제한적으로 적용합니다.
워드마크에서는 45° 사선컷이 적용된 E와 5에만 사용해 형태적 특징과 색상 역할을 일치시켰습니다.
사용 범위를 명확히 제한해 시각적 혼선을 줄이고, 핵심 요소의 인지도를 유지합니다.
지면
밝은 지면 — 종이 바탕 · 차콜 글자
어두운 지면 — 차콜 바탕 · 종이 글자
밝은 지면과 어두운 지면의 두 조합만 사용합니다. 오렌지는 강조 요소에 한정하며 배경색으로 사용하지 않습니다.
Download
공식 워드마크와 아이콘 원본입니다. 비율, 색상, 여백 규정을 유지해 사용합니다.
