문서 데이터 추출 SaaS 히어로 — 스플릿 레이아웃 비포 애프터

2026-10-08 · 이미지 2

AI 분석

중앙 정렬 히어로를 좌측 카피와 우측 문서 처리 흐름 시각화의 스플릿 히어로로 재설계한 비교안이다.

상단에는 기존의 중앙 정렬 히어로가, 하단에는 좌측 카피와 우측 비주얼 패널로 나뉜 스플릿 히어로가 화살표로 이어져 비교된다. 흰 배경에 짙은 네이비 산세리프 헤드라인과 옅은 회색 본문을 쓰고, 우측 패널은 연한 페리윙클 블루 바탕에 가는 격자를 깔아 기술적인 인상을 준다. 우측에는 인보이스 문서 카드가 점선 화살표를 거쳐 AI 모델 칩과 추출 단계 노드를 지나 필드 표·탭·검증 배지·내보내기 버튼을 갖춘 추출 데이터 패널로 이어지는 흐름이 그려진다. 제품의 처리 과정을 히어로 안에서 시각적으로 설명하는 방식과 비포 애프터 재설계 사례로 참고하기 좋다.

light-mode · minimal · corporate · techy

ai-tool badge before-after button card hero landing light-mode navbar saas split-screen tabs ux-flow

claude-opus-5-5 · 2026-10-16 07:53 · 신뢰도 0.92

Sumeet A.

@designer_sda · 팔로워 31

작가 페이지 X

원본 트윗

Hero Redesign concept #2 Came across Formalini on Product Hunt and ended up redesigning its hero. The original copy explained what the product does, but it pushed the actual document-processing experience too far down the page. So I reworked the hero around a split layout, with a visual flow showing how documents become structured, usable data. Also explored a more technical, grid-based visual direction while keeping the existing brand identity. Here's the before and after ↓

좋아요 1 · 리트윗 1

x.com/designer_sda/status/2108174139970429393