이 예시에서는 가상의 키워드 여섯 개를 선택한 측정항목 하나로 비교합니다. 결과 위쪽에는 필터, 추적 중인 항목만 표시하는 옵션, 측정항목 버튼이 있습니다. 별도의 상세 정보 패널에는 선택한 검색어의 두 측정항목이 모두 표시되어, 순위 보기와 실제 값을 함께 비교할 수 있습니다.
작성된 데이터와 측정된 데이터를 구분하세요
모든 숫자는 고정된 테스트 데이터에 포함된 값이며, 예시임을 명시합니다. 검색량이나 난이도를 현재 Semrush 측정값으로 보여주지 않습니다. 막대는 네트워크 요청, 분석 계정 또는 다운로드한 고객 데이터셋을 기반으로 하지 않습니다.
Semrush Intergalactic 디자인 시스템 테마 및 토큰 생성
현재 테마 패키지를 목적에 맞게 사용하세요
런타임에서 @semcore/ui 17.6.0과 @semcore/theme 2.3.1을 고정해 사용합니다. 기본 컴포넌트에는 현재 테마 패키지가 필요하며, 진입점에서 light.css를 가져옵니다. 표에는 관련 없는 이전 HEX 기본값으로 대체하지 않고 해당 스타일시트의 OKLCH 값을 그대로 유지합니다.
컴포넌트 역할과 차트 역할을 분리하세요
기본 컨트롤의 모양은 인터갤럭틱 스타일링을 따르며, 독자적인 막대 비교에는 차트 팔레트의 첫 번째 계열 역할을 사용합니다. 선택 상태는 절제된 행 배경과 눌림 상태로 표현합니다. 계열 색상을 모든 액션이나 오류 색상에 무분별하게 재사용해서는 안 됩니다.
Semrush Intergalactic 디자인 시스템 조밀한 결과를 위한 타이포그래피
레이블, 단위, 값을 함께 표시하세요
각 막대 행에는 검색어와 숫자 값이 텍스트로 표시됩니다. 작은 축 설명에는 축척이 예시 검색 횟수인지 100점 만점 점수인지 명시합니다. 상세 정보 패널에도 두 단위를 모두 표시해, 막대 길이가 비슷하다는 이유로 측정항목을 서로 바꿔 쓸 수 있다고 오해하지 않도록 합니다.
맥락을 숨기지 않으면서 간결한 텍스트를 사용하세요
기본 입력란은 필터를 편하게 조작할 수 있도록 큰 크기를 사용합니다. 결과 레이블은 간결하게 유지하고, 워크스페이스 제목과 섹션 제목은 더 크게 표시합니다. 화면이 좁으면 검색어를 잘려서 읽기 어려운 조각으로 표시하는 대신 막대와 값 위로 옮깁니다.
Semrush Intergalactic 디자인 시스템 차트 축척 및 정렬
필터링 중에도 축척을 고정하세요
검색량 차트의 최댓값은 항상 8,100이고 난이도 차트의 최댓값은 100입니다. 필터링해도 남은 항목 중 가장 긴 막대가 전체 너비를 차지하도록 축척을 늘리지 않습니다. 이 설계는 사용자가 항목 범위를 좁혀도 비교 기준을 유지합니다.
현재 측정항목을 기준으로 정렬하세요
Semrush Intergalactic 디자인 시스템 기본 입력란 및 체크박스
복합 입력란 구조를 사용하세요
Input은 바깥쪽 컴포넌트를 제공하고, Input.Value는 실제로 편집할 수 있는 컨트롤을 제공합니다. onChange 콜백에서 문자열 값이 첫 번째 인수로 전달되므로 표준 DOM 변경 이벤트와 다르게 처리해야 합니다. 표시되는 레이블은 Value의 id를 가리킵니다.
불리언 필터와 텍스트 필터를 분리하세요
기본 Checkbox의 onChange에는 체크 여부를 나타내는 불리언 값이 전달됩니다. 행을 만들 때 텍스트 필터와 추적 중인 항목만 표시하는 상태를 함께 적용하므로, 어느 쪽이든 결과가 비어 있을 수 있습니다. 필터를 초기화하면 두 컨트롤이 모두 복원되지만 상세 정보 패널의 선택 항목은 유지됩니다.
Semrush Intergalactic 디자인 시스템 선택 항목 상세 정보 및 빈 상태
선택 항목을 정체성에 연결해 유지
선택한 검색어는 배열 순서와 별도로 저장됩니다. 막대를 클릭하면 해당 검색어와 눌림 상태가 업데이트되고, 상세 정보 패널에서는 전체 테스트 레코드를 조회합니다. 다른 측정항목으로 정렬해도 상세 정보 패널이 다른 행 인덱스를 가리키는 일은 없습니다.
필터 바깥에 있는 선택 항목도 유지되는 이유를 설명하세요
선택한 검색어가 더는 보이지 않아도 설명 문구와 함께 상세 정보 패널을 유지합니다. 필터링 전후의 항목을 비교할 때 유용합니다. 결과가 없으면 차트 패널을 비워 두는 대신 명시적인 초기화 동작을 제공합니다.
Semrush Intergalactic 디자인 시스템 접근성 높은 데이터 비교
색상 없이도 차트를 이해할 수 있게 하세요
막대는 실제 버튼 안에 표시되는 장식용 요소입니다. 용어와 값이 접근 가능한 텍스트를 구성하고, aria-pressed가 선택 상태를 나타냅니다. 막대 길이나 계열 색상을 볼 수 없어도 데이터를 이해할 수 있습니다. 키보드 포커스는 선택된 행의 스타일과 시각적으로 구분됩니다.
Difficulty를 선택하고 막대 순서와 점수 단위를 확인하세요.
일치하는 항목이 없도록 필터링한 다음 Reset filters를 사용하세요.
용어를 선택하고, 필터로 해당 항목을 제외한 뒤 선택 상태가 유지된다는 설명을 확인하세요.
필터 복구 경로 테스트
기본 입력과 체크박스는 실제 컨트롤을 그대로 노출합니다. 측정 항목 전환에는 눌림 상태를 표시하는 버튼을 사용하며, 기존 초기화 작업은 두 필터를 모두 지웁니다. 결과 제목과 단위 안내를 계속 표시하므로 결과가 있거나 없을 때 모두 같은 맥락을 제공합니다.
Semrush Intergalactic 디자인 시스템 컴포넌트 가져오기 및 테마 설정
컴포넌트 진입점 가져오기
@semcore/ui 루트는 모든 컴포넌트를 내보내는 대신 의도적으로 오류를 발생시킵니다. 이 소스는 전용 진입점에서 button, input, checkbox를 가져오고 @semcore/theme/light.css를 가져옵니다. 전체 진입점에는 fixture와 모든 파생 로직이 포함되어 있습니다.
전용 @semcore/ui/button, input 및 checkbox 가져오기.
고정된 @semcore/theme/light.css.
전체 JSX에 포함된 기존 고정 척도 막대 및 fixture 로직.
사용자 지정 막대를 기본 D3 차트로 표시하지 마세요
Semrush Intergalactic 디자인 시스템 컴포넌트 예제
main.jsx — 완전히 작동하는 예제
가상의 키워드 집합을 비교합니다. 아래 소스는 상태와 유효성 검사 로직을 모두 포함한 전체 React 진입점입니다.
jsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import Button from "@semcore/ui/button";
import Input from "@semcore/ui/input";
import Checkbox from "@semcore/ui/checkbox";
import "@semcore/theme/light.css";
import "./intergalactic.css";
const data = [
{ term: "design tokens", volume: 8100, difficulty: 42, tracked: true },
{ term: "component library", volume: 6600, difficulty: 58, tracked: false },
{ term: "accessible forms", volume: 2900, difficulty: 31, tracked: true },
{
term: "responsive typography",
volume: 1900,
difficulty: 24,
tracked: false,
},
{ term: "semantic colors", volume: 1300, difficulty: 18, tracked: false },
{ term: "design system audit", volume: 720, difficulty: 36, tracked: true },
];
function App() {
const [q, setQ] = useState(""),
[tracked, setTracked] = useState(false),
[metric, setMetric] = useState("volume"),
[selected, setSelected] = useState("design tokens");
const rows = data
.filter((d) => d.term.includes(q.toLowerCase()) && (!tracked || d.tracked))
.sort((a, b) => b[metric] - a[metric]);
const max = metric === "volume" ? 8100 : 100;
const item = data.find((d) => d.term === selected);
return (
<main className="research">
<header>
<p>RESEARCH WORKSPACE / FICTIONAL DATA</p>
<h1>Compare a keyword set</h1>
<span>
Six authored sample records · figures are illustrative, not Semrush
measurements
</span>
</header>
<div className="research-toolbar">
<div className="research-search">
<label htmlFor="term-search">Filter keywords</label>
<Input size="l">
<Input.Value
id="term-search"
placeholder="Find a sample term"
value={q}
onChange={setQ}
/>
</Input>
</div>
<Checkbox
label="Tracked only"
checked={tracked}
onChange={setTracked}
/>
<div
className="metric-options"
role="group"
aria-label="Comparison metric"
>
<Button
use={metric === "volume" ? "primary" : "secondary"}
aria-pressed={metric === "volume"}
onClick={() => setMetric("volume")}
>
Volume
</Button>
<Button
use={metric === "difficulty" ? "primary" : "secondary"}
aria-pressed={metric === "difficulty"}
onClick={() => setMetric("difficulty")}
>
Difficulty
</Button>
</div>
</div>
<div className="research-grid">
<section className="chart-panel">
<div className="chart-heading">
<h2>
{metric === "volume"
? "Illustrative monthly volume"
: "Illustrative difficulty score"}
</h2>
<span>{rows.length} terms</span>
</div>
<p className="axis-note">
{metric === "volume"
? "Fixed scale: 0–8,100 sample searches"
: "Fixed scale: 0–100 sample score"}
</p>
{rows.length ? (
<div className="bars">
{rows.map((r) => (
<button
className={
"bar-row " + (r.term === selected ? "selected" : "")
}
key={r.term}
onClick={() => setSelected(r.term)}
aria-pressed={r.term === selected}
>
<span className="bar-name">{r.term}</span>
<span className="bar-track" aria-hidden="true">
<i style={{ width: (r[metric] / max) * 100 + "%" }} />
</span>
<strong>{r[metric].toLocaleString("en-US")}</strong>
</button>
))}
</div>
) : (
<div className="no-results">
<h3>No matching terms</h3>
<p>
Clear the text and tracked filter to restore the full
comparison.
</p>
<Button
onClick={() => {
setQ("");
setTracked(false);
}}
>
Reset filters
</Button>
</div>
)}
<p className="chart-note">
Values are written beside every bar. Click a term to inspect both
metrics.
</p>
</section>
<aside>
<h2>{item.term}</h2>
<dl>
<dt>Sample volume</dt>
<dd>{item.volume.toLocaleString("en-US")}</dd>
<dt>Sample difficulty</dt>
<dd>{item.difficulty} / 100</dd>
<dt>Tracking</dt>
<dd>{item.tracked ? "Tracked" : "Not tracked"}</dd>
</dl>
<div className="inspector-note">
<h3>Comparison context</h3>
<p>
The bar scale stays fixed when filters change. Difficulty and
volume have separate units and are not added together.
</p>
</div>
{!rows.some((r) => r.term === selected) && (
<p className="retained">
Selected term is outside the current filter; details are retained.
</p>
)}
</aside>
</div>
<footer>
Native Intergalactic Input, Checkbox and Button from @semcore/ui 17.6.0.
Original accessible HTML bar comparison; no analytics service request.
</footer>
</main>
);
}
createRoot(document.getElementById("root")).render(<App />);
기본 Intergalactic 컨트롤, 전용 가져오기, 최신 테마 토큰을 사용해 간결한 분석 비교 화면을 구성하세요. 단위, 고정 척도, 정렬, 선택 항목의 식별 정보를 일관되게 유지하세요. 텍스트 값과 빈 상태에서 복구할 방법을 제공하세요. 측정된 Semrush 데이터라고 주장하지 말고, fixture 측정값과 직접 작성한 차트 코드를 명확히 표시하세요.
05
Semrush Intergalactic 디자인 시스템 출처 및 범위
OpenDesign 애플리케이션 가이드. 키워드 레코드 6개와 모든 측정값은 가상 데이터입니다. 기본 Intergalactic 컨트롤로 직접 만든 HTML 차트를 구성했습니다. Semrush 보고서도 기본 D3 차트 구현도 아닙니다.
