JY WORK OS
직접 쓰며 발견한 문제를 고쳐 온 작업 환경
기획, 디자인, 구현 지시(AI), 검수
프로젝트 개요
- 시작한 이유
- 일정과 자료, 제작 프로그램을 오갈 때마다 하던 일을 다시 찾아야 했습니다. 지금 할 일이 한 화면에 보이는 작업 환경이 필요했습니다.
- 정한 기준
- 할 일, 레퍼런스, 작업 툴을 한 화면에 묶고, 할 일을 보는 Work 화면과 로고, 아이콘만 남긴 데스크톱 화면을 나눴습니다. 그 위에 무채색 면과 선을 기본으로 삼고 주황색은 핵심 상태 네 곳에만 배치했으며, 실제 업무에 매일 사용하며 불편한 지점을 개선했습니다.
- 만든 것
- 웹뷰로 시작한 앱을 Windows 네이티브로 옮겼습니다. 대시보드, 노트, 자체 탐색기, 데스크톱 모드를 직접 쓰며 고치고 있습니다.
기능 소개
날짜, 프로젝트, Today, 달력, 타임라인, Tools를 24칸 격자에 놓았습니다. 타일을 길게 누르면 자리와 크기를 바꾸고, 빈 틈에는 메모, 체크리스트, 바로가기, 이미지 박스를 더합니다. 바꾼 배치는 알약으로 저장해 기본 배치와 오갑니다.
화면 아래 48px Dock에 시작, 탐색기, 고정 도구, 열린 창을 모았습니다. C4D, Photoshop 같은 작업 앱이 앞에 오면 0.4초 동안 검정 바탕과 주황 윗선으로 바뀝니다.
서브 모니터에는 Reference, Zettelkasten, Utility를 두었습니다. 모니터가 하나일 때는 MAIN과 SUB를 토글로 번갈아 봅니다.
시선 분산을 막는 주황 강조색 네 곳 적용 규칙
Dieter Rams의 '적게, 그러나 더 좋게'를 기준으로 선과 면만 남겼습니다. 강조색 주황은 오늘, 현재 위치, 주요 행동, 키보드 초점 네 곳에만 써서, 주황을 따라가면 다음 행동이 보이게 했습니다.
- 오늘
- 현재 위치
- 주요 행동
- 키보드 초점
3D 툴과의 병행 실행을 위한 Windows 네이티브 전환 및 모드 분리
After Effects, Cinema 4D와 함께 켜 두기 위해 실행 기반을 Windows 네이티브로 옮겼습니다. 상단 바의 스위치로 할 일을 보는 Work 화면과, 로고와 아이콘만 남긴 데스크톱 화면을 오갑니다.

카드형 UI에서 1px 라인 분할 구조로의 탐색기 레이아웃 개선
탐색기 영역을 5개의 둥근 카드로 분리하자 기존 Windows 사용성 및 화면 밀도와 어긋나는 문제가 있었습니다. 디자인 시스템(컬러, 버튼, 아이콘, 타이포그래피)은 유지한 채, 카드 여백을 없애고 1px 라인으로 영역을 나누어 익숙한 탐색 구조를 확보했습니다.
2026.10.19 반영. 시험 자료로 찍은 화면입니다.
자체 탐색기 폴더 로딩 속도 개선 (1,423.2ms → 176.2ms)
앱 안에서 폴더를 열면 목록이 늦게 떴습니다. AI 코딩 도구로 원인을 찾고, 수정 전후를 같은 조건에서 쟀습니다.
파일 100개, 같은 PC, 전후 각 5회 실행한 첫 목록 표시 중앙값입니다. 사용자 생산성 수치는 아닙니다.
쓰는 사람에 맞춰 바뀌는 배치
기타 편의 기능
- 한/영 알약 입력 언어가 바뀌면 글 쓰는 자리 옆에 가 / A 알약이 잠깐 떠서 지금 한글인지 영문인지 보여 줍니다.
- MAIN, SUB 단축키 모니터가 하나일 때 Ctrl+Alt+`로 MAIN과 SUB를 번갈아 봅니다.
- 링크로 영상 받기, GIF Utility에 링크를 붙여 최대 4K 영상을 받고, 필요한 구간을 GIF로 만듭니다.
- AI 사용량 머리 막대와 SUB에 Claude 5시간, 주간 남은 사용량을 5분마다 읽어 보여 줍니다.
- 데스크톱 정리 우클릭으로 이름, 종류, 수정일, 크기 순 정렬과 아이콘 크기 세 가지, 폴더 색 일곱 가지를 고릅니다.
- 자동 백업, 자동 실행 하루 한 번 자동으로 백업하고, Windows에 로그인하면 바로 켜집니다.
직접 쓰며 고쳐 가는 개인 프로젝트
무엇을 바꾸고 무엇을 남길지는 제가 정했고, 구현과 측정은 AI 코딩 도구가 맡았습니다. 근거는 개인 사용 기록과 시험이며, 다른 사람에게도 효과가 있는지는 아직 확인하지 않았습니다. 인상 참고로, 지인 두 명에게 시연했을 때 ‘UI가 예쁘다’, ‘디테일하게 신경 쓴 게 보인다’는 반응을 받았습니다.
Credit
- 문제 정의, 기획, 화면과 조작 규칙, 개선 순서, 구현 지시, 검수, 배포
- 이주영
- 코드 구현, 원인 조사, 시험과 측정 지원
- Claude Code, Codex
직접 해 보기
웹 버전으로도 만들어 직접 시연할 수 있습니다.
해 볼 것: 파트 하나를 고르고, 오늘 할 일을 확인한 뒤, 배치 편집으로 칸을 옮겨 보세요.
직접 해 보기 (새 탭)PC 전용, 샘플 데이터로 동작하며 바꾼 내용은 이 브라우저에만 남습니다. Dock, 탐색기 같은 Windows 기능은 빠져 있습니다.
PC에서 열어 주세요. 모바일은 지원하지 않습니다.