Discourse MCP를 이용해 테마를 빠르게 만들기

,

커뮤니티를 시작하는 데 가장 큰 장벽은 흔히 "나만의 색을 입히는 것"입니다.

원하는 폰트, 브랜드와 어울리는 스타일을 원하시죠.

이 글에서는 다음 도구들을 활용하면 비교적 간단하게 무엇을 해낼 수 있는지 보여드리고자 합니다.

여기서 Codex를 선택한 이유는 최근 출시된 GPT-6 Astra가 놀라운 재능을 가진 비주얼 아티스트이기 때문입니다. Kimi K3Fable도 이 분야에서 꽤 강력하지만, 이 데모에서는 Astra를 사용했습니다.

1단계 - API 키 생성

다음 경로로 이동하세요: your.site/admin/api/keys/new

글로벌 API 키를 생성하세요.

보안 참고: 이 키를 안전하게 보관하고, 작업이 완료되면 폐기하는 것을 고려하세요. 이 키는 사이트에 대한 제한 없는 접근 권한을 부여합니다.

2단계 - Discourse MCP 추가

이 튜토리얼에서는 codex를 사용합니다:

수정: ~/.codex/config.toml

[mcp_servers.discourse]
command = "npx"
args = [
  "-y",
  "@discourse/mcp@latest",
  "--toolsets",
  "all",
  "--allow-writes",
  "--site",
  "https://figment123.discourse.group",
  "--auth_pairs",
  '[{"site":"YOUR_SITE","api_key":"YOUR_API_KEY","api_username":"system"}]',
]

(참고: Codex는 활성화/비활성화할 MCP를 선택할 수 없으며, 설정 파일에 있는 모든 항목이 활성화됩니다. MCP를 일시적으로 비활성화하려면 enabled = false를 추가할 수 있습니다)

:writing_hand: 도구 관련 참고: Discourse MCP는 140개 이상의 도구를 지원하며, 이 설정은 모두를 사용 가능하게 합니다. Claude와 Codex와 같은 현대적인 하네스는 이를 잘 처리하지만, 이 정도의 도구 수에 대해 많은 하네스는 어려움을 겪을 수 있습니다(예: Grok build는 필터링이 필요합니다)

Discourse MCP를 추가한 후, 에이전트가 이를 접근할 수 있는지 확인하세요:

3단계 - 에이전트에 작업을 수행하는 데 필요한 도구 제공

에이전트가 다음을 갖추고 있다면 훨씬 더 잘 수행됩니다:

  1. 눈: 자신의 작업을 볼 수 있는 능력 (playwright MCP, 컴퓨터 사용 등)
  2. 컨텍스트: Discourse MCP가 도움이 되지만, Discourse 소스 코드도 도움이 됩니다.
  3. 이미지 생성: 자산 등이 필요할 경우를 대비하여.

ChatGPT 앱에는 내장 브라우저가 있으므로, 이를 사용하도록 하세요. discourse/discourse 코드베이스를 클론하고 Discourse 디렉터리에서 에이전트를 시작하는 것을 잊지 마세요.

이것들은 필수는 아니지만, 갖추고 있으면 훨씬 더 나은 결과를 얻을 수 있습니다.

4단계 - 에이전트에 지능과 명확한 브리프 제공

이번에는 매우 좋은 결과를 보고 싶었으므로 GPT-6 Astra XHIGH를 선택했습니다.

다음으로, AI에게 제가 원하는 것(뉴요커 커뮤니티 테마)에 대한 짧은 브리프를 작성했습니다.

AI 작성 브리프

The Salon을 구축하세요. 세련된 Discourse 테마로, 고객이 Discourse의 정체성을 얼마나 극적으로 변형할 수 있는지를 보여주는 것입니다. 창의적 참고 자료는 The New Yorker입니다: 독자们在 대화에 참여하는 편집 기관입니다. 복제가 아닌 원래의 정체성을 창조하세요—도난된 로고나 라이선스되지 않은 독점 서체는 사용하지 마세요. 따뜻한 아이보리(#F7F4ED), 거의 검은 잉크(#20201E), 절제된 편집용 빨강(#B52B32), 가는 줄, 넉넉한 여백, 표현력 있는 세리프 헤드라인, 가독성 있는 세리프 본문 텍스트, 컴팩트한 산세리프 메타데이터를 사용하세요. 모노크롬 일러스트는 유머와 개성을 더해야 합니다. 데모에 필요한 모든 자산—폰트, 일러스트, 사진, 아바타, 아이콘—을 소싱, 다운로드 또는 생성하는 데 창의적 자유가 있습니다—적절하게 라이선스된 자료를 사용하고 필요한 경우 출처를 명시하세요. 범용 SaaS 카드, 가짜 양피지, 장식적 혼란을 피하세요. 다른 색상의 스톡 포럼이 아니라, 그 안에 살아있는 커뮤니티가 있는 현대적인 문예 잡지를 목표로 하세요.

데모 인스턴스에 카테고리를 설정하고, 주제, 답변, 가상의 기여자 프로필, 그리고 경험을 매력적으로 만드는 데 필요한 지원 콘텐츠를 추가하는 것은 명시적으로 승인됩니다. 기존 실제 콘텐츠를 보존하고, 가상의 활동은 데모 데이터임을 명확히 식별 가능하게 하세요. The Commons, Arts & Letters, City Life, Science & Ideas, Table Talk라는 다섯 가지 편집 부서를 독특한 설명과 일러스트와 함께 만드세요. 강력한 THE SALON 마스트헤드, 큐레이션된 리드 토론, 부수적인 헤드라인, 최신 대화 섹션을 구축하세요. "언제 모든 취미가 사이드 hustle이 되었는가?"와 "당신의 마음을 실제로 바꿀 것은 무엇인가?"와 같이 생각 깊고 다양한 토론을 시드하고, 설득력 있는 시작 게시물, 실질적인 이견, 짧은 답변, 인용, 잘 선택된 이미지를 포함하세요. 밀도, 스크롤링, 내비게이션을 시연할 수 있는 충분한 콘텐츠를 채우세요; 반복적인 채우기 텍스트를 사용하지 말고 중요한 화면을 비워두지 마세요. 모든 헤드라인은 실제 주제를 열어야 하며, 활동, 답변 수, 읽지 않은 상태가 항상 표시되어야 합니다. 카테고리 목록, 주제 페이지, 검색, 컴포저에 걸쳐 정체성을 유지하세요: 시작 게시물은 아름답게 타이포된 에세이처럼 느껴져야 하고, 답변은 컴팩트하고 사용 가능한 대화로 남아야 합니다. 모바일은 평온한 단일 열 경험이어야 하며, 다크 모드는 동일하게 의도적으로 느껴져야 합니다.

구현 세부 사항을 선택하기 전에 대상 Discourse 버전과 지원되는 테마 API를 검사하세요. 유지보수 가능한 테마와 초점을 맞춘 테마 컴포넌트를 선호하세요; 코어 패치, 불필요한 플러그인, 취약한 DOM 조작, 발명된 기능을 피하세요. 편집 큐레이션을 명시적이고 구성 가능하게 하세요. 모든 세부 사항에 대해 승인을 요청하는 대신, 가역적인 디자인, 자산, 스테이징 결정에 대해 자율적으로 작업하세요; 대표적인 홈 페이지와 콘텐츠가 채워진 주제 페이지로 시각적 언어를 확립한 후, 지원 표면을 마무리하세요. 설치 가능한 테마, 필요한 컴포넌트, 재현 가능한 데모 콘텐츠 설정, 자산 출처, 간결한 설치 지침을 전달하세요. 데스크톱과 모바일에서 실제 Discourse 인스턴스에서 결과를 검증하세요. 키보드 내비게이션, 대비, 읽지 않은 상태, 검색, 인용, 작성을 포함하세요. 테마 적용 전후의 동일한 스테이징된 커뮤니티를 캡처하여 변형이 의심의 여지가 없도록 하세요. 기준은 고객 준비가 된 데모입니다—모크업이 아니요, 아름다운 홈 페이지만이 아니요, 완전히 다른 장소감을 가진 일관되고 작동하는 커뮤니티입니다.

  • 필요 시 Discourse 소스 참조
  • https://figment123.discourse.group/는 데모 사이트이며, 원하는 대로 사용할 수 있고, 진행하면서 결과를 보고, 테마를 활성화할 수 있습니다.
  • 필요 시 주제 생성

5단계 - 훌륭해 보입니다!

1시간 10분 후, Astra Xhigh가 완료되었습니다.

아름다운 New Yorker에서 영감을 받은 테마입니다.

이 테마는 완벽하지 않고 엣지 케이스가 있습니다. 디자인이 어긋난 영역을 붙여넣고 에이전트가 수정하도록 하는 6단계 정제를 권장합니다. 하지만 시작점으로서, 오늘 우리가 이 일을 할 수 있다는 것은 정말 놀랍습니다. 1년 전에는 불가능했습니다.

실시간 정제 예시:

24개의 좋아요

제가 뭘 놓치고 있는 게 아니라면, 이 작업을 위해 커스텀 AI 에이전트 하네스를 만든 것으로 보입니다. :high_five: :+1:

AI 에이전트 하네스Claude Code, OpenAI Codex, 또는 OpenCode 같은 AI 코딩 하네스보다 더 포괄적인 개념이기 때문에, 용어에 익숙하지 않은 초보자를 위해 안개 같은 개념을 좀 더 명확히 해줄 수 있는 좋은 입문 자료를 찾아봤습니다:

한 줄만 기억하라면:

모델은 사고하고, 에이전트는 행동하며, 하네스는 에이전트가 멍청하게 행동하지 못하게 막아줍니다.


개인적으로는 이제 에이전트 자체는 더 이상 새로울 것이 없게 되고, 목적에 맞게 구축된 AI 하네스가 스토리의 더 흥미로운 부분이 되어가고 있다고 생각합니다.

단순히 “어떤 에이전트를 사용합니까?”라고 묻는 대신, 점점 더 유용한 질문은 “그 주위에 어떤 하네스를 구축했습니까?”가 될 것입니다.

2개의 좋아요

아니요, 커스텀 하네스는 직접 만들었지만, 이건 전부 Linux 환경의 바닐라 ChatGPT 앱, Discourse MCP 및 Discourse 트라이얼 버전으로만 구성되어 있습니다.

Mac에서는 ChatGPT의 기능이 더 풍부하여 모든 앱을 제어할 수 있습니다. 예를 들어, 빌드 과정 중에 Firefox와 Chrome에서 테스트를 하거나 심지어 iPhone 시뮬레이터까지 사용할 수 있습니다.

제 커스텀 하네스도 비슷한 결과를 낼 수 있으며, 다른 샘플을 공유할 예정입니다. https://chatgpt.com/download/

6개의 좋아요

미국 모델 이외의 대안을 비교하고 평가해 보고 싶은 분들을 위해, 흥미롭다고 판단한 새로운 릴리스를 하나 추가합니다:

1개의 좋아요

나중에 간단히 데모를 보여줄 수는 있겠지만, 아스트라(Astra)에 비할 바는 아니라고 봐.

3개의 좋아요

좋네요! 특히 헤드라인 기사가 제 마음을 잘 대변해 주는 것 같아요! :sweat_smile:

당시 저는 매우 회의적이었습니다. 하지만 딥시크(DeepSeek)는 V4 버전에서 제게 그것이 가치가 있다는 것을 증명해 주었습니다. GPT-6 아스트라는 프론티어 모델이지만, 이러한 유형의 작업을 수행하는 데 DS 4.1이 정말 좋은 대안이 될 가능성이 매우 높습니다.

네, 공정하게 테스트하려면 제 자체 하네스에서 Astra 작업을 다시 한 뒤 LLM만 교체해야 해서 시간이 좀 걸릴 거예요

이것은 셀프 호스터에게도 적용됩니다.


또한, 제 시도를 공유합니다. 제가 현재 작업 중인 특정 프로젝트/커뮤니티에는 완벽하지 않지만, 그래도 꽤 잘 작동했습니다.


4개의 좋아요

정말 멋지네요! AI에 대한 경험담의 현실적인 부분(“형…” ㅋㅋ)도 정말 좋았어요 :laughing:

1개의 좋아요

DeepSeek 4.1 flash max로 테스트를 진행했습니다.

전체 기록은 여기 있습니다: https://gisthost.github.io/?28dedf78da999ccca5b5b4feb1d58fc9/index.html

이 테스트는 다소 오염(contamination)이 있었는데, dv 컨테이너에서 테스트를 수행했고, 어느 시점에 에이전트가 MCP에 의존하기보다 Docker를 사용하여 변경 사항을 만드는 것이 더 효율적이라고 판단했기 때문입니다.

이미지 생성에는 Qwen 3 Image를 사용했습니다.

시각(eyes)을 위해 에이전트에게 chrome-devtools-mcp를 제공했습니다. 이를 통해 Linux에서 chromium을 사용하도록 쉽게 구성할 수 있으며, 이것이 제 일반적인 선택입니다:

   "chromium-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp@latest",
        "--headless=true",
        "--executable-path=/usr/bin/chromium",
        "--chrome-arg=--no-sandbox",
        "--chrome-arg=--disable-dev-shm-usage"
      ]
    },

전체 실행은 드라이버와 서브 에이전트 모두 DeepSeek 4.1 flash에 의존했습니다.

term-llm.com을 사용하여 TUI 모드로 구동했습니다:

결과:

관찰 사항

브리프(brief)가 중요합니다. 훌륭한 브리프가 있으면 결과도 훌륭할 것이며, 형편없는 브리프라면 LLM의 자의적 판단에 맡겨질 수밖에 없습니다. 훌륭한 브리프는 구조와 색상, 예시 등을 구체적으로 다루어야 합니다.


DeepSeek 4.1 flash는 이 테스트에서 매우 뛰어난 성능을 보였으며 비용도 매우 저렴했습니다. 캐시 읽기 비율 99%, 읽은 토큰 280만으로, 비피크 시간대에는 약 1.52달러, 피크 시간대에는 3.04달러가 소요되었을 것입니다. Astra는 토큰 효율성이 훨씬 높으므로 이는 공정한 비교가 아니지만, 참고로 Astra의 유사한 토큰 수 기준 비용은 325달러입니다.

보수적으로 추정하더라도, 토큰 효율성을 고려하더라도 Astra로 이와 같은 디자인을 만드는 데 50~100달러가 소요될 것이라 예상합니다. 현재 API 비용으로는 1.50달러에 이를 수 있는 것은 불가능합니다.

저는 OpenCode go 플랜에서 이를 실행했으며, 월 10달러 플랜에서 거의 소모된 느낌을 받지 않았습니다:

이 실행에서 몇 가지 인상적인 점이 있었습니다. 수 시간 동안 무인 상태로 실행할 수 있었으며, OP의 정확히 동일한 브리프에 대해 성실하고 신중하게 작동했습니다. 브리프의 모든 항목을 다루려고 시도했으며, 모든 것을 세심하게 테스트했습니다.

많은 부분을 정확히 구현했으며 디자인도 견고합니다.

그럼에도 불구하고 이는 GPT 6 Astra는 아닙니다. 제 눈에 이 디자인은 더 LLM적인 느낌이 듭니다. 여백, 폰트, 디테일에 대한 주의를 Astra와 비교할 수 없었습니다. 또한 Astra와 같은 수준의 시각적 정밀도(fidelity)가 없음이 분명했으며, 1차 반복 이후에도 명백한 시각적 오류가 많았습니다. 단점으로는 프롬프트를 주면 대부분의 오류를 수정할 수 있었습니다.

어떤 이유에서인지 이 한 가지는 수정을 거부했습니다:

하지만 나머지 특이한 문제들은 잘 처리되었습니다.

빌드에서 가장 인상적인 부분은 얼마나 깔끔하게 유지하려 했는지를 보여주는 점입니다.

  • 증거를 위한 폴더를 생성했습니다.
  • 테마를 깔끔하게 엔지니어링하여 여러 파일로 나누고 심지어 테스트까지 시도했습니다.

전반적으로, 50~100배 더 저렴한 모델에게서 Astra 수준의 결과를 기대하지는 말아야 하지만, 도구로서 분명히 비용의 일부로 매우 흥미로운 결과를 생산할 수 있습니다.

사후적으로, dv 컨테이너에서 테마를 직접 빌드한 후 업로드하는 것이 YOLO 모드로 안전하게 실행할 수 있고 설정이 매우 쉬우므로 더 나은 방법이라고 생각합니다.


다음 주에 이 주위에 몇 가지 실험을 더 시도하고 몇 가지 예시를 더 게시할 예정입니다.

8개의 좋아요

그런 것도 보고 싶네요 :eyes:

2개의 좋아요

이것을 시도해 보았는데, Astra만 제시된 모습을 정확히 재현하는 것 같고 다른 모델들은 시각적 일관성을 유지하지 못했습니다. 커스텀 UI 요소를 만드는 데 대해 추가적인 조언이 있으신가요?

커스텀 UI 요소를 만들 때는 dv 컨테이너에서 작업하는 것을 강력히 권장합니다. 이렇게 하면 코드에서 예시를 찾는 것이 훨씬 쉬워집니다.

1개의 좋아요