기획자의 작업대

피그마 오토 레이아웃 사용법, 반응형 UI 만들기 피그마 오토 레이아웃 사용법, 반응형 UI 만들기 화면설계서를 수정하다 보면 문구 하나가 길어졌다는 이유로 주변 요소의 위치까지 다시 조정해야 할 때가 있습니다. 저는 이런 반복 작업을 줄이려면 요소를 배치하는 규칙부터 정리하는 것이 중요하다고 생각합니다. 이번 글에서는 피그마의 오토 레이아웃을 이용해 쇼핑몰 마이페이지의 회원정보와 쿠폰 카드를 자동으로 정렬하는 방법을 알아보겠습니다. 📌 목차 오토 레이아웃이란? 기본 설정 3가지 쇼핑몰 마이페이지 실습 실무 팁 3가지 자주 묻는 질문 1. 오토 레이아웃이란? 오토 레이아웃(Auto Layout)은 프레임 안의 요소를 정해진 방향과 간격에 따라 자동으로 배치하는 피그마 기능입니다. 예를 들어 회원등급 문구가 길어지거나 쿠폰 카드에 내용이 추가되어도 설정한 규칙에 따라 요소가 정렬됩니다. 다만 오토 레이아웃을 적용했다고 PC 화면이 모바일 화면으로 자동 전환되는 것은 아닙니다. 2. 기획자가 알아야 할 기본 설정 3가지 처음에는 다음 세 가지 설정만 알아도 실습을 시작할 수 있습니다. 설정 역할 Direction 가로·세로 등 요소 배치 방향 Gap 요소 사이의 간격 Padding 프레임 안쪽의 여백 추가로 Hug contents는 내용에 맞춰 크기를 조정하고, Fill container는 부모 오토 레이아웃의 가용 공간을 채우는 설정입니다. 이번에는 Direction, Gap, Padding을 중심으로 실습하겠습니다. 3. 실습: 쇼핑몰 마이페이지 자동 정렬 ...

반응형 웹 브레이크포인트, 화면 크기 정하는 법 쇼핑몰 마이페이지를 예제로 브레이크포인트를 검토하고 기획 정책을 작성하는 방법을 알아봅니다. PC와 모바일 화면을 모두 만들었는데, 그 중간 크기에서는 어떤 화면을 보여줘야 할까요? 쇼핑몰 마이페이지를 기획하다 보면 PC에서는 잘 보이던 주문 내역이 화면을 줄였을 때 읽기 어려워지는 경우가 있습니다. 저는 이런 상황에서 먼저 화면 크기를 정하기보다 어떤 정보가 제대로 표시되지 않는지 확인하는 것이 중요하다고 생각합니다. 이번 글에서는 브레이크포인트의 개념을 알아보고 피그마에서 화면 전환 기준을 검토해 보겠습니다. 목차 브레이크포인트란 무엇인가? 반응형 화면 크기는 어떻게 정할까? 쇼핑몰 마이페이지 화면 전환 실습 기획자가 알아둘 실무 팁 3가지 자주 묻는 질문 1. 브레이크포인트란 무엇인가? 브레이크포인트(Breakpoint)는 화면 너비가 특정 조건에 도달했을 때 레이아웃 규칙을 변경하는 기준점입니다. 예를 들어 PC에서는 주문 내역을 테이블로 보여주지만, 화면이 좁아지면 카드 형태로 변경할 수 있습니다. 중요한 것은 특정 기기의 크기에 맞춰 무조건 기준을 정하지 않는 것입니다. 콘텐츠가 제대로 표시되는지 확인하고 레이아웃 변경이 필요한 지점을 찾는 것이 핵심입니다. 2. 반응형 화면 크기는 어떻게 정할까? 이번 실습에서는 다음 네 가지 화면 너비를 비교합니다. 화면 너비 검토 내용 1440px ...

피그마 프레임 사용법, PC·모바일 화면 만들기 피그마 프레임을 활용해 쇼핑몰 마이페이지의 PC·모바일 화면을 체계적으로 구성하고 관리하는 방법을 알아봅니다. 화면설계서를 작성하다 보면 회원정보 영역만 수정하려고 했는데 옆에 있는 주문 현황까지 함께 움직이는 경우가 있습니다. PC 화면과 모바일 화면을 따로 작성하다 보면 같은 기능이 어느 위치에 있는지 찾는 데 시간이 걸리기도 합니다. 저는 이런 상황을 줄이기 위해 화면을 구성하는 요소를 기능 단위로 나누고, 이름과 관리 기준을 통일하는 것이 중요하다고 생각합니다. 이번 글에서는 피그마의 프레임(Frame) 기능을 이용해 쇼핑몰 마이페이지의 화면 구조를 정리해 보겠습니다. 디자인 완성도를 높이기보다는 기획자가 화면설계서를 수정하고 개발자에게 전달하기 쉬운 구조 를 만드는 데 집중하겠습니다. 목차 기획자가 피그마 프레임을 이해해야 하는 이유 프레임과 일반 도형의 차이 PC·모바일 프레임 크기 설정 방법 쇼핑몰 마이페이지 영역 구분하기 실습: PC·모바일 프레임 구조 정리 실습 결과물 검수 기획자가 알아둘 실무 팁 3가지 자주 묻는 질문 마무리 1. 기획자가 피그마 프레임을 이해해야 하는 이유 피그마에서 프레임은 화면이나 특정 UI 영역을 구성하는 기본 단위입니다. 프레임 안에...

반응형 웹과 적응형 웹 차이, 화면설계 기준 출처 : AI 생성 반응형 웹과 적응형 웹의 차이를 이해하고, 쇼핑몰 마이페이지를 예제로 화면 크기별 기획 정책을 작성해 봅니다. PC와 모바일 화면설계서를 작성하다 보면 두 화면의 구성은 만들었는데 그 사이 크기의 화면은 어떻게 처리해야 할지 고민하는 경우가 있습니다. PC에서는 왼쪽 메뉴가 잘 보이고 모바일에서는 메뉴 버튼으로 처리했지만, 태블릿처럼 애매한 너비에서는 어떤 구성을 적용해야 할지 결정해야 합니다. 저는 화면설계서를 검토할 때 PC와 모바일 시안이 각각 잘 만들어졌는지뿐 아니라 두 화면 사이에서 어떤 규칙으로 구성이 달라지는지를 중요하게 봅니다. 이번 글에서는 반응형 웹과 적응형 웹의 차이를 기획자 관점에서 정리하고, 앞서 작성한 쇼핑몰 마이페이지에 반응형 정책을 추가해 보겠습니다. 📌 목차 반응형 웹과 적응형 웹은 무엇이 다를까? 기획자는 어떤 방식을 선택해야 할까? 반응형 화면설계에서 정의할 기준 쇼핑몰 마이페이지 반응형 정책 실습 PC·모바일 화면설계서 검수 방법 기획자가 알아둘 실무 팁 3가지 자주 묻는 질문 마무리 1. 반응형 웹과 적응형 웹은 무엇이 다를까? 반응형 웹과 적응형 웹은 모두 다양한 화면 환경에 대응하기 위한 접근 방식입니다. 하지만 화면 구성을 변경하는 방법에는 차이가 있습니다. 기...

노션 데이터베이스 만들기, 속성 설정부터 데이터 입력까지 노션 데이터베이스, 직접 만들어 보니 무엇부터 해야 할까요? IT 서비스 기획 업무에서는 화면 설계서와 요구사항을 목록으로 관리할 일이 많습니다. 처음에는 화면명과 상태를 일반 표에 정리하지만, 화면이 늘어나면 담당자와 검토 일정까지 확인해야 합니다. 실무에서 화면 설계서를 관리할 때 중요한 것은 목록을 예쁘게 정리하는 것보다 어떤 문서가 작성 중인지, 누가 담당하는지, 상세 내용은 어디에 있는지 빠르게 확인하는 것입니다. 이런 상황에서는 노션 데이터베이스를 활용할 수 있습니다. 이번 글에서는 노션 데이터베이스 만들기부터 속성 설정, 데이터 입력, 개별 페이지 작성, 필터와 정렬까지 직접 따라 할 수 있도록 설명하겠습니다. 실습 대상은 쇼핑몰 마이페이지의 화면 설계서입니다. 노션이 익숙하지 않아도 순서대로 진행하면 기본적인 화면 관리 데이터베이스를 만들 수 있습니다. ※ 이 글은 2026.11 기준으로 작성되었으며, 노션 기능 및 메뉴의 최신 내용은 공식 문서를 확인하시기 바랍니다. 목차 데이터베이스 만들기 전 준비사항 새 데이터베이스 생성하기 데이터베이스 속성 설정하기 화면 설계서 데이터 입력하기 데이터베이스 항목을 페이지로 열기 필터와 정렬 적용하기 IT 기획자를 위한 실무 팁 3가지 완성 후 확인할 체크리스트 자주 묻는 질문 1. 데이터베이스 만들기 전 준비사항 노션 데이터베이스를 만들기 전에 어떤 정보를 관리할지 먼저 정하는 것이 좋습니다. 이번 실습에서는 화면 설계서의 제목, 화면 ID, 진행 상태, 담당자, 검토 예정일을 관리하겠습니다. 이번 실습에서 완성할 결과물 화면 ID 문서명 상태 검토 예정일 MP-001 마이페이지 홈 확정 2026.11.06 MP-002 주문내역 검토 중 2026.11.10 MP-003 배송조회 작성 중 2026.11.12 ...