피그마 반응형 화면설계서, 기획자 관점 작성법

피그마로 쇼핑몰 마이페이지의 PC·모바일 화면을 설계하고, IT 서비스 기획자 관점에서 기능과 반응형 정책을 정의하는 과정을 알아봅니다.

반응형 웹 프로젝트를 진행하다 보면 PC 화면을 모바일에서 어떻게 보여줄지 결정해야 하는 상황을 자주 만납니다.

PC에서 사용하던 메뉴를 모바일에서는 어떻게 제공할지, 주문 내역 테이블을 작은 화면에서도 유지할지, 어떤 정보를 먼저 보여줄지 고민하게 됩니다.

저는 이런 화면설계 작업에서 화면을 그리는 것만큼 화면이 바뀌는 조건과 기능의 동작을 정의하는 일이 중요하다고 생각합니다.

이번 글에서는 피그마(Figma)를 활용해 쇼핑몰 마이페이지의 PC·모바일 화면설계서를 처음부터 작성해 보겠습니다.

디자이너를 위한 시각 디자인 강좌가 아닙니다. IT 서비스 기획자가 화면 구조를 만들고 기능과 정책을 정리하는 과정에 집중하겠습니다.

1. 기획자가 피그마를 사용하는 이유

IT 서비스 기획자의 화면설계서는 사용자가 어떤 정보를 확인하고, 어떤 기능을 실행하며, 그 결과 어떤 화면으로 이동하는지 설명하는 문서입니다.

피그마를 사용하면 PC와 모바일 화면을 하나의 작업 공간에 배치하고 비교할 수 있습니다. 또한 화면 구성 요소와 정책을 함께 관리하면서 디자이너, 개발자와 협업할 수 있습니다.

디자이너와 기획자의 관점은 다릅니다

구분	디자이너 관점	기획자 관점
화면 구성	배치와 시각적 완성도	정보 구조와 우선순위
반응형	레이아웃의 유연한 변화	화면별 노출·동작 정책
버튼	크기, 색상, 상태 표현	선택 조건과 실행 결과
결과물	디자인 시안과 UI 규칙	화면설계서와 기능 정책

실제 프로젝트에서는 이 영역이 완전히 분리되지 않습니다. 기획자와 디자이너가 함께 정보 구조와 사용자 경험을 검토하는 경우도 많습니다.

중요한 것은 기획자가 시각 디자인을 모두 담당하는 것이 아니라 무엇을, 언제, 어떤 조건으로 보여줄지 설명할 수 있어야 한다는 점입니다.

2. 반응형 화면설계에서 정의할 내용

반응형 웹은 화면 너비에 따라 레이아웃이 달라지는 웹 구현 방식입니다. 하지만 기획서에서는 요소의 크기 변화만 정의해서는 충분하지 않습니다.

쇼핑몰 마이페이지를 예로 들어보겠습니다.

화면 요소	PC	모바일
마이페이지 메뉴	좌측 사이드 메뉴	주요 메뉴와 전체 메뉴
회원정보	회원정보 영역	상단 요약 정보
주문·배송 현황	가로형 단계 표시	축약된 단계 표시
주문 내역	테이블	주문별 카드
쿠폰·적립금	가로 배치	화면 너비에 맞춰 재배치

이 표는 실습을 위한 초기 설계 방향입니다. 실제 프로젝트에서는 서비스의 콘텐츠 양, 이용 환경, 사용자 요구사항을 검토한 뒤 확정해야 합니다.

특히 PC에서 제공하던 기능을 모바일에서 숨길 때는 단순히 화면이 좁다는 이유만으로 결정하면 안 됩니다. 핵심 기능이라면 다른 위치에서라도 사용할 수 있도록 접근 경로를 제공해야 합니다.

3. 실습 전 준비 사항

이번 실습에서 사용할 도구는 피그마입니다. 별도의 디자인 완성본 없이 기본 도형과 텍스트만으로 화면 구조를 작성합니다.

피그마 공식 사이트 바로가기

이번 실습의 목표

피그마 파일과 작업 페이지 생성
PC·모바일 화면 프레임 생성
쇼핑몰 마이페이지 기본 영역 배치
화면 크기에 따른 구성 차이 정리
반응형 정책 초안 작성

실습 기준

PC 화면 너비: 1440px
모바일 화면 너비: 390px

위 값은 실습용 프레임 크기입니다. 실제 서비스의 브레이크포인트를 의미하지 않습니다. 반응형 전환 기준은 콘텐츠가 정상적으로 표시되는 조건을 검토해 별도로 정합니다.

4. 쇼핑몰 마이페이지 화면설계 실습

이제 피그마에서 실제 화면을 만들어 보겠습니다. 첫날에는 정확한 간격이나 색상보다 화면을 구성하는 영역과 정보의 관계를 이해하는 것이 목표입니다.

STEP 1. 피그마 파일 생성하기

피그마에 로그인한 뒤 새로운 디자인 파일을 생성합니다. 파일 이름은 다음과 같이 설정합니다.

쇼핑몰_마이페이지_반응형_화면설계서

파일명만 보고도 프로젝트와 산출물의 목적을 이해할 수 있도록 구성하는 것이 좋습니다.

페이지는 우선 다음과 같이 구성합니다.

00_기획개요
01_화면설계
02_공통정책

첫 번째 페이지에는 실습 목적과 작성 범위를 기록합니다. 두 번째 페이지에는 PC·모바일 화면을 만들고, 세 번째 페이지에는 정책을 정리합니다.

피그마 요금제 및 팀 유형에 따라 파일에서 사용할 수 있는 페이지 수에 제한이 있을 수 있습니다. 여러 페이지를 생성할 수 없다면 한 페이지에 영역별 프레임을 배치해도 됩니다.

STEP 2. PC·모바일 프레임 생성하기

화면설계 페이지로 이동합니다. 키보드에서 F를 눌러 프레임 도구를 선택합니다.

캔버스에 PC 화면 프레임을 만들고 오른쪽 속성 영역에서 너비를 1440px로 지정합니다. 높이는 실습 편의를 위해 1000px로 시작합니다.

같은 방법으로 모바일 프레임을 생성하고 너비 390px, 높이 844px로 설정합니다. 콘텐츠가 길어지면 프레임 높이를 늘려도 됩니다.

각 프레임 이름은 다음과 같이 설정합니다.

MYP-001_PC
MYP-001_MO

두 프레임은 동일한 마이페이지 기능을 서로 다른 화면 너비에서 표현하는 설계 초안입니다.

STEP 3. PC 마이페이지 구조 만들기

PC 프레임에 사각형 도구(R)와 텍스트 도구(T)를 사용해 주요 영역을 구분합니다.

이번 실습에서는 다음 영역을 만듭니다.

쇼핑몰 공통 헤더
마이페이지 좌측 메뉴
회원정보 요약
주문·배송 현황
쿠폰 및 적립금
최근 주문 내역

왼쪽에는 마이페이지 메뉴를 배치하고 오른쪽에는 회원정보와 주문 관련 콘텐츠를 배치합니다.

예를 들어 주문 내역 영역에는 주문일, 주문번호, 상품정보, 결제금액, 배송상태, 상세보기 버튼을 넣습니다.

실제 데이터 대신 예시 데이터를 사용할 수 있지만 각 항목이 어떤 기능과 연결되는지는 구분할 수 있어야 합니다.

STEP 4. 모바일 마이페이지 구조 만들기

바일 프레임에도 동일한 기능을 배치합니다. 다만 PC 화면을 그대로 축소하지는 않습니다.

작은 화면에서 정보의 중요도와 사용자 행동을 고려해 순서를 다시 정합니다.

모바일 공통 헤더
회원정보 요약
주문·배송 현황
쿠폰 및 적립금
마이페이지 주요 메뉴
최근 주문 내역 카드

PC의 주문 내역 테이블은 모바일에서 주문별 카드 형태로 표현합니다.

카드에는 주문일과 상품명, 배송상태, 상세보기 등의 필수 정보를 우선 표시합니다. 나머지 정보는 상세 화면에서 제공할 수 있습니다.

이때 정보를 숨기는 것과 삭제하는 것은 다릅니다. 모바일에서 바로 표시하지 않는 정보라도 필요한 경우 접근할 수 있는 경로를 정의해야 합니다.

STEP 5. 화면설계 설명 추가하기

화면을 배치했다면 기획 설명을 추가합니다. 화면 외부에 텍스트 영역을 만들고 구성 요소별 번호와 설명을 기록합니다.

예를 들어 다음과 같이 작성합니다.

MYP-001 마이페이지

① 회원정보 영역
로그인한 회원의 이름과 회원등급을 표시합니다.

② 주문·배송 현황
주문 상태별 건수를 표시하고, 선택 시 해당 상태의 주문 내역으로 이동합니다.

③ 최근 주문 내역
최근 주문 정보를 표시하며, 상세보기 선택 시 주문 상세 화면으로 이동합니다.

개발자는 화면에 버튼이 있다는 사실뿐 아니라 선택했을 때 어떤 동작이 발생하는지 알아야 합니다.

화면설계서에 기능 설명을 함께 작성하는 이유입니다.

5. 반응형 정책 작성 방법

PC와 모바일 화면을 만들었다면 두 화면의 차이를 정책으로 정리합니다.

화면설계서가 단순한 와이어프레임과 구분되는 부분입니다.

정책 ID	대상	정책 내용
POL-MYP-001	메뉴	PC에서는 좌측 메뉴를 표시하고, 모바일에서는 주요 메뉴와 전체 메뉴로 구분합니다.
POL-MYP-002	회원정보	모바일에서는 회원정보를 요약해 상단에 표시합니다. 상세 정보는 별도 화면에서 확인합니다.
POL-MYP-003	주문 현황	화면 크기에 따라 배치를 변경하되, 주문 상태별 조회 기능은 유지합니다.
POL-MYP-004	주문 내역	PC에서는 테이블, 모바일에서는 주문별 카드를 사용합니다. 주문 상세 이동 기능은 동일하게 제공합니다.
POL-MYP-005	정보 노출	모바일에서 생략한 상세 정보는 주문 상세 화면에서 확인할 수 있도록 합니다.

지금 작성한 정책은 확정된 서비스 요구사항이 아니라 실습용 정책 초안입니다.

실제 업무에서는 정책마다 적용 조건, 화면 전환 너비, 예외 상황, 관련 기능 요구사항을 추가해야 합니다.

기획자가 확인해야 할 예외 상황

상품명이 화면 너비보다 길어지는 경우
주문 내역이 없는 경우
배송 상태가 여러 개로 구분되는 경우
회원등급 정보가 없는 경우
모바일에서 버튼과 문구가 겹치는 경우

이러한 상황을 고려하지 않으면 개발 단계에서 정책을 다시 협의해야 할 수 있습니다.

6. 실무 팁 3가지

팁 1. 화면보다 기능 목록을 먼저 정리합니다

화면을 그리기 전에 필요한 정보와 기능부터 정의합니다.

쇼핑몰 마이페이지라면 주문 조회, 배송 조회, 회원정보 수정, 쿠폰 조회처럼 사용자가 실제로 수행할 일을 정리합니다.

그다음 PC와 모바일에서 각 기능을 어떤 방식으로 제공할지 결정합니다.

팁 2. PC 화면을 그대로 줄이지 않습니다

화면 크기가 아니라 사용자 행동을 기준으로 재구성합니다.

PC에서는 넓은 화면을 활용해 여러 정보를 동시에 제공할 수 있습니다.

모바일에서는 주요 정보부터 보여주고 세부 정보는 다음 화면에서 확인하도록 설계할 수 있습니다.

다만 단순화를 이유로 필수 기능의 접근성을 떨어뜨리지 않도록 주의해야 합니다.

팁 3. 화면과 정책을 함께 관리합니다

화면에 표시되지 않는 동작까지 문서에 기록합니다.

메뉴 선택 시 이동 화면, 주문 내역의 조회 조건, 화면 크기에 따른 정보 노출 방식 등을 정의해야 합니다.

피그마는 이러한 정보를 시각적으로 정리하는 데 유용합니다. 하지만 화면의 도형만으로 비즈니스 정책이 자동 정의되지는 않습니다.

7. 실습 결과물 확인

이번 실습이 끝났다면 다음 항목을 확인합니다.

☐ 쇼핑몰 마이페이지 피그마 파일 생성
☐ PC 1440px 프레임 생성
☐ 모바일 390px 프레임 생성
☐ 공통 기능 및 정보 영역 배치
☐ 화면별 구성 차이 정리
☐ 반응형 정책 초안 작성
☐ 버튼과 메뉴의 주요 동작 설명

여기까지 완성했다면 첫 번째 반응형 화면설계서 초안이 준비된 것입니다.

아직 화면 크기에 따라 요소가 자동으로 재배치되는 상태는 아닙니다. 이번 실습은 PC·모바일의 기본 구조와 기획 정책을 정의하는 단계입니다.

8. 자주 묻는 질문(FAQ)

Q1. 기획자도 피그마를 배워야 하나요?

피그마가 모든 프로젝트의 필수 도구는 아닙니다. 하지만 디자인과 개발 협업에 피그마를 사용하는 팀이라면 기획자가 화면 구조와 정책을 직접 확인하고 설명할 수 있다는 장점이 있습니다.

Q2. PC와 모바일 화면을 모두 만들어야 하나요?

반응형 전환으로 구조나 동작이 달라지는 경우에는 각각의 대표 화면을 작성하는 것이 도움이 됩니다.

모든 화면을 중복 작성하기보다 공통 규칙과 차이점이 발생하는 화면을 구분해 관리하는 것이 효율적입니다.

Q3. 피그마 오토 레이아웃은 반드시 사용해야 하나요?

화면설계 초안 단계에서 반드시 사용할 필요는 없습니다.

다만 오토 레이아웃을 활용하면 콘텐츠나 프레임 크기에 따른 요소의 배치 변화를 확인하는 데 도움이 됩니다.

이 기능은 후속 글에서 쇼핑몰 마이페이지를 예제로 다루겠습니다.

9. 마무리

이번 글에서는 피그마로 쇼핑몰 마이페이지의 PC·모바일 화면설계서 초안을 작성했습니다.

첫째, 기획자는 화면 구조보다 사용자 기능과 정책을 먼저 생각해야 합니다.

둘째, 반응형 화면설계에서는 정보 배치뿐 아니라 기능의 동작과 노출 조건을 정의해야 합니다.

셋째, 피그마는 화면과 정책을 함께 정리하고 협업하는 도구로 활용할 수 있습니다.

다음 글에서는 기획자가 화면설계서를 작성할 때 자주 사용하는 피그마 기본 기능을 살펴보겠습니다. 프레임, 도형, 텍스트, 레이어를 중심으로 쇼핑몰 마이페이지를 조금 더 구체화할 예정입니다.

참고 자료

이 글은 2026.10 기준으로 작성되었으며, 피그마 기능과 UI는 변경될 수 있습니다. 최신 내용은 공식 문서를 확인하시기 바랍니다.

이 블로그 검색

기획자의 작업대