impactbook.ai
제품 업데이트 · 7편

impactbook.ai 업데이트: 브랜드 아이덴티티를 공유하고 바로 활용해요

브랜드의 컬러·폰트·로고·디자인 토큰을 하나의 공개 페이지와 design.md로 정리해 사람과 개발 도구가 같은 기준을 봅니다.

· 읽는 데 약 6분
브랜드 컬러와 타이포그래피, 로고, 디자인 토큰을 한 시스템으로 표현한 impactbook.ai 제품 업데이트 표지

브랜드 가이드가 이미지 몇 장에만 머물면 실제 제작 과정에서 금세 흐트러집니다. 디자이너는 컬러 값을 다시 찾고, 개발자는 폰트와 간격을 따로 옮기며, 콘텐츠 담당자는 어떤 말투가 맞는지 다른 문서를 확인하게 됩니다.

이번 업데이트에서는 브랜드 아이덴티티를 사람이 읽는 공개 페이지와 도구가 읽는 design.md·디자인 토큰으로 함께 정리했습니다. 링크 하나로 브랜드의 방향을 설명하고, 필요한 값은 그대로 복사해 웹사이트와 콘텐츠 제작에 사용할 수 있습니다.

업데이트 기간은 2026년 9월 27일부터 10월 10일까지입니다. 당시 배포된 내용을 뒤늦게 정리하는 백필 글이며, 화면 캡처는 이후 실제 생성한 AI 예시 브랜드의 현재 화면을 기준으로 했습니다. 예시 브랜드는 실제 기업이 아닙니다.

1. 브랜드 아이덴티티를 공개 페이지로 공유해요

완성한 브랜드 아이덴티티는 고유한 주소의 공개 페이지로 발행할 수 있습니다. 공개 디렉토리에서는 브랜드의 업종과 핵심 설명을 먼저 비교하고, 상세 페이지에서 전체 기준을 확인합니다.

AI가 만든 브랜드 아이덴티티 예시를 모아 보는 공개 디렉토리 화면브랜드의 핵심 이미지와 설명을 먼저 살펴보고, 상세 아이덴티티 페이지로 이동할 수 있습니다.

검색엔진이 브랜드별 페이지를 발견할 수 있도록 제목·설명·공유 이미지와 sitemap도 함께 연결했습니다. 브랜드 스튜디오에서 예시를 둘러보다가 같은 공개 페이지를 확인하고 내 브랜드 만들기로 이어갈 수 있습니다.

2. 이야기와 시각 기준을 한 화면에 담아요

상세 페이지에는 로고와 색상만 나열하지 않습니다. 브랜드가 왜 존재하는지부터 실제 표현 방식까지 하나의 흐름으로 구성합니다.

  • 브랜드 소개와 영문명
  • 핵심 가치와 주요 고객
  • 톤 앤 보이스와 무드
  • 권장 표현과 피해야 할 표현
  • 메인·보조·강조·배경·본문 컬러
  • 제목·본문 폰트와 크기 체계
  • 워드마크·심볼·배지·모노그램
  • 개발자용 디자인 토큰

예시 브랜드 연토의 핵심 가치와 무드, 컬러와 타이포그래피를 확인하는 상세 화면브랜드 이야기와 표현 원칙, 컬러·폰트를 한 페이지에서 확인해 제작 참여자가 같은 기준을 공유할 수 있습니다.

컬러 조합에는 WCAG 2.1 기준의 명도 대비도 표시합니다. 배경과 본문, 메인 컬러 조합이 작은 글자에 적합한지 또는 큰 글자에만 적합한지 미리 알 수 있어, 보기 좋은 색을 고르는 데서 접근 가능한 사용법까지 이어집니다.

3. 개발자용 토큰을 그대로 복사해 써요

같은 브랜드 값을 사람이 문서에서 보고 다시 입력하면 오타와 해석 차이가 생깁니다. 그래서 컬러, 폰트, 크기, 행간, 자간을 세 가지 형식으로 제공합니다.

  • CSS 커스텀 프로퍼티
  • Tailwind 설정
  • JSON 토큰

브랜드 아이덴티티 페이지에서 CSS 디자인 토큰을 복사하는 화면브랜드 컬러와 폰트, 글자 크기·행간·자간을 코드 형태로 제공해 웹 프로젝트에 바로 적용할 수 있습니다.

페이지에서 필요한 형식을 골라 복사하거나, 전체 가이드를 design.md로 받을 수 있습니다. design.md는 브랜드 소개와 사용 원칙, 토큰을 Markdown 한 파일에 담아 개발 저장소, AI 코딩 도구, 콘텐츠 제작 프롬프트의 공통 참고 자료로 활용할 수 있습니다.

4. design.md는 다시 발행해도 같은 기준을 유지해요

브랜드 문서를 매번 AI가 새로 작성하면 같은 브랜드를 다시 발행했을 때 문장이나 값이 조용히 달라질 수 있습니다. design.md는 저장된 브랜드 스냅샷을 정해진 형식으로 렌더링합니다.

이 방식은 세 가지 장점이 있습니다.

  1. 같은 브랜드 데이터에서는 같은 문서가 만들어집니다.
  2. 공개 페이지와 문서가 같은 컬러·폰트·대비 값을 사용합니다.
  3. 변경된 부분을 버전 관리 도구에서 쉽게 비교할 수 있습니다.

접근성 대비 계산도 서버 한곳에서 수행해 페이지와 문서의 등급이 어긋나지 않게 했습니다. 표시할 때 반올림한 수치가 아니라 실제 계산값을 기준으로 등급을 판정합니다.

5. 공개용 데이터는 내부 브랜드 원본과 분리해요

공개 페이지는 회사 내부의 브랜드 데이터를 실시간으로 직접 읽지 않습니다. 발행 시 공개해도 되는 필드만 별도의 스냅샷으로 복제하고, 이후 공개 경로는 그 스냅샷만 사용합니다.

  • 공개할 항목을 명시적인 허용 목록으로 관리합니다.
  • 이메일·전화번호처럼 연락처로 보이는 문자열이 설명에 섞이면 발행을 막습니다.
  • 로고 파일이 하나도 준비되지 않으면 성공으로 표시하거나 검색 결과에 올리지 않습니다.
  • 같은 브랜드를 다시 발행해도 중복 페이지를 만들지 않습니다.
  • 여러 SVG 로고를 한 페이지에 표시할 때 내부 ID가 충돌하지 않게 분리합니다.

공개 링크가 오래 유지되더라도 내부 작업 데이터가 의도치 않게 함께 노출되지 않는 구조를 우선했습니다.

6. 검색과 공유에서 브랜드별 맥락이 보이게 했어요

각 브랜드 페이지에는 브랜드 이름과 설명에 맞춘 메타데이터와 공유 이미지를 제공합니다. 공개 디렉토리와 sitemap, 브랜드 스튜디오의 내부 링크를 연결해 검색엔진과 사용자가 같은 경로로 브랜드를 발견할 수 있게 했습니다.

현재 공개된 예시는 AI가 만든 가상 브랜드임을 목록과 상세 페이지에 분명히 표시합니다. 실제 고객 브랜드를 공개하는 기능은 소유자의 명시적인 선택과 공개 범위를 기준으로 운영할 예정입니다.

다음 업데이트에서는 결과물을 더 오래 이어 만드는 흐름을 소개합니다

다음 글에서는 2026년 10월 11일부터 10월 17일까지 추가된 카드뉴스 이어 만들기, 단계별 생성 상태와 프로젝트별 결과물 보관함을 정리하겠습니다.

공개 예시는 브랜드 아이덴티티 디렉토리에서 확인할 수 있습니다. 사용 중 불편한 점이나 다음 글에서 먼저 보고 싶은 기능은 ibi@impactbook.ai로 알려주세요.

문의하기