Bold and surprising: the headline is typeset inside the chart. The first screen is a full-width diverging chart on a white field. The clause '반도체는 올랐지만' is set as large text sitting on and extending along the SMCI/NVDA/SOX bars to the right of the zero line. The clause '코어위브는 못 올랐다' is set along the CRWV/ORCL bars to the left, so the sentence reads as a split across the axis. Directly beneath are the lead paragraph and the 07:59→11:05 provenance line. The three sections then run as a plain, full-width single-column article. The figure for each section sits inline at the top of its section, wide, with the prose in a 40rem column below it. Scrolling past the first screen collapses the big chart into a compact sticky strip that keeps tracking the active sentence.
헤드라인 글자가 막대 위에 그대로 얹혀 '반도체는 올랐지만 코어위브는 못 올랐다'를 차트로 읽게 하는 가장 독창적인 구성이고 모닝 브리프와도 확실히 다르지만, 거대한 헤드라인과 흰 배경이라 사이트의 슬레이트·카드 시스템에서는 조금 벗어납니다.
강점
헤드라인 문장이 0% 축을 기준으로 좌우로 갈라져 '올랐지만 / 못 올랐다'라는 내용을 구조로 보여 준다.
첫 화면 막대는 완전 채도, 이후 차트는 70% 톤으로 낮춰 강약을 조절했다.
본문 수치에 모노 폰트와 상승·하락 색을 입혀 스캔하기 쉽고 사이트 체계와도 맞는다.
07:59→11:05 타임라인 한 줄이 모닝 브리프와의 후속 관계를 간결히 알린다.
고칠 점
'AI 수요 증거에'가 차트 밖에 떨어져 있어 헤드라인이 한 문장으로 읽히지 않는다. 문장 전체를 차트 안에 넣거나 첫 줄을 막대 위 라벨로 통합해야 한다.
글자가 막대 경계에서 반으로 잘려 '지', '는', '랐', '다'가 읽기 어렵다. 막대 길이와 글자 폭을 맞추거나, 경계에서 색 반전 대신 글자를 한쪽 막대 안에 완전히 두도록 조정해야 한다.
모바일에서 헤드라인 크기가 데스크톱보다 훨씬 작고 막대와 어긋나, 핵심 컨셉이 약해지고 '다'가 빨강 위에서 묻힌다.
종목 라벨과 값이 약 10~11px로 너무 작고, 라벨 위치가 막대 아래, 안, 옆으로 일관되지 않다.
점수 (0~10)
목적 적합6
위계6
완성도5
한글 조판6
독창성8
2
c1 · Zero Line
새 시안 · 디자인 시스템 modern · 평균 5.8 ·
Sticky-figure scrollytelling. On desktop, a 5/7 split: a narrow 36rem prose column on the left and one pinned figure panel on the right. The first screen holds a moderate left-aligned answer headline, the lead with SMCI +9.55% / CRWV -0.50% / 1,081bp / 13.27%p as inline mono figures, and the diverging zero-axis bars already visible on the right. The bars are the hero image, so there is no decorative hero. A hairline progress rail runs down the far left edge. On phones the figure docks as a 38vh sticky panel under a slim header, the prose scrolls beneath it, and a safe-area bar at the bottom shows 1/2/3 section dots.
본문 옆에 FIG 카드를 나란히 두고 문장 밑줄과 차트를 연결한 구도가 사이트의 슬레이트·흰 카드·블루 톤에 잘 맞고 읽기 쉽지만, 오른쪽 카드 사이 빈 공간과 모바일 겹침이 아쉽습니다.
강점
답을 먼저 말하는 헤드라인과 리드 속 모노 수치 강조로 핵심이 3초 안에 전달된다.
0 기준선 발산형 막대로 칩 제조사 상승과 차입 기업 하락의 대비가 즉시 보인다.
파랑 강조는 활성 문장 밑줄에만 쓰고 상승/하락 색은 막대와 수치에만 한정해 규칙이 명확하다.
섹션 번호와 소제목, 본문의 한글 가독성이 안정적이다. 모닝 브리프와 시각적으로 확실히 구분된다.
고칠 점
모바일에서 FIG 1이 도크와 본문 중간에 중복 노출되고 반투명 상태로 글자 위에 겹쳐 가독성이 무너진다. 도크 교체 시 이전 패널을 완전히 숨기거나 본문에 z-index와 배경을 확실히 적용해야 한다.
데스크톱에서 FIG 2가 고정되지 않고 FIG 1 아래로 흘러 5/7 스티키 구조가 보이지 않는다. 하나의 패널 안에서 차트가 교체되게 하거나 확실히 sticky로 고정해야 한다.
FIG 1과 FIG 2 카드 사이 및 카드 내부 여백이 과해 막대 간격이 벌어지고 차트가 헐겁다. 행 높이와 패널 높이를 맞춰야 한다.
30년물 행이 흐릿한 채 남아 있어 비활성인지 오류인지 구분되지 않는다. 활성 문장과의 연결을 라벨로 보여주거나 흐림 정도를 줄여야 한다.
점수 (0~10)
목적 적합6
위계6
완성도4
한글 조판7
독창성6
3
c6 · Source Rail
새 시안 · 디자인 시스템 minimal · 평균 5.6 ·
A three-lane reading page. On desktop the centre lane is the prose (36rem). A figure lane on the left holds one small pinned figure. A source lane on the right lists the nine cited sources as a slim rail. The source (or two) that backs the current sentence is highlighted with its note and unit, in the manner of Our World in Data's notes, and the others recede. The first screen is the answer headline, the lead, and the source rail already visible, signalling that every claim has a citation. On phones the rail becomes a bottom sheet handle labelled '근거 3' that expands on tap, and the figure docks at the top.
본문 옆 출처 레일과 시세 스트립이 인용 출처라는 요구에 충실하고 정보 밀도도 좋지만, 모바일에서 차트와 출처 시트가 겹치고 화면이 전반적으로 흐려 보입니다.
강점
근거 레일이 첫 화면부터 보여 신뢰 구조가 명확하다.
활성 문장의 파란 밑줄과 S1 하이라이트가 연결되어 주장과 출처 관계를 보여 준다.
카드 없이 헤어라인과 여백만 써서 사이트 톤을 지키면서 아침 브리프와 구분된다.
상승·하락 색을 막대와 수치에만 제한해 절제된 색 사용이 일관된다.
고칠 점
데스크톱에서 근거 레일이 두 번 나타난다. 하나의 sticky 레일이어야 하는데 중복 렌더링으로 보이며, 차트도 위치가 어긋난다.
좌측 고정 그림이 스크롤을 따라오지 않고 섹션별로 흩어져 있어 '하나의 고정 그림' 개념이 깨지고, 큰 빈 공간이 생긴다.
모바일 바텀시트가 열린 상태에서 블러된 본문, 차트, 시트가 겹치고 아래가 비어 있어 완성도가 낮다. 핸들 라벨도 '근거 3'이 아니라 '근거 1'이다.
세 번째 섹션의 이벤트 타임라인이 보이지 않는다. 표와 국채 차트가 흐릿하게 처리되어 비활성 데이터를 읽기 어렵다.
점수 (0~10)
목적 적합6
위계5
완성도4
한글 조판7
독창성6
4
c3 · Numbered Chapters
새 시안 · 디자인 시스템 storytelling · 평균 6.8 ·
Chapter-panel story. Each of the three sections is a full-viewport panel with a flat, softly tinted field (blue-slate, cool grey, pale periwinkle, none in the up/down hues). The panel has a framed white figure on one side and a compact text block on the other, switching sides each chapter. Above each panel sit a mono chapter tag ('#01 · 10/21 장') and a mono dated line, as in the Pudding's numbered tags. The first screen is the answer headline on the slate page with the lead and a chapter list as a numbered index, not a grid of cards. Phones stack the figure frame above the text with vertical scroll-snap proximity.
번호 챕터 목차와 선택 종목 강조가 깔끔하고 사이트 톤에도 맞지만, 히어로 하단이 비고 구조가 무난해서 결과물이 평범해 보입니다.
강점
답을 먼저 말하는 헤드라인과 리드, 번호 목차가 사실 중심의 읽기 흐름을 만든다.
굵은 상단 룰과 파란 모노 번호가 있는 챕터 인덱스가 카드 그리드 대신 편집적인 목차로 읽힌다.
좌우가 번갈아 바뀌는 챕터 패널과 틴트 배경이 흰 프레임 차트를 무대처럼 돋보이게 한다.
모노 폰트로 수치와 날짜를 통일해 신뢰감 있는 데이터 톤을 만든다.
고칠 점
비활성 차트 행의 라벨, 종가, 막대가 지나치게 옅어 정지 화면에서는 대부분의 데이터가 읽히지 않는다. 대비를 올리고 강조는 굵기와 채도로 구분해야 한다.
음수 막대의 분홍 라벨이 분홍 막대 근처에서 대비가 낮고, 데스크톱에서는 강조 행(NVDA)만 진한 초록이라 시각적으로 SMCI보다 주목도가 높아 +9.55%라는 핵심 수치가 묻힌다.
데스크톱 첫 화면의 리드(왼쪽)와 목차(오른쪽) 아래 공간이 비어 있어 패널 높이를 채우는 의도가 보이지 않는다. 헤드라인이 좌측 절반에만 있어 우측 상단이 허전하다.
상단 진행 표시(회색 3칸 바 + 00/03)가 너무 연해 현재 챕터 위치를 알려주지 못한다.
점수 (0~10)
목적 적합7
위계7
완성도6
한글 조판8
독창성6
5
c4 · Sentence Ledger
새 시안 · 디자인 시스템 publication · 평균 5.8 ·
A two-column ledger. Each sentence or sentence pair is its own row, ruled by a hairline. The sentence sits on the left (about 55%) and a small evidence strip for exactly that claim sits on the right: one bar with its label for 'SMCI +9.55%', one tile for '2031 채권 수익률 15.97%', one pair for '부채비율 290% → 702%', and the 153 → 124 dollar target as a struck-through-to-new pair. The article reads like an audited statement where every claim carries its number beside it. The first screen is the answer headline above the first four ledger rows. On phones the evidence strip drops below each sentence, in line, at full width. The full diverging chart lives at the section ends as a summary.
문장마다 데이터 행을 붙이는 발상은 목적에 맞지만, 상승이 빨강이고 하락이 파랑이며 고정 헤더가 본문과 겹치는 결함이 보이고 화면이 너무 빽빽합니다.
강점
문장 왼쪽·수치 오른쪽의 장부 구조가 '모든 주장에 숫자가 붙는다'는 컨셉을 직관적으로 전달한다.
상승은 빨강, 하락은 파랑으로 국내 시장 관례를 지켰고 강조색은 파랑으로 분리해 의미 충돌을 피했다.
JetBrains Mono 탭형 숫자의 큰 수치가 열처럼 정렬되어 스캔 효율이 높다.
현재 읽는 행에 파란 좌측 룰과 옅은 워시를 주는 방식이 절제되어 있고 모션에 의미가 있다.
고칠 점
섹션 헤더(§1)가 중복 렌더링되어 S1-01 행을 덮는다. 스티키 헤더 또는 겹침 버그를 수정해야 한다.
모바일 L-03 막대 값 '1,081bp'가 오른쪽에서 잘리고 +9.55%도 경계에 붙어 있다. 값 라벨을 막대 끝이 아닌 고정 열에 두고 막대 스케일을 줄여라.
모바일에서 스티키 '리드' 헤더가 콘텐츠 중간에 끼어들어 L-03/L-04 위에 겹친다. 높이와 top 오프셋을 점검하라.
검은 굵은 섹션 룰이 모닝 브리프의 블랙 밴드 인상을 재현한다. 슬레이트 헤어라인과 블루 인덱스로 바꿔 차별화하라.
점수 (0~10)
목적 적합6
위계6
완성도4
한글 조판7
독창성6
6
c5 · Swipe Digest
새 시안 · 디자인 시스템 intercom · 평균 5.0 ·
Mobile-first horizontal story. The page is a deck of full-width chapters you swipe between, with a top progress segment bar (like stories). Chapters: 답 (headline + lead), 01 반도체 vs 차입자, 02 금리, 03 일정, 출처. Each chapter is a vertical flex: figure on top at about 45dvh, text below that scrolls inside its own pane. On desktop it becomes a three-peek filmstrip with the active chapter centred and the neighbours cropped at 30% opacity, with the sentence text under the figure. The market strip of 13 items lives in a pinned top rail, scrolling sideways, and the four movers (NVDA 221.97, SMCI 35.57, CRWV 61.82, ORCL 129.13) are a tappable row that jumps to the chapter bar.
스와이프 카드와 티커 구성은 현대적이지만, 모바일에서 종목 칩 글자가 깨지고 데스크톱에서는 옆 카드가 잘려 어수선합니다.
강점
상단 스토리형 진행 세그먼트(답/01/02/03/출처)가 현재 위치와 챕터 구조를 즉시 알려 준다.
슈퍼마이크로 +9.55% 대 코어위브 -0.50%의 발산형 막대가 한 장면에서 '반도체는 올랐지만 차입자는 못 올랐다'는 핵심을 전달한다.
본문 문장의 하이라이트(파란 배경)가 차트와 연결되는 인터랙션 의도가 명확하고, 숫자를 모노 굵게 처리해 스캔하기 쉽다.
