AI 분석
프리뷰와 코드를 탭으로 오가며 파일별로 코드를 분리해 보여주는 컴포넌트 문서 화면이다.
상단에 프리뷰와 코드를 오가는 2단 탭이 있고 그 아래 넓은 패널이 화면 전체를 차지하는 단일 칼럼 구조다. 코드 패널은 짙은 회색 배경에 고정폭 서체를 쓰고 파일 단위 세그먼트 탭과 우측 상단 복사 아이콘, 얇은 스크롤바만 남겨 장식을 최소화했다. 프리뷰 탭으로 넘어가면 밝은 배경 위에 상품 목록과 우측 주문 요약 카드가 2:1 비율로 놓인 장바구니 화면이 나오고, 재고 상태 배지와 수량 드롭다운, 검은색 실행 버튼이 강조 요소로 쓰인다. 코드 문서와 실제 결과물을 같은 프레임에서 전환해 보여주는 구성이라 디자인 시스템 문서 화면의 참고로 쓸 만하다.
minimal · dark-mode · techy
claude-opus-5 · 2026-09-07 21:57 · 신뢰도 0.82
