Zipic도 시스템 제어를 사용하는데, 왜 약간 다르게 보일까요? Zipic의 UI는 "모두를 위한 디자인 책"에 나오는 네 가지 기본 원칙, 즉 근접성, 정렬, 반복, 대비를 엄격하게 준수합니다. 이 네 가지 원칙은 간단하고 이해하기 쉽지만, UI를 한 단계 끌어올리는 가장 간단하고 실현 가능한 방법입니다. 근접성: 관련 요소들이 함께 그룹화됩니다. Zipic의 압축 목록에서는 각 파일 항목의 썸네일, 파일 이름, 크기, 압축률이 나란히 표시되어 시각적 단위를 형성하고, 서로 다른 파일은 명확하게 구분됩니다. 사용자는 한눈에 어떤 정보가 동일한 이미지에 속하는지 쉽게 구별할 수 있습니다. 설정 패널도 마찬가지로 기능별로 그룹화되어 있습니다. 출력 설정은 함께 배치되고, 품질 설정은 함께 배치되며, "출력 경로"와 "압축 품질"은 혼용되지 않습니다. 정렬: 모든 요소는 시각적으로 연결되어야 합니다. Zipic의 사이드바, 목록 보기, 상세 정보 패널에서는 동일한 요소 내의 모든 텍스트가 정렬되어 있습니다. 사소해 보일 수 있지만, 정렬이 흐트러지면 전체 인터페이스가 "전문적이지 못하게" 보일 수 있습니다. SwiftUI의 `alignment` 매개변수는 광범위하게 사용되며, 콘텐츠 유형에 따라 `.leading`, `.trailing`, `.center` 중에서 적절한 값을 선택해야 합니다. 반복성: 일관된 시각적 요소들이 전체적으로 사용되었습니다. Zipic은 모서리 곡률을 균일하게 유지하고, 모든 클릭 가능한 텍스트에 동일한 색상을 적용했습니다. 아이콘 스타일 또한 일관성을 유지하여, 모든 아이콘에 SF 심볼을 사용하거나 사용자 정의 아이콘을 사용함으로써 여러 스타일을 혼합하여 사용하는 것을 방지했습니다. 이러한 일관성 덕분에 사용자들은 "이것은 완성된 제품이고, 여러 조각을 짜깁기한 것 같지는 않다"는 느낌을 받게 됩니다. 대비: 중요한 정보를 강조하세요. 압축률은 사용자가 가장 중요하게 생각하는 데이터이므로 파란색 그라데이션 레이블로 표시하고, 파일 이름은 중요도가 낮으므로 일반 글꼴을 사용하세요. 원본 크기는 중요도가 더욱 낮으므로 밝은 회색으로 표시하세요. 주요 정보와 보조 정보를 명확하게 구분하면 사용자는 고민하지 않고도 어떤 옵션을 클릭해야 할지 알 수 있습니다. 이 네 가지 원칙은 간단해 보이지만, 진정으로 숙달하려면 끊임없는 조정이 필요합니다. 제 접근 방식은 코드를 작성한 후 먼저 실행하여 그 효과를 확인하고, 뭔가 "잘못된" 부분이 있으면 이 네 가지 원칙을 사용하여 점검하는 것입니다. 관련 요소들이 충분히 가까이 있지 않은가? 정렬에 문제가 있는가? 반복되는 요소들이 일관성이 없는가? 강조 표시되어야 할 요소들이 충분히 강조 표시되지 않은가?
