다크 JSON 비교 도구 UI 목업

목표: {argument name="앱 이름" default="Tilted Diffs"}이라는 이름의 JSON diff 도구용 다크 모드 데스크톱 애플리케이션 UI 프로토타입을 제작하고, {argument name="diff title" default="API Response — Checkout v2"}라는 제목의 API 응답 비교 결과를 보여줍니다. 캔버스: 16:10 와이드스크린 데스크톱 스크린샷(약 1152×768) 크기로, macOS 스타일의 애플리케이션 창이 어두운 파란색 그라데이션 배경 위에 떠 있는 형태입니다. 은은한 그림자, 둥근 모서리, 얇은 테두리, 세련된 개발자 도구 디자인을 활용합니다. 레이아웃: 애플리케이션은 왼쪽 사이드바, 편집기 영역 전체를 아우르는 상단 툴바, 그리고 세 개의 세로 코드 편집기 패널의 네 가지 주요 영역으로 구성됩니다. 첫 번째 편집기 패널은 밝은 파란색 포커스 테두리로 선택됩니다. 가운데 패널은 색상으로 구분된 인라인 diff 하이라이트를 표시합니다. 가장 오른쪽 패널은 폭이 좁고 부분적으로만 보이며, 추가 파일 탭이나 세 번째 비교 열처럼 보입니다. 왼쪽 사이드바: 왼쪽 상단에는 macOS 신호등 버튼(빨간색, 노란색, 초록색 원 세 개)이 있습니다. 앱 이름 아래에는 "차이점 검색…"이라는 자리 표시자 텍스트와 키보드 제안이 있는 검색 상자가 있습니다. 아래에는 저장된 차이점 목록 항목 8개가 표시되며, 각 항목에는 작은 문서 아이콘과 타임스탬프가 있습니다. 1) "API 응답 - 체크아웃 v2", 선택된 항목으로 파란색으로 강조 표시되어 "오늘 오전 10시 24분"을 보여줍니다. 2) "사용자 프로필 - 공개 API", "어제 오후 4시 18분"을 보여줍니다. 3) "주문 엔드포인트 - v1 vs v2", "2025년 5월 20일 오전 9시 14분"을 보여줍니다. 4) "제품 카탈로그 - EU 지역", "2025년 5월 19일 오후 2시 47분"을 보여줍니다. 5) "인증 응답 - SSO", "2025년 5월 18일 오전 11시 03분"을 보여줍니다. 6) "청구 요약 - 2분기", "2025년 5월 17일 오후 3시 22분"을 보여줍니다. 7) "웹훅 페이로드 - Stripe"에는 "2025년 5월 16일 오전 10시 11분"이 표시됩니다. 8) "검색 결과 - 관련성" 메시지에는 "2025년 5월 15일 오후 5시 35분"이 표시됩니다. 하단에는 눈에 띄는 파란색 "+ 새 차이점 추가" 버튼과 작은 톱니바퀴 아이콘이 있습니다. 상단 툴바 왼쪽에는 "API 응답 - Checkout v2"가 표시되고, 그 옆에는 작은 편집용 연필 아이콘이 있습니다. 가운데 분할된 컨트롤에는 "편집기"(파란색으로 선택됨)와 "차이점"(선택되지 않음) 두 개의 레이블이 있습니다. 오른쪽에는 "⌘T 열 추가", "⌘D 차이점 전환", "⌘← / ⌘→ 포커스 이동"이라는 네 개의 간결한 키보드 단축키가 있으며, 각 그룹 사이에 작은 간격이 있습니다. 편집기 패널은 고정폭 코드 글꼴, 줄 번호, JSON 구문 강조 표시, 짙은 남색 패널, 그리고 얇고 둥근 테두리를 사용합니다. 왼쪽 패널은 "source.json"이라는 제목과 문서 아이콘, 그리고 점 세 개 메뉴로 구성되어 있습니다. 가운데 패널은 "target.json"이라는 제목과 문서 아이콘, 그리고 점 세 개 메뉴로 구성되어 있습니다. 오른쪽의 좁은 패널은 "more.json"이라는 제목으로, 코드의 왼쪽 부분만 표시되어 오버플로우가 발생할 수 있음을 암시합니다. 각 전체 편집기 패널 하단에는 "Ln 1, Col 1", "Spaces: 2", "UTF-8", "LF", "JSON"을 표시하는 상태 표시줄이 있습니다. 코드 내용은 주문 결제에 대한 JSON 응답을 보여줍니다. 여기에는 requestId "req_8f3a9b42", orderId "ord_123456", currency USD, 그리고 무선 헤드폰과 여행용 파우치에 대한 제품 및 배송 정보가 사용됩니다. 왼쪽의 원본 버전에는 타임스탬프 "2025-05-21T10:24:31Z", 버전 "v1", 상태 "대기 중", 총 금액 129.99, 무선 헤드폰 단가 99.99(할인 없음), 여행용 파우치 수량 1개, 단가 30.00(할인 없음), 배송 방법 "표준", 예상 배송일 5일, 주소 "123 Market St"가 포함되어야 합니다. 중간 목표 버전에는 왼쪽 여백에 차이점 표시가 표시되고, 삭제된 줄은 빨간색, 추가된 줄은 녹색, 수정된 줄은 노란색으로 색상 선이 강조 표시되어야 합니다. 다음과 같은 변경 사항이 포함되어야 합니다. 타임스탬프를 "2025-05-20T15:11:09Z"에서 "2025-05-21T10:24:31Z"로 변경, 버전을 v2로 변경, 상태를 보류 중에서 확정으로 변경, 총 금액을 139.99로 변경, 무선 이어폰 유닛 가격을 10.00 할인된 109.99로 변경, 여행용 파우치 수량을 2개로 변경, 배송 방법을 특급 배송으로 변경, 예상 배송일을 2일로 변경. 전체 편집기에는 약 32줄의 번호가 매겨진 코드가 표시되어야 합니다. 시각적 스타일: 고급 SaaS 개발자 도구 인터페이스, 선명한 벡터 수준 렌더링, 다크 테마, 코발트 블루 강조 색상, 부드러운 회색 텍스트, 사실적이면서도 깔끔한 UI 스크린샷, 사람 이미지 없음, 워터마크 없음, 애플리케이션 창 외부에 브라우저 테두리 없음. 모든 텍스트는 명확하게 표시하고 그리드에 맞춰 정렬해야 합니다.