400개에서 46개만 골랐습니다

고른 이유 막대가 W/M/Y 범위에 따라 평균선과 함께 모양을 바꿉니다. 모핑은 유지하고 KPI 카드 머리글은 뺍니다.

고칠 것 빨강과 파랑을 서로 바꿉니다. 마지막 막대는 단색 강조로 합니다. 만/억 단위와 한국어 라벨을 씁니다. touch-action:pan-y를 적용합니다. 0과 음수 값을 처리합니다. 너비는 100%로 합니다.

고른 이유 워터폴 브리지는 실적이나 주가 변화를 단계별로 설명합니다. 값의 크기는 데이터에서 맞추고, 빨강과 파랑으로 표시합니다.

고칠 것 값을 차트 높이에 맞게 조정합니다. 증가와 감소를 빨강·파랑으로 바꿉니다. 단계는 데이터로 만듭니다. 라벨이 줄바꿈되도록 허용합니다.

고른 이유 값과 순위를 전환하는 기울기 차트입니다. 두 기간의 순위 변화를 가장 명확하게 보여주며, 막대 경주 차트를 대체합니다.

고칠 것 상승 빨강·하락 파랑으로 바꿉니다. 반응형으로 만듭니다. 이름은 textContent로 넣습니다. 선에 키보드 포커스를 추가합니다. 실제 순위를 씁니다.

고른 이유 분포를 보며 범위를 고르는 필터입니다. 히스토그램으로 값이 몰린 구간을 먼저 보여준 뒤 범위를 자릅니다. 구간은 실제 데이터에서 만들고, KRW 단위를 씁니다.

고칠 것 구간은 실제 값에서 만듭니다. 청록색은 디자인 토큰으로 씁니다. KRW 단위를 씁니다. 숫자 굴림 카운터를 더 넓게 합니다. 디바운스된 라이브 영역을 씁니다. Home/End 키를 지원합니다.

고른 이유 스크럽 지점을 기준으로 선이 이전과 이후 색으로 나뉩니다. 특정 날짜 이후의 수익률을 바로 보여줍니다. 상승 빨강·하락 파랑입니다.

고칠 것 --c 값을 상승 빨강·하락 파랑으로 바꿉니다. 너비는 유동적으로 합니다. 실제 시리즈와 라벨을 씁니다. 그라데이션 칩은 제거합니다. 날짜 라벨은 한국어로 씁니다.

고른 이유 실시간 가격에서 바뀐 자릿수만 굴러가는 카운터입니다. 숫자 부분만 가져오고, 타일 행과 그라데이션 영역은 뺍니다.

고칠 것 상승·하락 색은 상승 빨강·하락 파랑 관례에 맞춥니다. 실제 시리즈를 씁니다. 한국어 단위를 씁니다. 스파크라인은 유동적으로 합니다. 일시정지되면 타이머를 멈춥니다.

고른 이유 하루 전체에서 사건 구간으로 확대합니다. 급변 움직임, 지수 이벤트, 사고 회고에 씁니다.

고칠 것 너비는 유동적으로 합니다. 시리즈, 이벤트, 사고 구간을 데이터로 연결합니다. 눈금과 묶음은 데이터에서 계산합니다. 색은 토큰으로 씁니다. 문구는 한국어로 합니다.

고른 이유 스크리너 행 위에서 여러 축에 걸쳐 브러시 선택을 합니다. 선 호버와 고정 기능을 추가하고, 단일 중립 팔레트를 씁니다.

고칠 것 실제 스크리너 행을 연결합니다. 축마다 범위를 자동으로 잡습니다. 축 간격은 유동적으로 합니다. 선 호버 또는 고정을 씁니다. 슬라이더 ARIA를 고칩니다. 빨강이 아닌 팔레트를 씁니다.

고른 이유 쌓인 시리즈(KOSPI, USD/KRW, 금리) 전체에 걸쳐 동기화된 크로스헤어입니다. 일간 시장 보드의 핵심입니다.

고칠 것 실제 시리즈(KOSPI, USD/KRW, 금리)를 연결합니다. 변화량은 상승 빨강·하락 파랑으로 표시합니다. 인디고색은 뺍니다. 너비는 유동적으로 합니다. 라벨은 12px입니다.

고른 이유 같은 버블이 섹터, 국가 또는 손익 기준으로 다시 묶입니다. 한 페이지에는 대표 움직임을 하나만 둡니다.

고칠 것 데이터 기반으로 그룹과 중심을 정합니다. 크기는 유동적으로 합니다. 키보드용 목록 대체 화면을 둡니다. 탭하면 고정되는 툴팁을 씁니다. 모드마다 범례를 둡니다. 단위는 억과 조를 씁니다.

고른 이유 이전과 이후를 비교하는 슬라이더입니다. 그때와 지금의 장소, 차트 버전, 디자인 시안을 비교할 때 씁니다.

고칠 것 SVG 장면을 실제 사진 두 장으로 바꿉니다. 너비는 100%로 하고 aspect-ratio를 적용합니다. 한국어 라벨을 씁니다. pointerdown이 아니라 탭을 뗄 때 이동합니다.

고른 이유 주장마다 출처 배지를 붙여 브리핑을 추적할 수 있게 합니다. 채팅 말풍선은 빼고, 출처에 연결된 인라인 인용은 유지합니다.

고칠 것 채팅 말풍선은 뺍니다. 주장과 출처의 연결은 유지합니다. 흐름형 레이아웃을 씁니다. 탭하면 미리보기가 토글됩니다. 실제 출처를 씁니다. 글자는 11px 이상으로 합니다.

고른 이유 목차 표시가 현재 보이는 장 전체를 덮습니다. 페이지 스크롤에 맞춰 다시 그리며, 휴대폰용 칩 막대 변형을 추가합니다.

고칠 것 IntersectionObserver로 페이지 스크롤 방식으로 바꿉니다. 휴대폰용 칩 막대 변형을 씁니다. 크기가 바뀌면 다시 그립니다. 실제 제목을 씁니다.

고른 이유 핵심 단어에 손그림 표시를 합니다. 승인된 노란 하이라이트와 비슷한 편집용 강조입니다. 줄바꿈된 단어는 고쳐야 합니다.

고칠 것 단어마다 모든 client rect에 표시합니다. ResizeObserver로 다시 그립니다. 단어별 스타일을 씁니다. 빨강이 아닌 토큰 색을 씁니다. 스크롤로 화면에 들어올 때 그립니다.

고른 이유 점을 끌면 적합선과 신뢰 띠가 함께 움직입니다. 회귀나 베타를 가르칠 때 씁니다. t 기반 띠를 씁니다.

고칠 것 반응형 viewBox를 씁니다. 인디고가 아닌 중립 잉크색을 씁니다. 축은 데이터에서 만듭니다. t 기반 띠를 씁니다. 눈금은 11px입니다. 라벨은 한국어로 합니다.

고른 이유 바뀐 칸만 뒤집히는 단위 차트입니다. 인구 100명당 비율을 보여줍니다.

고칠 것 레이아웃은 반응형 격자로 다시 만듭니다. 범례 열을 넓힙니다. 100칸에 최대 잉여법 반올림을 적용합니다. 팔레트는 따로 씁니다. 문구는 한국어로 합니다.

고른 이유 피라미드에서 한 출생 코호트를 수십 년에 걸쳐 따라갑니다. 실제 KOSIS 데이터와 이름 붙은 출생 코호트를 씁니다.

고칠 것 실제 KOSIS 데이터를 연결합니다. 한국어 라벨과 1958년 코호트 메모를 씁니다. 글자를 키웁니다. 탭 툴팁을 씁니다. 백분율 기하를 씁니다.

고른 이유 월별 분포를 여러 해에 걸쳐 쌓은 릿지라인입니다. 밀도는 실제 값에 KDE를 적용해서만 나타내며, 임의로 만들지 않습니다.

고칠 것 dens()를 실제 일별 값에 대한 KDE로 바꿉니다. 월 라벨은 한국어로 씁니다. 탭해서 선택하게 합니다. 반응형 viewBox를 씁니다. SVG 글자는 12px입니다.

고른 이유 Gapminder식 시간 탐색과 궤적 표시입니다. 실제 시리즈로 여러 해 동안의 호황과 불황을 보여줍니다.

고칠 것 touch-action:pan-y를 씁니다. 크기는 컨테이너에서 맞춥니다. 팔레트는 따로 씁니다. 최소 글자는 11px입니다. 설정 객체로 실제 시리즈와 축을 연결합니다. 문구는 한국어로 합니다.

고른 이유 단위가 다른 옵션을 정규화해 비교하는 레일입니다. 카드가 아닌 차분한 구조입니다.

고칠 것 clamp와 줄바꿈을 추가합니다. 라벨은 이스케이프 처리합니다. N개 시리즈를 허용합니다. 시리즈 색은 토큰으로 씁니다. 단위는 한국어로 씁니다.

고른 이유 차이만 보기 토글은 같은 행을 접습니다. N개 열로 일반화할 수 있으며, 숙소 비교에도 맞습니다.

고칠 것 N개 열로 일반화합니다. 실제 표 역할을 씁니다. 탭하면 강조합니다. 최소 글자는 12px입니다. 차이만 보기 기능과 0fr 접힘은 유지합니다.

고른 이유 스포트라이트가 실제 화면의 영역 사이를 미끄러지듯 이동합니다. 제품 스크린샷에 단계별로 주석을 달 때 가장 좋습니다.

고칠 것 루트 크기를 다시 측정합니다. 크기 변경과 포커스 처리를 추가합니다. 금색은 토큰으로 바꿉니다. 주석이 달린 실제 화면에 씁니다.

고른 이유 데스크톱용 마스터-디테일 패널입니다. J/K 키로 이동합니다. 휴대폰 쪽 짝은 336번입니다.

고칠 것 너비는 유동적으로 합니다. 휴대폰에서는 바텀 시트를 씁니다. 목록은 스크롤되게 합니다. 닫힌 패널은 inert 처리합니다. 빠른 탐색 입력을 대기열에 넣습니다. 글자는 최소 11px입니다. 필드는 직접 정합니다.

고른 이유 돋보기가 밀집한 스크린샷, 지도, 차트를 확대합니다. 휴대폰에서는 누르고 있기 경로가 필요합니다.

고칠 것 돋보기 복제 엔진만 남깁니다. 시계 아트와 시계는 뺍니다. touch-action:pan-y를 씁니다. 돋보기 위치를 오프셋합니다. 키보드 확대 토글을 씁니다. 배경은 중립색입니다.

고른 이유 하나의 스크러버로 모든 시간대를 공통 UTC 축에서 움직입니다. 여행 중 통화 시간과 KRX/NYSE 세션의 겹침을 볼 수 있습니다.

고칠 것 행을 하나의 UTC 축에 맞춰 겹침이 보이게 합니다. 실제 세션 시간(KRX 09:00-15:30)을 씁니다. DST 날짜를 씁니다. 30분 단위 시간대를 씁니다. 한국어로 합니다.

고른 이유 강풍만 거르는 풍향 장미입니다. 해변과 여객선을 위해 계절별 제주 바람을 실제 KMA 데이터로 보여줍니다.

고칠 것 dirs/all/strong 값은 실제 개수로 바꿉니다. 최댓값 기준으로 크기를 맞춥니다. 한국어 라벨과 상태를 씁니다. SVG 단위로 위치를 잡습니다. 바뀐 부채꼴만 애니메이션합니다.

고른 이유 카드를 던져 여행 후보지를 저장하거나 넘깁니다. 카드 선택 게임 메커니즘으로도 쓸 수 있습니다.

고칠 것 touch-action:pan-y를 씁니다. 넘친 부분은 잘라냅니다. textContent를 씁니다. 도장 표시는 토큰 색을 씁니다. 그라데이션 덩어리 대신 실제 사진을 씁니다. onDecision 콜백을 둡니다. 태그는 줄바꿈합니다.

고른 이유 여행용 날씨 스크럽입니다. 한 줄의 띠를 움직이면 하루 동안의 예보가 바뀝니다.

고칠 것 띠에서 pan-y를 씁니다. 너비는 유동적으로, 호는 viewBox에 맞춰 조정합니다. cond/temp 값은 예보 배열과 일출·일몰 값으로 바꿉니다. 한국어 라벨을 씁니다. 글자 그림자를 더 진하게 합니다.

고른 이유 격자에서 목록으로 바뀔 때 모든 항목이 제자리를 지킵니다. 장소 카드와 보유 종목 행에 씁니다. 실제 사진이 필요합니다.

고칠 것 너비는 100%입니다. 실제 썸네일을 씁니다. 목록에는 overflow-y:auto를 씁니다. 보기 선택을 저장합니다. 장소 카드나 보유 종목 행에 씁니다.

고른 이유 지도 위의 세 단계 시트는 휴대폰 여행 레이아웃입니다. 드래그 전환이 있는 내부 스크롤을 추가합니다.

고칠 것 드래그 전환이 있는 내부 스크롤을 추가합니다. 단계 높이는 컨테이너에서 계산합니다. 실제 지도를 씁니다. 실시간 reduced-motion 리스너를 씁니다. 손잡이를 더 크게 합니다.

고른 이유 뒤집힌 드롭입니다. 한라산 같은 실제 고도로 채운 등고선 질감이며, 의미 있는 유일한 배경입니다. 정적 렌더입니다.

고칠 것 건너뜁니다. 장식용이며 가짜 데이터이고 베이지색 종이 질감입니다. 실제 고도 격자를 넣은 등고선 코드로만 재사용할 수 있습니다.

고른 이유 스크롤에 따라 경로가 그려지고 경유지가 나타납니다. 대표적인 일정 부분입니다. 페이지 스크롤을 쓰고, 좌표는 실제 일정에서 가져옵니다.

고칠 것 중첩 스크롤러 대신 페이지 스크롤을 씁니다. 일정에서 점을 만듭니다. 전체 경로를 보여주는 정적 상태를 reduced-motion용으로 추가합니다. 문구는 한국어로 씁니다.

고른 이유 날짜에 따라 스크럽하는 한국 육각 타일 지도입니다. 개화 전선, 단풍 또는 지역별 시계열 데이터를 보여줍니다.

고칠 것 C 값을 상승 빨강·하락 파랑 척도에 매핑합니다. 실제 지역 데이터를 씁니다. 탭해서 확인하는 타일은 포커스를 받게 합니다. rAF는 재생 중에만 씁니다. 글자는 11px 이상입니다.

고른 이유 뒤집힌 드롭입니다. 게임판, 큰 지도, 긴 타임라인의 공간 개요를 보는 유일한 기본 요소입니다. 작은 재작성이며, 미니맵은 아래에 둡니다.

고칠 것 흔한 30줄 패턴입니다. 넓은 타임라인이나 지도에 필요할 때만 다시 씁니다. 미니맵은 위가 아니라 아래에 둡니다.

고른 이유 드래그로 칠하는 픽셀 격자입니다. 범용 페인트 보드와 추적 격자로 씁니다.

고칠 것 드래그 칠하기 격자 기본 요소로 씁니다. 행과 열 매개변수, 로빙 tabindex 방향키, change 이벤트, 실행 취소와 내보내기를 씁니다. 아이콘 틀은 뺍니다.

고른 이유 뒤집힌 드롭입니다. 색으로 구분된 사건 테이프를 탐색합니다. stateAt(t)를 기반으로 한 게임 재생과 시장 거래일 재생입니다.

고칠 것 없음. 시장 거래일이나 게임 재생을 만들 때만 순수 stateAt(t)와 탐색 가능한 테이프 패턴을 복사합니다.

고른 이유 탭해서 핀을 놓으며, 가중 바운스와 물결 효과가 있습니다. 게임 개념에서 유닛 배치나 위치 표시에 씁니다.

고칠 것 드롭과 뽑기 애니메이션을 유지합니다. 우리 자체 SVG 지도를 씁니다. 위치는 백분율로 합니다. 실제 지오코딩을 씁니다. 화살표 키로 미세 이동을 지원합니다. 숨겨진 카드는 inert 처리합니다. 그림자 애니메이션을 취소합니다.

고른 이유 결과가 없을 때 필터별 개수를 보여 줘서 조건을 완화할 수 있게 합니다. 스크리너와 기록 검색에서 막다른 상태를 정직하게 처리합니다.

고칠 것 개수 기반 필터 완화는 유지합니다. 신발 아트와 오타 데모는 뺍니다. 칩은 줄바꿈합니다. 문구는 한국어로 씁니다. 실제 행을 연결합니다.

고른 이유 카드를 뒤집는 카운트다운입니다. 휴식 타이머와 장 개장 카운트다운에 씁니다.

고칠 것 flip()과 카드 CSS는 유지합니다. 포모도로 장식과 가짜 세션은 뺍니다. 너비는 유동적으로 합니다. HH:MM:SS 또는 일수 카드를 씁니다. 문구는 한국어로 씁니다.

고른 이유 합계가 실시간으로 바뀌는 주간 드래그 칠하기 격자입니다. 운동 일정이나 가능 시간을 정하며, 칠하기 보드로도 씁니다.

고칠 것 칠하기 모드 토글을 추가합니다. 이때만 touch-action:none을 씁니다. 지우기 버튼과 change 이벤트를 씁니다. 요일과 시간은 설정 가능하게 합니다. 행 높이는 44px입니다. 드래그 사이 값은 보간합니다.

고른 이유 순서가 있는 도장 결재선으로 한국 결재 라인과 맞습니다. 실제 결재자 데이터와 날짜로 구동합니다.

고칠 것 날짜가 있는 실제 결재자 배열로 구동합니다. 한국어 도장 글꼴과 이름 맞춤을 씁니다. aria-live를 씁니다. 눌러서 넘기기와 초기화는 뺍니다.

고른 이유 호흡 페이서 링입니다. 운동 휴식, 쿨다운, 안내된 멈춤에 씁니다.

고칠 것 링 크기는 peak bloom에 맞춥니다. isConnected와 visibility로 멈춤을 추가합니다. aria-live 단계 문구를 씁니다. 한국어 이름을 씁니다. 초록색은 토큰으로 씁니다. 선택적 사이클 카운터를 둡니다.

고른 이유 구성요소별 30일 막대로 수집기와 작업 상태를 봅니다. 초록 배너와 상태 페이지 틀은 뺍니다.

고칠 것 유동적으로 만듭니다. 글자는 12px로 올립니다. 막대는 포커스를 받게 합니다. 실제 일별 수집기나 가동 시간 결과를 연결합니다. 초록 배너는 뺍니다.

고른 이유 편집기형 도구에서 이동을 막는 변경 감지 바입니다. 타이머 경쟁 문제를 고치고 저장 실패 경로를 추가합니다.

고칠 것 흐름형 레이아웃입니다. 일반 필드 차이 비교를 씁니다. 편집 시 타이머를 지웁니다. 경고와 정상 상태에 토큰을 씁니다. 문구는 한국어입니다. 실제 저장 콜백을 연결합니다.

고른 이유 점선 예측으로 초과 날짜를 보여줍니다. 제공자 한도, 예산, 월간 목표에 씁니다. 업그레이드 버튼은 뺍니다.

고칠 것 점선 예측과 초과 날짜 로직은 유지합니다. 업그레이드 버튼과 가짜 눈금은 뺍니다. 흐름형 레이아웃입니다. 탭하면 값을 보여줍니다. 문구는 한국어입니다.

고른 이유 정렬된 행이 새 위치로 미끄러지듯 이동합니다. 이 세트에서 유일한 FLIP 재정렬입니다.

고칠 것 DOM을 먼저 재정렬한 뒤 FLIP을 씁니다. 열은 flex로 합니다. ko 정렬 규칙을 씁니다. 상승 빨강·하락 파랑 순위 칩을 씁니다. 그라데이션 아이콘은 뺍니다. 고정 높이는 없앱니다.