[heimdex people] 대괄호 [ ] 하나로 하임덱스의 기술을 시각화하기까지｜Design

안녕하세요, 하임덱스 양디입니다.

지난 1편에서는 리브랜딩의 범위를 자르고, 브랜드 문장을 6개의 판정 기준으로 내리는 과정을 다뤘습니다. 2편은 그 기준을 실제 형태에 적용한 이야기입니다. 통과한 것보다 탈락한 것이 더 많은 기록이에요.

Q1. 그 6개 기준으로 봤을 때, 기존 로고는 어땠나요?

제품 디자이너 관점에서는 로고를 볼 때도 자꾸 제품 화면부터 떠오르더라고요. 파비콘이나 사이드바처럼 작은 공간에 들어갔을 때 어떻게 보일까 하는 것들이요.

팀원들과 치열하게 고민한 결과, 기존 로고에서 가장 걸림돌이 되는 3가지 문제를 정의할 수 있었습니다.

1. 다크 배경 시인성 저하 : 어두운 배경 위에 놓였을 때 로고가 배경에 묻혀 잘 보이지 않았어요.
2. 소형화 시 형태 인식 불가 : 로고 위에 작은 파란색 사각형 요소가 떠 있었는데, 사이즈가 작아지면 로고의 일부가 아니라 그냥 먼지(Dot)처럼 보여 로고로 인식되지 않았어요.
3. 레이아웃/여백 확보의 어려움: 형태 특성 상 시각적 중심을 잡기 어렵고 주변 여백을 규칙적으로 확보하기 모호했어요.

Q2. 세 번째 문제는 조금 추상적으로 들리는데, 실무에서 어떤 식으로 나타나나요?

여백은 취향이 아닌 규칙의 영역입니다. 보통 로고 주변에는 "심볼 높이의 절반만큼은 어떠한 요소도 침범할 수 없다"와 같은 클리어 스페이스(Clear Space) 규칙을 적용하거든요.

문제는 이 규칙을 세우려면 로고 자체에 기준이 될 만한 시각적 중심이나 반복되는 단위가 존재해야 한다는 점이었습니다. 기존 로고는 이 기준이 모호하다 보니, 헤더에 배치하는 사람마다 여백을 제각각 다르게 잡게 되었죠. 결국 문서 표지, 웹 헤더, 슬라이드 마스터 등 매체마다 로고의 크기와 여백이 제각각인 상황이 발생했습니다.

이러한 오차는 단일 화면에서는 사소해 보일지 몰라도, 수십 개의 화면에 누적되면 브랜드가 제대로 관리되지 않고 있다는 인상을 주게 됩니다.

Q3. 그럼 새 형태를 찾는 과정도 궁금해요. 검토했다가 버린 방향들이 있었나요?

우선 하임덱스의 핵심 기능인 “No Upload(원본을 옮기지 않고 가치를 꺼내는 기술)를 어떻게 형태화할 것인가에 대한 고민에서 출발했습니다. 그리고 그 답을 개발자들에게 친숙한 대괄호 기호 [ ]에서 찾았습니다.

[  ]  ← 배열과 인덱스를 여는 기호
• 원본 데이터는 고객 서버 안에서 움직이지 않음
• 가치만 꺼내는 색인(Indexing)의 성질과 완벽히 일치
• 데이터를 감싸지만 가두지 않는 '열린 괄호'

[ ] 는 원본 데이터를 복사하지 않고, 값이 있는 자리를 가리키는 기호입니다. 원본은 고객 서버에 그대로 두고 가치만 발견하는 하임덱스의 기술 정신과 정확히 똑같았죠. 이 인덱싱 기호 [ ]와 이니셜 h를 곡선과 직선이 어우러진 면 구조로 단순화하여 최종 심볼을 만들었습니다.
시도 과정에서 선(Line) 기반 심볼도 검토했으나, 16px 수준의 소형 환경에서 1px 선이 반 픽셀 영역에 걸쳐 회색으로 뭉개지는 현상이 발생했습니다. 그래서 최종적으로 면(Solid) 형태를 채택했습니다. 그 결과, 작게 축소해도 형태가 또렷하게 유지되고 다크 배경에서도 실루엣이 명확하게 드러나며, 가로·세로 어떤 레이아웃에서도 안정적인 균형을 확보할 수 있게 되었습니다.

Q6. 워드마크도 기존 대문자 H가 아닌 소문자 h로 바뀐 점이 눈에 띕니다.

heimdex.com, @heimdex 등 우리가 실제로 타이핑할 때 하임덱스는 전부 소문자로 시작됩니다. 새로운 결정이라기보다, 이미 그렇게 쓰이고 있던 실제 맥락을 로고가 자연스럽게 따라간 쪽에 가깝습니다.

시각적으로도 소문자 h가 훨씬 덜 옆으로 퍼집니다. 기존 대문자 워드마크는 가로세로 비율이 10.9:1이었는데, 소문자로 바꾸며 4.9:1로 안정화되었습니다. 10:1을 넘는 워드마크는 좁은 헤더나 모바일 상단에서 제일 먼저 잘려나가기에 중요한 부분이였습니다. 또 심볼과 나란히 놓았을 때 한 덩어리로 안 읽히더라구요. 심볼은 정사각에 가까운데 워드마크만 길면 둘이 따로 노는 것처럼 보이기에 아래와 같이 설정하였습니다.

[워드마크 & 심볼 비율 규칙]

• 심볼 형태: 약 14:15의 정사각에 가까운 세로형
• 높이 비율: 심볼 높이 : 워드마크 높이 = 3 : 2
• 요소 간격: 심볼과 워드마크 사이 간격은 심볼 폭의 약 3/10

Q7. 브랜드 컬러 결정 과정도 꽤 치열했던 것으로 들었습니다.

보안과 신뢰를 핵심 가치로 두고, 초기에 파랑과 초록 계열로 10가지 후보를 선정했습니다. 하지만 내부 논의 과정에서 "초록색은 친환경 기업 같은 인상을 준다"는 의견이 있어, 브랜드 정체성의 혼선을 막기 위해 초록 계열은 제외하고 깊이감 있는 네이비 톤으로 방향을 모았어요.

다만, 단일 네이비 컬러만으로는 제품 UI 내에서 계층 구조를 형성하기 어려웠고, 이에 따라 Brand Color와 Primary Color의 역할을 분리했습니다.

이유는 명확했습니다. Brand Color인 #0A2240은 명도가 낮아 본문용 검정 태그(#1A1A1A)와의 대비차가 1.09:1에 불과했습니다. 버튼에 적용할 경우 본문 텍스트와 구분이 되지 않아 시각적 시인성이 떨어졌죠. 또한 버튼의 Hover 및 Pressed 상태 표현 시 명도 단계를 확보하기 어려웠습니다.

반면 명도를 한 단계 올린 #234C77은 상호작용 상태(Hover 1.34:1, Pressed 1.65:1)를 명확히 구분할 수 있었습니다. 결국 Brand Color는 "우리가 누구인가"를 나타내는 색이고, Primary Color는 "어디를 눌러야 하는가"를 안내하는 색으로 각자의 목적에 맞게 재정의했습니다.

Q8. 그럼 이 두 색으로 모든 상황이 해결되나요?

아니요, 역할을 나눠놓고 보니 또 다른 걸림돌이 생겼습니다. 화면이 어두워지면 상황이 완전히 달라졌거든요.

#234C77이 흰 배경에서는 대비가 8.85:1로 충분한데, 어두운 브랜드 배경인 #0A2240 위에 올리니까 1.80:1이었습니다. 검정 배경에서는 2.37:1이고요. UI 가독성 표준 기준인 3:1에도 못 미쳐요. 결국 라이트 화면 용으로 만든 색이라 다크 화면에서는 그대로 못 쓰는 상황이었습니다.

단순히 컬러를 하나 더 추가하는 방식은 향후 확장성에 한계가 있다고 판단하여, Primary Color를 단일 값이 아닌 스케일 시스템으로 재설계 했습니다. 색상은 그대로 두고 명도만 다르게 만들어서, 테마별로 다른 단계를 쓰는 방식이죠.

이렇게 하니까 원래 쓰던 #234C77이 없어지는 게 아니라 스케일 안에서 500 자리를 차지하게 되더라고요.

하나 더 조심할 게 있었어요. 다크에서 300을 버튼 면으로 쓰면 그 위 글자는 흰색이 아니라 #0A2240이어야 합니다. 흰 글자는 3.03:1로 미달이거든요. 라이트 화면 습관대로 흰 글자를 얹으면 다시 안 보이게 되더라고요.

이것도 실제 다크 UI가 나와봐야 알 것 같아서, 지금은 규칙만 미리 정해둔 상태입니다.

Q9. 이야기를 들을수록 '프로덕트 디자이너'가 BX/BI 작업을 했기에 나올 수 있었던 시선들이 느껴집니다. 작업 방식에 차이가 있었나요?

설계 작업의 우선순위가 달랐습니다. 로고를 조형할 때도 "이 요소가 실제 제품 화면 어디에 위치할 것인가"를 먼저 고려하게 되더라고요.

그래서 작업 캔버스 한쪽에 항상 16px, 24px 크기의 미니뷰를 띄워두고 작업했습니다. 로고가 대형으로 노출되는 케이스보다 사이드바 상단이나 브라우저 탭(Favicon) 같은 소형 환경에 체류하는 시간이 훨씬 길기 때문입니다.

또한 다양한 UI 상태(State)를 고려하는 습관을 적용했습니다. 제품은 정상 화면 외에도 로딩, 빈 상태(Empty), 에러 등 다양한 조건이 존재하며 로고는 모든 상태에서 일관되게 기능해야 합니다.

마지막으로 시스템화와 핸드오프(Handoff)를 염두에 두었습니다. 주관적인 감각에 의존하지 않고 3:2, 3/10과 같은 수치적 규칙으로 명시하여, 디자이너가 부재한 상황에서도 개발 및 작업 환경에서 동일한 결과물이 구현되도록 표준화했습니다.

물론 브랜드 자체의 조형적 완성도나 타 브랜드와의 관계성에 대해서는 팀원들과 지속적으로 시안을 공유하고 피드백을 수렴하며 보완해 나갔습니다.

제품의 본질을 명확한 시각 언어로 정의하고 하임덱스만의 새로운 아이덴티티를 완성해 주신 준수님께 감사드립니다. 하임덱스 팀은 앞으로도 구성원 각자가 자신의 역량을 마음껏 발휘하며 성장할 수 있는 환경을 만들어가겠습니다.

새롭게 거듭난 하임덱스의 로고와 앞으로 펼쳐갈 비전에 많은 관심과 응원 부탁드립니다.

• 채용 문의: [채용 공고 링크] / heimdex@heimdex.co