studiosoluta

먼저 볼 카드 — 공개 자료로 브랜드 조사해 기준값 파일 만들기

실습 채널 생성기

기준값 하나로 릴스·카드뉴스·상세페이지 만들기

  • 채널 생성기: 기준값 파일 하나를 읽어 채널마다 다른 형식의 결과물을 만드는 작은 프로그램 묶음
  • 변환 단계(어댑터): 기준값을 채널 형식으로 바꾸는 부분
부분하는 일눈닥터 예
기준값색·글꼴·사실·주장 목록brand.json
변환 단계기준값을 채널 형식으로 바꿉니다카드·상세페이지용 CSS 변수, 릴스용 HyperFrames 변수, carousel-studio 브랜드 설정
채널 템플릿변수만 써서 화면을 그립니다카드뉴스 1080×1350, 상세페이지 860px 폭, 릴스 1080×1920
문구 검사원고에서 쓰지 않을 주장을 찾습니다걸리면 빌드가 멈춥니다
  • 사람이 하는 일: 원고 쓰기·고르기, 검사에 걸린 문장 판단, 결과물 승인
예시 화면 세로 이미지 세 장을 나란히 놓은 그림. 왼쪽은 「양치는 매일. 눈꺼풀은?」 문구의 세로 영상 장면, 가운데는 「양치는 매일 하는데, 눈꺼풀은요?」 제목과 제품 상자가 있는 연두색 카드뉴스 1번, 오른쪽은 Dr.NOON 로고와 양치하듯 눈꺼풀도 매일 닦자는 제목이 있는 상세페이지 윗부분입니다.
눈닥터 brand.json 하나로 만든 카드뉴스 1번과 상세페이지 윗부분, 같은 색 값을 쓴 릴스 장면입니다. 세 결과물 모두 딥 그린 #006B32와 같은 글꼴을 씁니다.
  1. 생성기 폴더 구성을 먼저 받아 확인합니다.

    brands/[브랜드 id]/brand.json을 기준으로 채널 생성기 폴더를 만들려고 해. adapters/(기준값을 채널 형식으로 바꾸는 변환), channels/(카드뉴스·상세페이지·릴스 템플릿과 빌드 명령), checks/(쓰지 않을 주장 검사) 세 폴더로 나누고, 채널 템플릿에는 색 값을 직접 쓰지 말고 변환 결과의 변수만 쓰게 해 줘. 만들기 전에 폴더와 파일 구성을 먼저 보여 줘.

    확인폴더 트리와 파일마다 하는 일이 적힌 구성안이 나오고, 승인한 뒤에 파일이 생깁니다.

  2. 카드뉴스 원고를 정해진 형식으로 쓰게 합니다.

    카드뉴스 원고를 drafts/cardnews/[주제].md로 써 줘. ## 제목으로 카드를 나누고, 사진은 assets/에 있는 공식 사진만 쓰고, 사실은 brand.json의 facts에 있는 것만 써 줘.

    확인카드마다 제목·문장·사진 경로가 들어간 원고 파일이 생깁니다.

  3. 빌드를 돌리고, 문구 검사에 걸리면 결과물이 남지 않는지 확인합니다.

    카드뉴스 빌드를 돌려 줘. 쓰지 않을 주장 검사에 걸리면 outputs에 아무것도 남기지 말고 걸린 문장과 이유를 보여 줘. 통과하면 PNG 파일 목록과 크기를 보여 줘.

    확인검사에 걸린 문장이 있으면 문장과 이유가, 없으면 1080×1350 PNG 목록이 나옵니다.

  4. 같은 기준값으로 다른 채널을 빌드하고 색 값을 대조합니다.

    같은 brand.json으로 상세페이지 원고 [주제]와 릴스 장면 구성 [구성]도 빌드해 줘. 세 결과물에 실제로 쓰인 색 값을 뽑아 brand.json의 값과 같은지 표로 보여 줘.

    확인채널별로 쓰인 색 값과 brand.json 값이 나란히 있고, 모든 줄이 같다고 표시된 표가 나옵니다.

직접 해보기

대괄호 안은 실제 값으로 바꿔서 붙여넣습니다.

내 상황에 맞춰
내 brand.json으로 [채널 하나, 예: 스마트스토어 상세페이지]만 먼저 만들 수 있게 변환 단계와 템플릿을 하나 만들어 줘. 템플릿에 색 코드가 직접 들어간 곳이 있는지 검색해서 0곳인지 보여 줘.

기준값을 바꿨을 때 모든 채널이 따라오는지 확인합니다.

대괄호 안은 실제 값으로 바꿔서 붙여넣습니다.

한 단계 더
brand.json의 강조색을 [새 색 코드]로 바꾸고 세 채널을 다시 빌드해 줘. 바꾸기 전과 후 결과물에서 강조색이 쓰인 곳을 표로 비교하고, 다 보면 원래 값으로 되돌려 줘.

지금 쓰는 템플릿 하나에서 색 코드를 직접 적은 곳을 찾아 brand.json 변수로 바꾸고, 기준값의 색을 한 번 바꿔 다시 빌드해 보세요.

헷갈리기 쉬운 것

문구 검사는 원고 글자만 읽고 사진 안의 글자는 읽지 못하므로, 사진은 한 장씩 열어 보고 쓰지 않을 주장이 들어 있으면 쓰지 않습니다. 빌드가 만든 변수 파일을 손으로 고치면 다음 빌드에서 덮어쓰이므로 값은 brand.json에서만 고칩니다. 게시와 업로드는 생성기에 넣지 않고 사람이 확인한 뒤 합니다.

왜 이렇게 작동하나요

문서 프로그램의 스타일 기능을 써 봤다면, 제목 스타일 하나를 바꾸면 문서 안의 모든 제목이 같이 바뀌는 것을 알고 있습니다. 변환 단계는 brand.json을 채널마다 그런 스타일 묶음으로 바꿔 주는 단계입니다.

템플릿은 변수 이름만 알고 값은 모르기 때문에, 값이 바뀌면 빌드할 때마다 새 값이 들어갑니다. 문구 검사가 빌드 안에 있어서 걸린 원고는 결과물이 아예 생기지 않고, 검사를 건너뛴 결과물이 남지 않습니다.

더 알고 싶다면

채널이 늘어나면 무엇을 더하나요?

새 채널마다 템플릿 폴더 하나와, 필요하면 그 채널 형식으로 바꾸는 변환 파일 하나를 더합니다. 기준값 파일과 문구 검사는 그대로 씁니다. 카드뉴스 생성기처럼 이미 있는 도구를 쓰면 변환 단계가 그 도구의 브랜드 설정 형식으로 값을 내보냅니다.

carousel-studio로 카드뉴스 PNG 뽑기 카드에서 다룹니다 →

만든 결과물은 어디로 넘기나요?

결과물은 바로 게시하지 않고, 승인·사실 확인·권리 확인 칸이 있는 대기열에 넣어 사람이 확인한 항목만 내보냅니다.

승인한 게시물만 예약 목록에 올리기 카드에서 다룹니다 →

2026-10-07 기준 · 출처 · Design Tokens Format Module (W3C Design Tokens Community Group), HyperFrames — GitHub README