폰트 수치 일일이 적지 마세요: 개발자가 감동하는 기획자의 타이포그래피 가이드

이미지
폰트 수치 일일이 적지 마세요: 개발자가 감동하는 기획자의 타이포그래피 가이드 폰트 수치 일일이 적지 마세요: 개발자가 감동하는 기획자의 타이포그래피 가이드 화면 하나 만들 때마다 “16px, Bold, 행간 140%…”를 텍스트 옆에 적고 있나요? 화면이 수십 장이 되면 기획자는 숫자에 흔들리고, 개발자는 매번 캡처해서 확인합니다. 결국 폰트는 커지고, 일정은 작아집니다. 🫠 해결책은 단순합니다. 수치로 소통하지 말고, ‘이름(스타일)’으로 소통 하세요. 피그마의 텍스트 스타일(Text styles) 을 “타이포그래피 규칙(디자인 토큰)”으로 시스템화하면, 기획서에서 폰트 수치 기입 노동이 거의 사라지고 개발 전달도 깔끔해집니다. 📚 목차 수치가 아닌 ‘이름’으로 소통하기 기획자가 잡아야 할 타이포그래피 핵심 3요소 실무 바로 적용: 텍스트 스타일 5종 세트(추천 수치 포함) 실무 네이밍 규칙(Body-1, Title-Large) 정하기 피그마에서 텍스트 스타일 등록하는 법 개발자가 감동하는 Typography Guide 페이지 구성 자주 터지는 실수 체크 FAQ 1) 수치가 아닌 ‘이름’으로 소통하기 개발은 보통 “16px Bold”를 화면마다 다시 읽지 않습니다. 대신 Body-1 , Title-Large 같은 스타일 이름 을 코드에 한 번 선언하고 계속 재사용합니다. 기획자: “본문은 Body-1, 섹션 제목은 Title-Medium” 개발자: .typo-body-1 같은 클래스(또는 토큰)를 만들어 반복 적용 결론 : 숫자는 “매번 확인”, 이름은 “한 번만 합의”입니다. 2) 기획자가 잡아야 할 ...

퇴직연금 의무화 언제부터? 2026년 달라지는 제도와 사업장 규모별 도입 시기 총정리

이미지
퇴직연금 의무화 언제부터? 2026년 달라지는 제도와 사업장 규모별 도입 시기 총정리 퇴직연금 의무화 언제부터? 2026년 달라지는 제도와 사업장 규모별 도입 시기 총정리 직장인에게는 노후의 생명줄, 사업주에게는 운영의 큰 축인 퇴직금 . 이제는 “회사 금고에 쌓아두는 방식”에서 벗어나 퇴직연금(퇴직급여 사외적립) 으로 옮겨가는 흐름이 본격화되고 있습니다. 퇴직금이 월급보다 빨리 사라지는 마법(…)을 막고, 오래 굴려서 노후에 제대로 쓰게 하자는 취지죠. 🧙‍♂️💸 [업데이트] 이 글은 2026-02-08 기준으로 작성했으며, 2026-02-06 발표된 노사정 공동선언(퇴직연금 사외적립 의무화·기금형 활성화) 흐름을 반영했습니다. 단, 세부 시행 시점/단계는 법 개정 및 후속 절차에 따라 달라질 수 있습니다. 서론: “퇴직금, 이제는 ‘내 계좌’로 굴리는 시대” 기존 퇴직금 제도는 회사가 내부적으로 적립하다 보니, 기업 경영이 흔들릴 때 수급권이 불안 해질 수 있다는 지적이 이어졌습니다. 반면 퇴직연금은 외부 금융기관(사외) 에 적립·운용되는 구조라 제도 설계만 잘 되면 “떼일 위험을 줄이고(체불 방지)” “장기 운용(노후소득 강화)”에 유리합니다. 그래서 2026년을 기점으로 ‘단계적 의무화’가 현실적인 과제가 됐습니다. 이 글에서는 도입 시기(확정 vs 논의) , DB/DC 차이 , 미도입/미납 리스크 , 그리고 직장인·사업주 체크리스트 까지 한 번에 정리합니다. 📚 목차 퇴직연금 의무화, 왜 추진하나요? 2026년 달라지는 핵심: ‘사외적립 의무화’와 ‘기금형’ 사...

개발자가 자꾸 물어본다면? 피그마 기획서에 '컴포넌트 상태(State)' 정의하는 법

이미지
개발자가 자꾸 물어본다면? 피그마 기획서에 '컴포넌트 상태(State)' 정의하는 법 개발자가 자꾸 물어본다면? 피그마 기획서에 '컴포넌트 상태' 정의하는 법 기획안을 넘기고 나면 끝날 줄 알았는데, 개발자에게 이런 질문을 자주 받나요? “이 버튼 누르면 로딩 중 일 때 어떻게 보여요?” “값 입력 안 했을 때 비활성화 되나요?” “ 에러 메시지 는 어디에 떠요?” 이 질문들이 반복된다면, 기획서에 빠진 건 기능이 아니라 상태(State) 입니다. 오늘은 피그마에서 컴포넌트 상태를 ‘한 번만’ 제대로 정의 해서, 질문은 줄이고 완성도는 올리는 방법을 정리합니다. (버튼 박스 밀기 대신 퇴근을 밀어봅시다. ✅) 📚 목차 상태(State) 정의, 왜 기획자가 해야 할까? 기획자가 챙겨야 할 5가지 필수 상태 피그마로 상태 정의하는 법: Variants + 조건(Logic) 텍스트 바로 복붙 가능한 상태 정의 템플릿(버튼/인풋) 예외 케이스(Edge Case) 체크리스트 개발자가 감동하는 구성: ‘공통 컴포넌트 가이드’ 섹션 FAQ 1) 상태(State) 정의, 왜 기획자가 해야 할까? 디자인이 ‘심미성’을 다듬는다면, 기획은 ‘논리’를 설계합니다. 즉, 사용자의 액션에 따라 화면이 어떻게 변해야 하는지 를 가장 정확히 아는 사람은 기획자일 때가 많습니다. 누락 방지 : 상태를 적어두면 개발 시 예외 처리(Disabled/Loading/Error)가 빠질 확률이 낮아집니다. 해석 비용 절감 : “그때그때 맞추죠”는 대개 재작업으로 돌아옵니다. 품질 상승 : 동일한 컴포넌트가 ...

반응형 웹 기획이 처음인가요? 화면 너비와 그리드 설정, 이것만 따라 하세요

이미지
반응형 웹 기획이 처음인가요? 화면 너비와 그리드 설정, 이것만 따라 하세요 반응형 웹 기획이 처음인가요? 화면 너비와 그리드 설정, 이것만 따라 하세요 모바일에서 보든, PC에서 보든 자연스럽게 화면이 변하는 ‘반응형 웹’. 그런데 기획자가 피그마 캔버스를 “그냥 크게”만 쓰면, 협업은 곧바로 이런 대화로 굴러갑니다. “이 화면은 1440 기준이에요? 1920이에요? 콘텐츠 폭은요?” 😵‍💫 정답은 하나입니다. 디자이너·개발자와 약속한 표준 규격 안에서 기획 해야 수정과 소통 비용이 확 줄어듭니다. 오늘은 “웹 기획서는 가로를 몇 px로 잡아야 하나요?”에 바로 답하는, 초보 기획자용 기준 세트를 드릴게요. 📚 목차 웹 기획의 표준, 프레임(Frame) 사이즈 정하기 반응형 기획 체크포인트(모바일·태블릿·데스크톱) 반응형의 핵심, 그리드(Layout Grid) 설정하기 기획자가 꼭 알아야 할 안전 영역(Safe Area) 8단위 법칙: 간격의 마법(8px 룰) 초보 기획자 사이즈 팁(폰트·배율) 30초 체크리스트 FAQ 1) 웹 기획의 표준, 프레임(Frame) 사이즈 정하기 기획자는 “구현 가능한 설계도”를 만드는 사람입니다. 설계도는 자부터 맞춰야 해요. ✅ 데스크톱(PC 웹) 기준: 1440px 추천 : 1440px을 ‘작업 기준 프레임’으로 잡습니다. 이유 : 피그마의 데스크톱 프리셋이 1440 폭을 기준으로 제공되는 경우가 많아 협업 기준점으로 쓰기 좋습니다. 주의 : 1440은 “최대 화면”이 아니라 “기획 기준”입니다. 실제 구현은 반응형으로 늘고 줄 수 있어야 합니다. ✅ 모바일(모바일...

피그마 오토 레이아웃 지옥 탈출기: 기획서 수정 10배 빨라지는 법, 이것만 그대로 따라 하세요

이미지
피그마 오토 레이아웃 지옥 탈출기: 기획서 수정 10배 빨라지는 법, 이것만 그대로 따라 하세요 피그마 오토 레이아웃 지옥 탈출기: 기획서 수정 10배 빨라지는 법, 이것만 그대로 따라 하세요 기획서에 글자 몇 자 추가했을 뿐인데, 뒤에 있는 박스를 일일이 밀고 크기를 조절하느라 시간을 다 써버리나요? 그 순간 피그마는 “협업 툴”이 아니라 “수동 노동 시뮬레이터”가 됩니다. 🧱 하지만 오토 레이아웃(Auto layout)을 쓰면, 프레임(그릇)이 콘텐츠(내용물)에 맞춰 자동으로 늘고 줄고, 리스트는 자동으로 밀리고, 간격은 균일하게 유지됩니다. 최신 UI에서도 당황하지 않도록, 기획자가 가장 자주 쓰는 기능만 뽑아 “바로 따라하는 순서”로 정리했습니다. 📚 목차 오토 레이아웃, 기획자에게 왜 필요한가요? 3초 만에 만드는 자동 조절 버튼(실전) 업데이트된 패널에서 간격/패딩 조절하기(3개만 기억) 리스트 수정/추가/순서 변경을 “자동화”하는 법 기획자를 위한 오토 레이아웃 생존 팁(해제, Hug vs Fill, 무시하기) 30초 체크리스트 FAQ 1) 오토 레이아웃, 기획자에게 왜 필요한가요? 오토 레이아웃은 한 줄로 말하면 이겁니다. “내용물이 바뀌면, 그릇과 정렬이 알아서 따라온다.” 수정의 자유 : 텍스트를 늘리면 버튼/박스가 자동으로 늘어납니다. 간격 유지 : 항목을 추가하면 아래 요소들이 자동으로 밀려납니다. 정렬의 일관성 : ‘이거 1px 어긋났나?’ 같은 불안을 줄입니다. 기획자 관점에서 가장 큰 이득은 “수정할 때마다 레이아웃 다시 잡는 시간”이 사라진다는 점입니다. 2) 3초 만에 만...