웹디자인 템플릿, 피그마로 수정할 때 어디부터 바꿀까?

웹디자인 템플릿을 피그마로 열면 이미 기본적인 레이아웃이 잡혀 있습니다. 처음부터 화면을 설계하지 않아도 되기 때문에 작업을 시작하기는 수월한 편입니다.

그런데 실제 프로젝트에 맞춰 수정하기 시작하면 이야기가 조금 달라집니다. 회사명을 넣었더니 제목이 두 줄로 바뀌고, 예시 사진을 실제 이미지로 교체하니 기존 레이아웃이 어색해지는 경우가 있습니다. 필요 없는 영역을 삭제하면서 페이지 흐름이 달라질 수도 있습니다.

그래서 피그마로 웹디자인 템플릿을 수정할 때는 전체 페이지 구성을 먼저 확인하고 실제 콘텐츠를 넣은 뒤, 컬러와 폰트 같은 디자인 요소를 맞춰가는 순서 가 편합니다.

처음에는 전체 페이지부터

파일을 열자마자 버튼 색이나 글자 크기부터 바꾸기보다는 메인 화면을 위에서 아래까지 한 번 훑어보세요.

메인 비주얼 다음에는 어떤 내용이 나오는지, 서비스나 제품은 어디에 배치되어 있는지, 포트폴리오나 문의 영역은 실제 홈페이지에도 필요한지 먼저 확인합니다.

예를 들어 제품을 먼저 보여줘야 하는 사이트라면 관련 영역을 앞쪽으로 옮길 수 있고, 포트폴리오가 중요한 업종이라면 해당 섹션의 비중을 더 크게 잡을 수 있습니다. 실제로 필요하지 않은 내용은 빼도 됩니다.

이렇게 사용할 섹션과 제외할 부분을 먼저 정해두면, 나중에 문구와 이미지를 모두 바꾼 뒤 다시 전체 구조를 손보는 일을 줄일 수 있습니다.

실제 문구를 먼저 넣어보면

웹디자인 템플릿에는 레이아웃을 보여주기 위한 예시 문구가 들어 있는 경우가 많습니다.

하지만 실제 회사명이나 서비스명을 넣으면 문장의 길이가 달라지고, 그에 따라 화면도 달라집니다.

한 줄이었던 메인 제목이 두 줄로 내려가거나, 카드 설명이 길어지면서 높이가 달라질 수 있습니다. 메뉴명이 길다면 헤더 간격도 다시 맞춰야 할 수 있습니다.

제목 크기를 줄여야 하는지, 여백을 더 줘야 하는지, 카드 폭이나 높이를 조정해야 하는지도 자연스럽게 확인할 수 있습니다.

컬러와 폰트는 한 번에 정리

브랜드 컬러를 적용할 때 버튼 하나씩 따로 바꾸다 보면 같은 색을 사용하는 다른 요소를 놓치기 쉽습니다.

먼저 기존 템플릿에서 메인 컬러가 어디에 쓰이고 있는지 살펴보세요. 버튼뿐 아니라 제목, 아이콘, 선, 카드 배경에도 같은 색이 반복되어 있을 수 있습니다.

Figma 파일에 Color Style이나 Variable이 연결되어 있다면 공통 컬러를 바꿀 때 활용할 수 있습니다.

폰트도 함께 확인해야 합니다. 같은 크기라도 글꼴에 따라 글자 폭이 달라서 기존에는 두 줄이던 제목이 세 줄로 늘어나거나, 메뉴 사이가 갑자기 좁아 보일 수 있습니다.

특히 메인 제목과 섹션 제목, 본문, 메뉴처럼 자주 보이는 텍스트는 한 번씩 다시 확인해보는 게 좋습니다.

이미지를 바꾸면 화면도 달라집니다

템플릿에 들어 있던 예시 이미지와 실제 사용할 사진은 비율이나 구도가 다를 가능성이 큽니다.

가로로 넓은 영역에 세로 사진을 넣으면 주요 피사체가 잘릴 수 있고, 인물 사진은 얼굴 위치에 따라 옆의 텍스트와 균형이 달라지기도 합니다.

그래서 사진을 교체했다면 크기만 맞는지 보지 말고 어디가 잘리는지, 텍스트와 함께 놓였을 때 자연스러운지까지 확인해야 합니다.

여러 개의 카드에 이미지가 들어가는 화면이라면 사진끼리의 분위기도 함께 보세요. 밝기나 구도가 크게 다르면 같은 카드 디자인을 사용해도 화면이 어수선해 보일 수 있습니다.

실제 사진을 넣은 뒤 레이아웃이 어색하다면 이미지 영역의 비율을 조금 조정하거나, 사진 자체를 다시 선택하는 쪽이 더 자연스러울 때도 있습니다.

버튼과 카드가 제각각이라면

홈페이지 안에서는 같은 역할의 버튼이나 카드가 여러 번 반복됩니다.

수정하다 보면 한쪽 버튼은 조금 더 크고, 다른 화면에서는 글자 크기나 여백이 다르게 들어가는 일이 생길 수 있습니다.

이런 요소는 하나를 기준으로 정해두면 화면 전체가 훨씬 정돈됩니다.

Figma에서 Component로 만들어진 요소라면 원본을 수정해 여러 화면에 같은 스타일을 반영할 수 있습니다. Auto Layout이 적용되어 있다면 문구 길이가 바뀌어도 내부 간격을 맞추기 수월합니다.

모든 요소를 똑같이 만들 필요는 없습니다. 같은 역할을 하는 요소끼리만 기준을 맞춰도 충분합니다.

섹션을 바꿨다면 전체 흐름 다시 보기

필요 없는 영역을 삭제하거나 섹션 순서를 바꾸고 나면 앞뒤 화면의 분위기도 달라집니다.

예를 들어 중간에 있던 진한 배경 영역을 삭제했더니 흰색 섹션이 길게 이어질 수도 있고, 카드형 콘텐츠가 연달아 붙으면서 비슷한 화면이 반복되는 것처럼 보일 수도 있습니다.

어느 구간이 유난히 길지는 않은지, 너무 비어 보이는 부분은 없는지, 비슷한 레이아웃이 계속 이어지지는 않는지 확인해보세요.

개별 섹션에서는 괜찮아 보였던 디자인도 전체로 보면 흐름이 어색한 경우가 있습니다.

모바일 화면은 따로 봐야 합니다

PC 화면에서 자연스럽게 보였던 구성이 모바일에서도 그대로 들어가는 것은 아닙니다.

이미지와 텍스트가 좌우로 배치된 영역은 모바일에서 위아래로 쌓이고, 여러 개가 한 줄에 있던 카드는 배치가 달라집니다. PC에서는 한두 줄이었던 제목도 작은 화면에서는 더 길어질 수 있습니다.

그래서 모바일 화면에서는 PC 디자인을 단순히 줄이기보다는 콘텐츠 순서와 간격을 다시 잡는 과정이 필요합니다.

특히 첫 화면이나 카드가 많은 영역, 이미지와 설명이 나란히 들어간 섹션은 모바일에서 무엇을 먼저 보여줄지 미리 정해두는 게 좋습니다.

제목 크기, 버튼 폭, 이미지 위치처럼 작은 화면에서 달라질 부분도 이때 함께 확인할 수 있습니다.

디자인키트 Figma 자료는 어디까지?

디자인키트의 Figma 자료는 메인 페이지 와이어프레임으로 제공됩니다.

완성된 메인 디자인은 PSD로 구분되어 있으며, Figma와 PSD에는 모바일 시안이 포함되지 않습니다.

Figma 자료에서는 메인 화면의 큰 레이아웃과 콘텐츠 배치를 확인할 수 있습니다. 메인 비주얼이 어느 정도 크기로 들어가는지, 각 영역이 어떤 순서로 이어지는지, 카드나 콘텐츠가 어떻게 배치되어 있는지 살펴보면서 실제 프로젝트에 맞게 구조를 잡을 수 있습니다.

완성된 디자인 원본이 필요한 작업이라면 PSD를, 실제 웹페이지 구현까지 이어지는 작업이라면 해당 상품에 HTML 소스가 포함되어 있는지도 함께 확인하면 됩니다.

디자인키트 상품마다 제공되는 파일 구성이 다를 수 있으므로 작업에 필요한 파일이 무엇인지 먼저 정한 뒤 상품 구성을 확인하는 방식이 가장 깔끔합니다.

마지막에는 처음부터 다시 내려보기

수정이 어느 정도 끝났다면 첫 화면부터 마지막까지 다시 한 번 내려보세요.

이때는 세부 요소 하나하나보다 전체적으로 어색한 부분이 없는지 보는 게 더 중요합니다.

실제 문구를 넣은 뒤 제목이 지나치게 길어지지는 않았는지, 이미지 분위기가 갑자기 달라지는 곳은 없는지, 같은 역할의 버튼이나 카드가 화면마다 다르게 보이지 않는지 살펴봅니다.

퍼블리싱까지 이어질 예정이라면 슬라이드나 버튼 이동, 마우스 오버처럼 화면만 보고는 알기 어려운 동작도 간단하게 표시해두면 됩니다.

별도의 긴 설명서를 만들 필요는 없습니다. 구현하면서 다시 확인해야 할 부분만 알아볼 수 있게 정리해두면 충분합니다.

피그마에서 웹디자인 템플릿을 수정할 때는 처음부터 모든 디자인을 바꾸려고 할 필요가 없습니다.

페이지 구성을 먼저 정리하고 실제 문구와 이미지를 넣은 뒤, 컬러와 폰트, 반복 요소를 맞춰가는 순서로 작업하면 수정해야 할 부분이 훨씬 분명해집니다.

자주 묻는 질문

작성자 디자인키트

작성일 2026-10-19

최종 수정일 2026-10-19