Codelier · Wireframe → Finished
선으로 먼저,
색으로 완성
실제 완성 화면 대신 선과 회색 블록으로 배치를 먼저 놓습니다. 스크롤하거나 토글을 누르면 그 자리에서 완성 화면으로 채워집니다.
이 페이지는 “새로 짓기”가 배치 → 문구 → 색과 이미지 순으로 완성되는 과정을 보여줍니다.
같은 화면, 두 가지 상태.
아래 진행 막대는 스크롤 위치를 그대로 따라갑니다. 버튼을 눌러 바로 확인할 수도 있습니다.
회색 블록과 점선 = 배치 단계 · 실선 색 채움 = 완성 단계 스크롤 진행률이 그대로 채색 진행률입니다
세 단계로 채웁니다.
선 하나에서 색을 가진 화면까지, 순서를 건너뛰지 않습니다.
배치
무엇이 어디에 있어야 하는지부터 정합니다. 색과 문구는 아직 넣지 않습니다.
문구
회색 블록 위에 실제로 쓸 문장을 채웁니다. 자리가 맞는지부터 확인합니다.
색과 이미지
배치와 문구가 확정된 뒤에만 색을 입힙니다. 순서를 지키면 뒤집는 일이 줄어듭니다.
Two tracks
설계도가 없을 때도 있습니다.
이 페이지가 보여준 건 처음부터 짓는 순서입니다. 이미 화면이 있는 서비스는 배치부터 다시 그리지 않고, 있는 것 위에서 필요한 부분만 고칩니다.
새로 짓는 일도, 이미 있는 것을 고치고 더하는 일도 합니다.
순서를 지킵니다
배치 → 문구 → 색 순서를 건너뛰면 완성 직전에 구조를 다시 짜게 됩니다.
중간 결과를 보여드립니다
완성본만 한 번에 내놓지 않습니다. 회색 블록 단계에서부터 확인받습니다.
이어받을 때도 같은 순서
기존 화면을 고칠 때도 바뀌는 부분만 다시 배치하고, 나머지는 그대로 둡니다.