피그마로 웹 페이지 시안 만들기 – 비개발자를 위한 입문서

웹사이트를 만들기 전, 시각적으로 레이아웃을 그려보는 작업을 ‘웹페이지 시안 디자인’이라고 합니다. 전문 디자이너가 아니어도, 피그마(Figma)를 활용하면 누구나 손쉽게 시안을 그려볼 수 있습니다. 이번 글에서는 피그마로 웹페이지 시안을 만드는 과정을 단계별로 소개합니다.

1. 왜 웹페이지 시안이 필요한가요?

시안을 미리 설계하면 다음과 같은 장점이 있습니다:

사이트 구조를 사전에 시각화하여 혼선을 줄일 수 있음
클라이언트나 개발자와의 소통이 쉬움
디자인과 콘텐츠를 명확히 분리 가능

2. 피그마 프로젝트 시작하기

Step 1: Figma 접속 후 로그인
Step 2: ‘New Design File’ 클릭
Step 3: ‘Frame’ 툴로 웹 페이지 크기 설정 (예: Desktop 1440px)

3. 기본 구성요소 배치하기

일반적인 웹 페이지의 기본 구조는 다음과 같습니다:

Header: 로고 + 메뉴바
Hero Section: 메인 이미지 + CTA 버튼
Content Area: 텍스트, 이미지, 카드형 레이아웃
Footer: 연락처, SNS 링크, 저작권 정보

각 영역은 사각형 도형(Rectangle)으로 표현하고, Text Tool을 활용해 설명을 추가합니다.

4. 실습 예제: 랜딩페이지 시안 만들기

간단한 프로모션 랜딩페이지를 구성해보겠습니다:

상단 Frame → 로고(텍스트), 메뉴(텍스트 4개)
중앙 Frame → 큰 이미지(Rectangle) + “지금 시작하기” 버튼
하단 Frame → 3열 정보 카드 + 문의하기 버튼

각 요소는 색상을 구분하여 시각적으로 영역을 나누고, Auto Layout 기능을 활용하면 배치 정렬이 쉬워집니다.

5. 피그마의 UI Kit 활용하기 (선택)

피그마 커뮤니티에는 무료 UI 컴포넌트가 다양하게 제공됩니다. 예를 들어:

버튼, 네비게이션 바, 카드 등 미리 디자인된 요소 삽입 가능
검색창에 “Web UI Kit” 또는 “Landing Page Template” 입력
복사-붙여넣기만으로 시안 속도 향상

6. 시안 공유 및 피드백 받기

디자인이 끝나면 상단 ‘Share’ 버튼을 클릭하여 URL 공유가 가능합니다. 상대방은 설치 없이 웹 브라우저에서 바로 시안을 확인하고 댓글로 피드백을 남길 수 있습니다.

7. 마무리 – 기획 단계에서 돋보이는 디자이너 되기

웹 페이지 시안을 피그마로 먼저 설계하면 실제 제작 과정에서 시행착오를 줄일 수 있고, 팀 내 협업 효율도 높아집니다. 기획자나 마케터, 또는 1인 창업자라도 피그마 하나면 디자인 의사소통이 한결 쉬워집니다. 다음 편에서는 모바일 앱 UI 시안 제작을 다룰 예정입니다.

홍댕이 일상

[4편] 피그마로 웹 페이지 시안 만들기 – 비개발자를 위한 입문서