Build mode는 도입된 코드베이스의 미리보기를 비주얼 에디터로
바꿉니다. 돌고 있는 앱에서 요소를 클릭하고, 화면에서 바꾸면 — 텍스트,
간격, 색 — 변경이 1design/<slug> 브랜치의 실제 코드로 다시 씁니다.
UI가 사는 곳에서 UI를 편집하는 것입니다.
열기
코드베이스 프로젝트에서 Preview와 Sketch 옆의 Build 탭이 패널을 Build mode로 전환합니다. 앱이 라이브로 렌더되고, 편집 레이어가 그 위에서 활성화됩니다. 호버는 커서 아래의 요소를 하이라이트하고, 클릭은 그것을 선택해 편집 서피스를 엽니다 — 요소가 노출하는 속성들이 제자리에서 편집 가능합니다.
화면에서 편집하기
편집 서피스는 비주얼로 의미 있는 속성들을 다룹니다.
- 텍스트 — 카피를 클릭하고, 대체 텍스트를 입력
- 간격 — 선택한 요소의 패딩과 갭
- 색 — 프로젝트 토큰에서 오는 채우기나 텍스트 색
- 타입 — 텍스트 요소의 크기, 굵기, 패밀리
변경은 미리보기에 라이브로 적용됩니다 — 결과에서 떨어진 속성 패널이 아니라, 편집이 놓이는 곳에서 봅니다.
코드로 다시 쓰기
비주얼 편집은 목업 오버레이가 아닙니다 — 요소의 실제 스타일에 매핑되고,
변경을 그것을 소유한 파일에 1design/<slug> 브랜치 위로 씁니다. 다음
턴이나 다음 빌드가 그것을 다른 코드 변경처럼 읽습니다 — 워크트리 diff는
당신이 한 편집만큼 정확히 커집니다.
diff 범위 검사
코드베이스 프로젝트는 전체 코드베이스가 아니라 diff를 검증합니다 — 턴의 (또는 편집의) 변경 파일들이 검사되고, 브랜치 바의 Review changes가 무엇이 움직였는지 정확히 보여줍니다. 비주얼 편집도 다른 diff와 같은 diff입니다 — 그것이 건드린 파일로 범위가 정해진 채 브랜치에 놓입니다.
Build vs Preview vs Sketch
- Preview — 돌고 있는 앱을 보고, 댓글과 핀으로 스티어링
- Build — UI를 비주얼로 편집하고, 변경을 코드로 씀
- Sketch — 컴포넌트에 매핑되는
.1d스케치를 올림
Build mode는 볼 수 있는 편집을 위한 것입니다 — 더 커야 하는 버튼, 더 타이트해야 하는 헤딩. 변경이 새 플로이거나 여러 요소의 재배치일 때는 브리프가 여전히 도구입니다.
리뷰와 머지
Build mode 편집은 에이전트 턴과 같은 워크트리 브랜치에 삽니다 — 브랜치 바가 앞선 커밋을 추적하고, Review changes가 작업이 만든 diff를 보여주며, Merge into main이 맞을 때 되돌립니다. 편집-코드 경로는 진짜이므로, 머지도 진짜 머지입니다.
강점
- 비주얼 패스 — 전체 앱의 간격, 색, 타입을 제자리에서 편집
- 카피 편집 — 화면 자체에서 문구를 고침
- 토큰 튜닝 — 색이나 크기를 살짝 움직이고 코드에 놓이는 것을 봄
- 라스트 마일 — 브리프가 과한 다듬질 패스
Tip: Build mode 편집은 코드이므로 머지 전에 diff를 리뷰하세요 — 비주얼 트윅은 정직한 코드지만, "화면에서 맞아 보임"과 "파일에서 맞게 읽힘"은 브랜치가 머지되기 전에 둘 다 확인할 가치가 있습니다.