개발 워크플로우 실무
취향 논쟁을 규칙 확인으로 바꾸는 디자인 리뷰
"좀 답답해 보인다" 는 반박할 수 없고 고칠 수도 없습니다. 간격 척도 밖의 값, 팔레트 밖의 색, 기준 미달 대비, 빠진 상태 — 네 항목만 규칙으로 바꿔도 리뷰의…
Technote
글 12편· 개발 워크플로우 · 디자이너
개발 워크플로우 실무
"좀 답답해 보인다" 는 반박할 수 없고 고칠 수도 없습니다. 간격 척도 밖의 값, 팔레트 밖의 색, 기준 미달 대비, 빠진 상태 — 네 항목만 규칙으로 바꿔도 리뷰의…
개발 워크플로우 실무
전면 교체는 모든 문제를 같은 날 같은 시각에 불러옵니다. 원인을 귀속할 수 없다는 뜻이고, 그래서 템플릿 단위로 나눠 켭니다.
개발 워크플로우 실무
길이가 고른 자리표시자 문장은 레이아웃의 문제를 전부 감춥니다. 실제 문장은 길이가 제각각이고, 그 불규칙이 바로 화면이 무너지는 지점입니다.
개발 워크플로우 실무
스크린샷은 가장 좋은 조건의 한 순간입니다. 상태와 예외와 실제 콘텐츠는 스테이징에서만 드러나며, 스테이징에는 지켜야 할 조건이 있습니다.
개발 워크플로우 실무
기본 상태만 그린 시안은 화면의 절반만 정의한 것입니다. 나머지 절반 — 빈 목록 · 오류 · 긴 제목 — 은 구현 중에 즉흥으로 채워지고, 그 즉흥은 대체로 의도와…
개발 워크플로우 입문
이름이 다르면 대화마다 번역이 한 단계씩 붙습니다. 그 번역은 시간이 지날수록 사람 머릿속에만 남고, 새로 합류한 사람에게는 전달되지 않습니다.
개발 워크플로우 입문
시안을 스무 장 넘겨도 개발자는 스물한 번째 화면을 묻습니다. 그리지 않은 화면까지 스스로 만들 수 있게 하는 것은 규칙이고, 규칙은 시안과 다른 형태로 넘겨야 합니다.
개발 워크플로우 입문
목록에 없는 화면은 지킬 수 없습니다. 페이지 · 템플릿 · 유입 상위 세 목록을 먼저 만들면 일정과 범위가 저절로 정해집니다.
개발 워크플로우 심화
자동 검사는 기계적으로 판정할 수 있는 부분을 빠르고 정확하게 잡습니다. 나머지 — 대체 텍스트가 맞는 말인지, 순서가 말이 되는지 — 는 사람만 알 수 있습니다.
개발 워크플로우 심화
지우는 것보다 어려운 일은 "안 쓰인다" 를 증명하는 것입니다. 참조가 숨어 있는 자리를 알면 안전한 순서가 생깁니다.
개발 워크플로우 심화
따로 만든 디자인 문서는 두 달이면 코드와 어긋납니다. 문서가 살아남는 조건은 분량이 아니라 위치이고, 적어야 할 것은 값이 아니라 이유입니다.
개발 워크플로우 실무
업데이트를 미루는 것은 해결이 아닙니다. 무엇이 깨질 수 있는지 미리 알면, 업데이트는 무서운 일이 아니라 순서가 정해진 작업이 됩니다.
Cited
워드프레스 밖의 주제는 같은 팀이 운영하는 동지커뮤니케이션 기술 인사이트에 정리돼 있습니다. 아래 요약은 원문 그대로 인용했으며, 제목을 누르면 원문으로 이동합니다.
AI 활용
CLAUDE.md 작성법 — AI 코딩 어시스턴트에게 프로젝트를 가르치는 기술
Claude Code, Cursor, Copilot 같은 AI 코딩 도구는 프로젝트 컨텍스트를 정확히 알수록 더 나은 결과를 냅니다. 효과적인 CLAUDE.md 구조와 작성 원칙을 공유합니다.
AI 활용
AI에게 UI 디자인을 요청하는 프롬프팅 전략 — Claude·GPT로 시안 만들기
AI에게 "예쁜 버튼 만들어줘"라고 요청하면 실망스러운 결과가 나옵니다. 제약 조건·레퍼런스·역할 정의를 담은 구조적 프롬프트로 원하는 디자인을 정확하게 요청하는 전략을 공유합니다.
테마 · 플러그인
SCSS 기초 완전 정복 — 변수부터 모듈 구조까지
CSS의 한계를 극복한 SCSS(Sass)의 핵심 문법을 정리합니다. 변수, 중첩, Mixin, @use, 모듈 구조까지 — 실무에서 바로 쓸 수 있는 패턴 중심으로 설명합니다.
테마 · 플러그인
디자인 토큰 & 테마 색상 시스템 — SCSS 변수로 브랜드 아이덴티티 구축하기
색상 팔레트를 단순한 HEX 코드 모음이 아닌, 의미 있는 설계 시스템으로 만드는 방법. 시맨틱 토큰 구조와 SCSS 변수 설계 패턴을 실제 프로젝트 예시로 설명합니다.
성능 최적화
반응형 타이포그래피 시스템 설계 — 웹 가독성의 과학
폰트 크기를 픽셀로 하드코딩하는 시대는 끝났습니다. Type Scale, clamp()로 유동적 폰트 크기, 한글 웹폰트 최적화, 줄간격 황금비율까지 — 어떤 화면에서도 읽기 좋은 타이포그래피 시스템을 설계하는 방법을 알아봅니다.
개발 워크플로우
피그마에서 SCSS로 — 디자이너·개발자 핸드오프 실전 가이드
피그마 디자인을 코드로 옮기는 과정에서 발생하는 오해와 손실을 최소화하는 방법. 토큰 추출, 컴포넌트 명명 규칙, 스페이싱 시스템 동기화까지 실무 워크플로우를 단계별로 정리합니다.