다크 모드 JSON Diff 도구 UI 목업

JSON API diff 및 코드 비교 도구를 위한 세련된 다크 모드 데스크톱 UI 목업을 생성합니다.

프롬프트

목표: Tilted Diffs라는 이름의 JSON diff 도구를 위한 다크 모드 데스크톱 앱 UI 목업을 생성합니다. API Response — Checkout v2라는 제목의 API 응답 비교 화면을 보여주세요. 캔버스: 16:10 와이드스크린 데스크톱 스크린샷(약 1152×768), 어두운 푸른색 그라데이션 배경 위에 떠 있는 macOS 스타일의 앱 창. 은은한 그림자, 둥근 모서리, 얇은 테두리, 세련된 개발자 도구 느낌을 사용하세요. 레이아웃: 앱은 4개의 주요 영역으로 구성됩니다: 왼쪽 사이드바 1개, 편집기 영역을 가로지르는 상단 툴바 1개, 수직 코드 편집기 창 3개. 첫 번째 편집기 창은 선택된 상태로 밝은 파란색 포커스 글로우 효과가 적용되어야 합니다. 가운데 창에는 색상이 적용된 인라인 diff 하이라이트가 표시됩니다. 가장 오른쪽 창은 좁고 일부만 보여, 추가 파일 탭이나 세 번째 비교 열처럼 보이게 하세요. 왼쪽 사이드바: 왼쪽 상단에 macOS 트래픽 라이트 버튼(빨간색, 노란색, 초록색 원 3개)을 표시하세요. 앱 이름 아래에 “Search diffs…”라는 플레이스홀더 텍스트와 키보드 힌트가 포함된 검색 필드 1개를 넣으세요. 그 아래에는 작은 문서 아이콘과 타임스탬프가 포함된 저장된 diff 목록 항목 8개를 정확히 표시하세요: 1) “API Response — Checkout v2” (선택된 항목으로 파란색 강조, “Today, 10:24 AM”), 2) “User Profile — Public API” (“Yesterday, 4:18 PM”), 3) “Orders Endpoint — v1 vs v2” (“May 20, 2025, 9:14 AM”), 4) “Product Catalog — EU Region” (“May 19, 2025, 2:47 PM”), 5) “Auth Response — SSO” (“May 18, 2025, 11:03 AM”), 6) “Billing Summary — Q2” (“May 17, 2025, 3:22 PM”), 7) “Webhook Payload — Stripe” (“May 16, 2025, 10:11 AM”), 8) “Search Results — Relevance” (“May 15, 2025, 5:35 PM”). 하단에는 눈에 띄는 파란색 “+ New Diff” 버튼 1개와 작은 톱니바퀴 아이콘 1개를 포함하세요. 상단 툴바: 왼쪽에는 작은 연필 편집 아이콘과 함께 “API Response — Checkout v2”라는 제목을 표시하세요. 중앙에는 “Editors”(파란색으로 선택됨)와 “Diff”(비활성) 탭 2개로 구성된 세그먼트 컨트롤을 배치하세요. 오른쪽에는 “⌘T add column”, “⌘D toggle diff”, “⌘← / ⌘→ move focus”라고 적힌 콤팩트한 바로가기 컨트롤 4개를 배치하고 그룹 사이에 작은 간격을 두세요. 편집기 창: 고정폭 코드 폰트, 줄 번호, JSON 구문 강조, 다크 네이비 패널, 얇고 둥근 테두리를 사용하세요. 왼쪽 창 헤더는 문서 아이콘과 점 3개 메뉴가 포함된 “source.json”입니다. 가운데 창 헤더는 문서 아이콘과 점 3개 메뉴가 포함된 “target.json”입니다. 좁은 오른쪽 창 헤더는 “more.json”이며 오버플로우를 암시하도록 코드의 왼쪽 부분만 보여주세요. 각 전체 편집기 창 하단에는 “Ln 1, Col 1”, “Spaces: 2”, “UTF-8”, “LF”, “JSON”이 포함된 상태 표시줄이 있어야 합니다. 코드 내용: 주문 결제 응답을 위한 JSON을 보여주세요. requestId “req_8f3a9b42”, orderId “ord_123456”, 통화 USD, 무선 헤드폰 및 여행용 케이스 품목, 배송 정보를 사용하세요. 왼쪽 소스 버전에는 타임스탬프 “2025-05-21T10:24:31Z”, 버전 “v1”, 상태 “pending”, totalAmount 129.99, 무선 헤드폰 unitPrice 99.99(할인 null), 여행용 케이스 수량 1, unitPrice 30.00(할인 null), 배송 방식 “standard”, estimatedDays 5, 주소 “123 Market St”가 포함되어야 합니다. 가운데 타겟 버전은 왼쪽 여백의 diff 마커와 색상이 적용된 행 하이라이트(빨간색: 삭제된 행, 초록색: 추가된 행, 노란색: 변경된 행)를 보여주어야 합니다. 타임스탬프는 “2025-05-20T15:11:09Z”에서 “2025-05-21T10:24:31Z”로, 버전은 v2로, 상태는 pending에서 confirmed로, totalAmount는 139.99로, 무선 헤드폰 unitPrice는 109.99로 변경되고 할인이 10.00으로 추가되며, 여행용 케이스 수량은 2로, 배송 방식은 express로, estimatedDays는 2로 변경된 내용을 포함하세요. 각 전체 편집기 창에 약 32개의 번호가 매겨진 줄을 표시하세요. 시각적 스타일: 프리미엄 SaaS 개발자 도구 인터페이스, 선명한 벡터 스타일 렌더링, 다크 테마, 코발트 블루 강조 색상, 차분한 회색 텍스트, 사실적이고 깔끔한 UI 스크린샷. 인물 없음, 워터마크 없음, 앱 창 외부의 브라우저 크롬 없음. 모든 텍스트는 읽기 쉽고 그리드에 맞춰 정렬하세요.