Apple Silicon Mac의 Todo 편집 창에 Figma 디자인을 적용한다

[opficdev]

배경

Apple Silicon Mac에서 별도 창으로 열리는 Todo 편집 화면을 Figma 시안의 2단 구성에 맞춰 정리함.

Figma 대상

• DevLog Figma 파일
• macOS Todo 수정 창 - DevLog

담당 범위

• Entry

공통 디자인 기준

• 최소 지원 버전은 iOS 18이며, 이전 버전 호환 구현·검증은 제외
• DevLog 청록색과 카드 중심의 정보 위계를 유지
• Android나 Material Design 인상 없이 SwiftUI 기반의 iOS 앱 형태로 구성
• 밝은 모드와 다크 모드 지원
• 주요 화면 구조는 iOS 버전과 관계없이 동일하게 유지
• iOS 26의 Liquid Glass와 iOS 18의 대체 표현은 탭, 버튼, 알림, 시트 등 시스템 UI와 구성 요소 수준에만 적용
• Menu와 .sheet는 시스템 방식 유지
• 기본 List 외형을 주요 화면 디자인으로 사용하지 않되 기존 동작 보존에 필요한 List를 일괄 제거하지 않음
• Figma에서 생략된 로딩, 오류, 빈 상태와 기존 로컬라이제이션 동작 유지

개별 프레임 node ID는 Figma Starter 요금제의 호출 한도 소진으로 확인하지 못했으며, 파일 링크와 프레임 이름을 기준으로 대조함.

작업 범위

• TodoEditorWindowView 안에서 공통 TodoEditorView의 넓은 화면 배치 조정
• 제목·본문 편집 영역과 옵션 영역의 정보 위계 정리
• 창 크기 변화에 따른 최소 폭과 여백 정의

기존 동작 보존

• Todo 생성·수정 결과를 TodoEditorWindowEvent로 전달하는 흐름
• 창 닫기와 저장 동작
• 기존 창 연결과 WindowSceneReader

완료 조건

• 넓은 창에서 편집 영역과 옵션 영역이 Figma 프레임에 맞게 배치됨
• 창 크기 변경 시 입력 영역이 잘리거나 겹치지 않음
• 저장·닫기·변경 전달이 기존과 동일하게 동작함

검증

• 변경 Swift 파일 SwiftLint
• EntryTests와 공통 Todo 편집 Feature 테스트, Entry target build-only
• 별도 실행 허용 후 Apple Silicon Mac에서 창 크기·다크 모드·키보드 탐색 확인

제외 범위

• 별도 macOS target 또는 AppKit 앱 추가
• 기존 창 연결 제거
• Todo 편집 기능 중복 구현

관련 이슈

• 없음