DeepSeek Harness를 사용하여 DeepSeek V4.1 Flash의 답변을 표나 그래프 형태로 조작하고 싶다면, GenUI가 도입 후보입니다. 2026년 11월 10일에 실제로 설치하여 중국어 프롬프트로 모든 기능을 시연한 결과, 답변은 3분 58초 만에 생성되었으며, 표 정렬이나 함수 매개변수 변경이 브라우저 내에서 완료되었습니다. 본 글은 DSH(DeepSeek Harness)에서 데이터나 매개변수를 반복적으로 확인해야 하는 개발자에게 적합합니다. 단순히 텍스트 답변만으로 충분한 사용자, 모델 API가 설정되지 않은 사용자, 또는 사내 플러그인의 권한을 확인할 수 없는 사용자에게는 추천하지 않습니다. 모든 컴포넌트와 모든 DSH 버전을 검증한 것은 아닙니다.
실제 답변에 표시된 기능 목록입니다. 화면은 간체 중국어로 되어 있으며, 정렬, 필터링, Markdown/CSV 복사 및 로컬에서 완료되는 조작을 확인했습니다.
도입 계기는 Li Bu-kai 님의 X(구 Twitter) 게시물 때문이었습니다. 데이터 패널, 함수 플롯, 채점형 퀴즈, 입력란 위에 고정하는 패널 등이 소개되어 있었습니다. 단순히 외관 변경뿐만 아니라, 답변 이후의 조작을 어느 정도까지 브라우저 측에서 처리할 수 있는지 확인해보고자 했습니다.
이번에 사용한 패키지는 **@changfenhuang/dsh-genui**입니다. 스코프(scope)를 생략하지 않는 것이 중요합니다.
게시물에서 소개된 changfenhuang/dsh-genui라는 리포지토리 경로는 현재 404 오류가 발생합니다. 현재 소스는 omdsh-dev/dsh-genui이며, 대응하는 npm 패키지는 @changfenhuang/dsh-genui입니다.
npm에는 스코프가 없는 dsh-genui도 있지만, 이는 다른 유지보수자가 구현한 것입니다. 이번 패키지의 약칭이 아닙니다. 또한, 일반적인 Node 종속성으로 설치만 한다고 해서 DSH에 플러그인 등록이 완료되는 것은 아닙니다.
DSH의 플러그인 페이지에서는 다음 순서로 확인했습니다:
- '플러그인 추가'를 열고,
@changfenhuang/dsh-genui을 전체 이름으로 입력합니다. - 공식 기본값 또는 명시적으로 신뢰할 수 있는 미러를 사용합니다.
- 설치된 목록에서 패키지 이름을 확인하고 활성화합니다.
- DSH 웹 서비스를 재시작하고 브라우저를 하드 리프레시(hard refresh) 합니다.
- 새로운 세션에서 작은 UI를 생성하여 동작을 확인합니다.
2026년 11월 10일자 공식 Quick Start에는 DSH 호스트로 ^0.2.0-rc.1, ^0.2.1-rc.1, ^0.2.2-alpha.2가 나열되어 있습니다. 현재 RC와 alpha 호스트는 Node.js 24.9.0 이상이 필요하며, 플러그인 CLI에는 pnpm도 필요합니다. 도입 전에 최신 요구 사항을 확인해 주십시오. 이번 스크린샷에는 DSH의 정확한 빌드가 기록되어 있지 않으므로, 모든 구 버전에서 동일한 화면 절차를 따를 것이라고 단언할 수 없습니다.
제가 입력한 프롬프트는 '展示一下刚刚加入的ui的完整功能。'라는 중국어 프롬프트입니다. 의미는 '방금 추가한 UI의 전체 기능을 보여줘'이며, 일본어 프롬프트 품질을 평가한 실험이 아닙니다.
DeepSeek V4.1 Flash는 추가된 @changfenhuang/dsh-genui를 확인한 후에 데모를 생성했습니다. 소요 시간은 3분 58초입니다. 이는 기능을 다수 포함하는 긴 답변의 기록이며, 작은 표나 그래프를 한 건 생성할 때 발생하는 고정 대기 시간이 아닙니다.
답변은 순수한 JSON이 아니라 능력 카드(ability card)에서 시작하여, 그 뒤에 표, 그래프, 함수 플롯, 계산 필드, 퀴즈, 3D 시나가 전개되었습니다.
설명에는 네 가지 표시 경로가 포함되어 있었습니다.
- 대화 내에 컴포넌트를 전개하는
dsh-ui 페인스 (fence)
- 툴바에 표시하는
render_ui
- 카드 - 입력란 위에 작업 영역을 고정하는
/panel
- 패널 우상단에서 열 수 있는 템플릿 및 실적 페이지
다음 GIF는 실제로 답변을 스크롤하고 그래프를 연 기록입니다.
만약 dsh-ui의 코드 페인스만 표시된다면, 모델 출력과 렌더링을 분리하여 조사해야 합니다. 패키지 등록 및 활성화, DSH 재시작, 브라우저 업데이트, 호스트 버전을 먼저 확인하면, 모델 측 문제와 분리하기가 쉬워집니다.
GenUI의 장점은 답변을 꾸미는 것보다는, 답변 이후의 작은 조작을 어디에서 처리할 수 있느냐에 있습니다. 이번 조작에서는 다음 세 가지로 분류되었습니다.
| 조작 유형 | 확인된 예시 | 모델 재문의 |
|---|
| 브라우저 내 상태 변경 | 테이블 정렬, 행 필터링, 탭 전환, Markdown/CSV 복사 | 없음 |
| ... | 있음 | |
그래프 영역에는 막대 그래프, P50/P95 선형 차트, 구성비 링이 포함되어 있었습니다. 모든 수치는 데모용입니다. 실제 서비스나 업무 데이터의 정확성 여부가 아니라, 조작 후 표시가 업데이트되는지 또는 별도의 모델 요청이 발생하는지를 확인했습니다.
일반적인 텍스트 답변의 경우, “지연순으로 정렬하기”, “다른 값으로 곡선 그리기”와 같은 작은 변경에도 다시 프롬프트를 보내야 합니다. GenUI에서는 브라우저가 이미 가지고 있는 상태를 현장에서 업데이트하고, 다음 추론이 필요한 조작만 모델로 되돌립니다. 이 차이가 실제 사용 편의성에 큰 영향을 줍니다.
다만, 모델과의 왕복 횟수가 줄어드는 것과 전체 토큰 수가 반드시 줄어드는 것은 별개의 문제입니다. 최초 UI 생성에도 출력 비용이 발생하므로, 이번에는 동일 내용으로 비교 측정을 하지 않았습니다.
함수 플롯에서는 슬라이더를 움직이면 곡선이 다시 그려집니다. 수식 설명, 교재 작성, 파라미터 비교 시에는 변경할 때마다 답변 전체를 다시 생성할 필요가 없습니다.
다이어그램 아래의 흐름을 보면, 사용자가 질문하고 모델이 dsh-ui 사양을 출력하면 렌더러가 컴포넌트를 표시합니다. 후속 처리를 가진 컨트롤을 조작했을 때만 이벤트가 모델로 돌아갑니다. 자신의 워크플로우를 검증할 때도 외관보다는 이 경계를 확인하는 것이 효과적입니다.
제가 시도해 볼 만한 용도는 다음과 같습니다.
- 모델이 정리해 준 테이블을 직접 정렬하여 확인하기
- 수식과 파라미터를 나열하고 슬라이더로 변화를 설명하기
- 지속적으로 사용하는 체크리스트나 작은 작업 영역을
/panel에 배치하기
패널은 /panel로 전환하며, 오른쪽의 ‘×’ 버튼으로 닫을 수 있습니다. 내용 커스터마이징은 /panel 清单, 삭제는 /panel clear입니다. 항상 표시할 필요는 없습니다.
GenUI는 표시와 조작을 담당하므로, 모델 연결 설정은 별도로 필요합니다. 이번에는 Crazyrouter의 OpenAI 호환 API를 사용했으며, Base URL은 https://api.crazyrouter.com/v1이었습니다. API 키는 DSH 인증 정보 설정에만 저장하고, 프롬프트, 스크린샷, 생성 양식에는 포함시키지 않았습니다. 모델 ID 역시 표시 이름에서 추측하지 않고 계정에서 사용 가능한 값을 확인합니다.
현재 모델 후보는 Crazyrouter의 모델 목록에서 확인할 수 있습니다. 같은 UI 프롬프트를 여러 모델로 시험해 보고 싶다면, 채팅용 모델을 비교할 수도 있습니다. 이는 DeepSeek V4.1 Flash 전용 사양 페이지가 아니라, 채팅 모델 전체 목록입니다. 비교 환경에서 텍스트가 반환되더라도, DSH에서 GenUI가 그려지는 것은 별도로 확인해야 합니다.
원래 X의 댓글에는 토큰에 관한 질문도 있었습니다. 리부카이(李不凱) 씨는 비코딩 용도의 경우 출력 토큰이 일반적으로 그렇게 높지 않다고 답변했습니다. 이는 게시자의 설명이며, 이번 대조 측정과는 다릅니다.
이번에 확인된 것은 로컬에서의 정렬, 필터링, 슬라이더 조작으로 모델을 재호출하지 않았다는 점입니다. 최초 생성과 action에 의한 후속 이벤트는 별도로 기록해야 합니다. “로컬 우선(Local First)”을 “항상 토큰 절감”으로 오해해서는 안 됩니다.
답변의 후반부에는 계산 필드, 퀴즈, 고급 비주얼도 있었습니다. 계산 카드는 임의의 JavaScript가 아닌 화이트리스트화된 수식을 사용합니다. 퀴즈는 로컬에서 채점이 가능하며, 스크린샷의 0/2는 미응답 상태입니다.
3D 장면은 드래그를 통한 회전과 휠을 통한 확대/축소에 대응하며, 아래에는 분리되어 그려진 SVG 그래프가 있었습니다. 다만, 일상적인 용도로 처음 시도한다면 테이블, 그래프, 슬라이더만으로 충분합니다.
마지막 부분에는 오프라인 지도, 이미지 라이트박스, 음성/비디오 플레이어, 수평 캐러셀 등도 나열되어 있었지만, 개별적으로 열어보지는 않았습니다. 따라서, 나열된 기능과 실제로 조작하여 확인한 기능을 구분했습니다.
능력 카드에는 60+ 컴포넌트로 표시되었으나, 현재 공식 README에서는 30+ 컴포넌트 분류가 사용되고 있습니다. 버전이나 집계 방식이 다를 가능성이 있어 저는 개수를 독립적으로 세지 않았습니다. 이 차이만으로는 업그레이드나 다운그레이드를 판단하지 않습니다.
도입 후 확인한 것은, 정렬 가능한 테이블 1개, 파라미터 2개의 함수 플롯, action 버튼, /panel입니다.
순서대로 진행하면 문제의 원인을 분리하기 쉬워집니다. 화이트리스트와 분리 렌더링(separation drawing)이 적용되어 있어도, 서드파티 코드(third-party code), 호스트 호환성(host compatibility), 권한 확인은 필요합니다. 데모 양식에 비밀번호, API 키 및 기타 기밀 정보를 입력하지 마십시오.
GenUI는 답변의 정확성을 보장하는 것이 아닙니다. 유용한 것은 답변을 받은 후의 정렬(sorting), 필터링(filtering), 파라미터 탐색(parameter exploration), 다음 작업 선택입니다. 자신이 모델에 여러 번 다시 보내는 작은 변경 사항을 찾아 거기서부터 시도하는 것이 도입 판단의 지름길입니다.
