웹디자인 레퍼런스 활용법, 시안 작업에서 참고할 요소

웹디자인 시안을 만들기 전에 여러 사이트를 찾아보는 경우가 많습니다. 마음에 드는 화면을 저장해두고 색상이나 레이아웃을 참고하기도 하고, 비슷한 업종의 홈페이지를 살펴보면서 전체 분위기를 정하기도 합니다.

그런데 레퍼런스를 많이 모아도 실제 시안 작업에서 어디를 참고해야 할지 정하지 않으면 자료만 쌓이기 쉽습니다. 한 사이트에서는 메인 배너가 마음에 들고, 다른 사이트에서는 카드 구성이 좋아 보여 여러 요소를 섞다 보면 한 화면 안에서 분위기가 제각각으로 보일 수도 있습니다.

레퍼런스 한 장을 그대로 따라가기보다 어떤 요소가 현재 작업에 맞는지 구분해보면 시안 방향을 잡기가 훨씬 수월합니다.

레퍼런스를 찾기 전에 제작할 화면부터 정리해보세요

웹디자인 레퍼런스를 찾기 시작하면 눈에 띄는 디자인을 계속 저장하게 됩니다. 이때 제작하려는 페이지의 성격이 정리되어 있지 않으면 서로 다른 목적의 화면이 한데 섞일 수 있습니다.

회사 홈페이지 메인 화면을 만든다면 회사 소개, 주요 서비스, 포트폴리오, 문의 영역처럼 어떤 내용을 보여줄지 먼저 생각해볼 수 있습니다.

서비스 소개 페이지라면 긴 설명을 읽기 쉽게 나누는 방법이 필요할 수 있고, 포트폴리오 페이지라면 이미지 비중이나 프로젝트 목록을 보여주는 방식이 더 눈에 들어올 수 있습니다.

같은 웹디자인이라도 페이지마다 참고해야 할 부분이 달라집니다.

전체 분위기보다 화면 구조를 먼저 살펴봅니다

레퍼런스를 처음 보면 색상이나 이미지가 먼저 눈에 들어옵니다. 실제 시안에 적용할 부분을 찾을 때는 화면이 어떻게 나뉘어 있는지도 같이 살펴보세요.

첫 화면에는 제목과 설명이 어디에 놓여 있는지, 이미지가 화면의 어느 정도를 차지하는지, 다음 콘텐츠로 넘어갈 때 어떤 간격을 두는지 등을 볼 수 있습니다.

아래쪽으로 내려가면서 콘텐츠가 어떤 순서로 이어지는지도 참고할 만합니다.

예를 들어 메인 배너 다음에 바로 서비스 영역이 나오는지, 회사 소개를 먼저 보여주는지, 사례나 실적을 앞쪽에 배치하는지에 따라 같은 내용이라도 화면의 흐름이 달라집니다.

이런 구조를 보다 보면 특정 디자인을 그대로 가져오지 않아도 현재 작업에 필요한 레이아웃 방향을 잡을 수 있습니다.

제목과 본문의 크기 차이도 레퍼런스에서 확인할 수 있습니다

웹디자인 시안에서는 글자 크기만 달라져도 화면의 인상이 크게 달라집니다.

메인 카피와 설명 문구의 크기 차이가 얼마나 나는지, 섹션 제목과 본문 사이에는 어느 정도 여백이 있는지, 강조 문구에는 어떤 굵기를 사용하는지 살펴보세요.

큰 제목을 많이 사용하는 사이트라고 해서 모든 영역의 글씨가 큰 것은 아닙니다. 시선이 먼저 가야 하는 문구와 보조 설명 사이에 크기와 굵기 차이를 두면서 화면의 순서를 만드는 경우가 많습니다.

레퍼런스를 볼 때는 폰트 이름 자체보다 이런 차이를 먼저 확인하는 편이 실제 시안에 적용하기 쉽습니다.

같은 글꼴을 사용하지 않아도 제목, 부제목, 본문, 버튼 문구가 어떤 단계로 나뉘어 있는지 참고할 수 있기 때문입니다.

여백은 비어 있는 공간이 아니라 레이아웃의 일부입니다

디자인을 참고하다 보면 카드나 이미지처럼 눈에 보이는 요소에 집중하기 쉽습니다. 화면이 깔끔해 보이는 이유를 살펴보면 요소 사이의 여백이 큰 역할을 하는 경우도 많습니다.

제목 아래에 본문이 얼마나 떨어져 있는지, 하나의 섹션이 끝나고 다음 섹션까지 어느 정도 공간을 두는지, 카드 안쪽에는 텍스트와 테두리 사이에 얼마만큼 여유가 있는지를 확인해보세요.

비슷한 크기의 이미지와 텍스트를 사용해도 여백을 어떻게 두느냐에 따라 답답하거나 여유로운 화면으로 달라집니다.

특히 여러 레퍼런스를 함께 참고할 때는 여백 기준이 지나치게 다르지 않은지 살펴볼 필요가 있습니다.

한 영역에서는 요소를 촘촘하게 붙이고 다른 영역에서는 간격을 크게 벌려놓으면 서로 다른 디자인을 이어 붙인 것처럼 보일 수 있습니다.

버튼과 카드는 반복되는 형태를 기준으로 봅니다

웹사이트 안에서는 같은 형태의 버튼이나 카드가 여러 번 등장합니다.

레퍼런스에서도 한 개의 버튼 모양만 보는 것보다 해당 스타일이 다른 영역에서 어떻게 반복되는지 살펴보는 것이 좋습니다.

버튼의 높이와 모서리 형태, 아이콘 위치, 글자 크기처럼 반복되는 특징을 볼 수 있고, 카드에서는 이미지 비율이나 제목과 설명의 위치, 테두리와 그림자의 사용 방식 등을 참고할 수 있습니다.

시안 작업에서도 이런 요소의 기준을 어느 정도 정해두면 새로운 영역을 추가할 때마다 디자인을 다시 만들지 않아도 됩니다.

예를 들어 메인에서 사용한 기본 버튼과 같은 스타일을 서브페이지에서도 이어서 사용하거나, 카드의 모서리와 이미지 비율을 일정하게 맞추는 방식입니다.

이미지가 차지하는 비율도 함께 살펴보세요

같은 내용의 홈페이지라도 이미지를 얼마나 크게 사용하는지에 따라 분위기가 달라집니다.

화면 전체를 채우는 큰 사진을 사용하는 사이트도 있고, 텍스트 옆에 작은 이미지 여러 개를 배치하는 경우도 있습니다. 제품이나 공간 사진을 중심으로 보여주는 디자인과 텍스트 설명의 비중이 높은 디자인도 구성이 다릅니다.

레퍼런스의 이미지가 멋있다는 이유만으로 같은 크기로 적용하면 실제 가지고 있는 자료와 맞지 않을 수 있습니다.

현재 프로젝트에서 사용할 사진의 수와 해상도, 가로·세로 비율을 생각하면서 참고하는 것이 좋습니다.

큰 비주얼을 사용한 레퍼런스를 선택했다면 실제로도 그 정도 크기로 보여줄 만한 이미지가 준비되어 있는지 확인할 수 있습니다. 사용할 사진이 많지 않다면 작은 이미지와 텍스트를 조합한 구성에서 아이디어를 얻는 편이 자연스러울 수 있습니다.

한 가지 스타일만 보지 말고 필요한 요소별로 나눠볼 수 있습니다

레퍼런스는 꼭 하나의 사이트만 기준으로 삼을 필요는 없습니다.

첫 화면 구성은 A 사이트가 잘 맞고, 서비스 영역은 B 사이트가 보기 편할 수도 있습니다. 포트폴리오 카드나 footer 구성은 또 다른 사이트에서 참고할 만한 부분이 있을 수 있습니다.

이럴 때는 각 레퍼런스의 역할을 나누어두면 시안을 정리하기 쉽습니다.

예를 들어 하나는 전체 레이아웃, 하나는 타이포그래피와 여백, 하나는 카드 스타일을 참고하는 식입니다.

다만 여러 자료를 섞을수록 최종 시안에서는 다시 한 번 기준을 맞춰야 합니다. 버튼의 모서리나 카드 형태, 제목의 굵기, 색상 사용 방식처럼 반복되는 부분은 한 사이트 안에서 같은 디자인처럼 보이도록 정리해야 합니다.

PC와 모바일 레퍼런스는 따로 확인해보세요

PC 화면이 마음에 든다고 해서 모바일에서도 같은 구성이 그대로 이어지는 것은 아닙니다.

가로로 넓은 메인 배너가 모바일에서는 이미지와 텍스트로 분리될 수 있고, 세 개나 네 개의 카드가 한 줄에 놓인 영역은 세로로 이어지거나 슬라이드 형태로 바뀔 수 있습니다.

메뉴 형태도 PC와 모바일에서 크게 달라지는 부분입니다.

그래서 반응형 시안을 만든다면 PC 레퍼런스를 저장할 때 모바일 화면도 함께 확인해보는 것이 좋습니다.

특히 어떤 콘텐츠를 먼저 보여주는지 살펴볼 만합니다. PC에서는 이미지와 텍스트가 나란히 있지만 모바일에서는 어느 요소가 먼저 나오는지, 장식 요소가 그대로 유지되는지, 긴 제목은 몇 줄 정도로 바뀌는지 등을 볼 수 있습니다.

이런 부분은 디자인을 작은 화면에 맞게 단순히 축소하는 것보다 훨씬 실질적인 참고 자료가 됩니다.

같은 업종의 레퍼런스만 볼 필요는 없습니다

병원 홈페이지를 만든다고 해서 병원 사이트만 참고해야 하는 것은 아닙니다.

깔끔한 카드 배치가 필요하다면 다른 업종의 서비스 페이지를 볼 수 있고, 이미지 중심의 포트폴리오 구성이 필요하다면 인테리어나 건축 관련 사이트에서 아이디어를 얻을 수도 있습니다.

업종이 달라도 필요한 화면의 성격이 비슷하다면 참고할 부분이 있습니다.

반대로 같은 업종이라는 이유만으로 현재 프로젝트와 분위기가 맞지 않는 레퍼런스를 사용할 필요도 없습니다.

실제 시안에서는 업종뿐 아니라 콘텐츠 양, 사용할 이미지, 브랜드 분위기, 페이지 목적을 함께 고려하게 됩니다.

디자인키트 자료를 볼 때도 같은 기준을 적용할 수 있습니다

디자인키트에서 웹디자인 자료를 살펴볼 때도 화면 전체의 분위기만 보는 것보다 실제 작업에 활용할 부분을 나누어 확인할 수 있습니다.

제품에 따라 PSD에서는 메인 디자인을, Figma에서는 메인 와이어프레임을 확인할 수 있으며 HTML 소스가 포함된 제품에서는 실제 화면 구조와 함께 HTML, CSS, JavaScript 파일을 살펴볼 수 있습니다.

업종별 반응형 템플릿을 확인할 때도 메인 배너만 보는 것이 아니라 콘텐츠가 어떤 순서로 구성되어 있는지, 카드나 버튼이 어떤 기준으로 반복되는지, 서브페이지가 어떤 흐름으로 이어지는지 살펴보면 실제 시안이나 제작 작업에 참고하기 쉽습니다.

제품마다 포함된 자료와 구성은 다를 수 있으므로 필요한 파일이 무엇인지 먼저 확인한 뒤 작업 목적에 맞는 자료를 선택하면 됩니다.

레퍼런스를 모은 뒤에는 실제 시안 기준으로 다시 정리합니다

레퍼런스를 충분히 모았다면 그대로 쌓아두기보다 실제 시안에서 사용할 요소를 한 번 추려보세요.

화면 구성은 어느 자료를 참고할지, 제목과 본문의 분위기는 어떻게 가져갈지, 버튼과 카드는 어떤 스타일로 통일할지 정도만 정리해도 작업 방향이 훨씬 또렷해집니다.

이때 모든 레퍼런스의 특징을 한 화면에 넣을 필요는 없습니다. 현재 프로젝트에 필요한 요소만 남기고 나머지는 제외하는 과정도 필요합니다.

레퍼런스에서 마음에 들었던 디자인이 실제 콘텐츠와 맞지 않는 경우도 있습니다. 큰 이미지를 사용할 자료가 부족하거나, 짧은 문구를 전제로 한 레이아웃에 긴 설명이 들어가야 한다면 다른 구성을 선택하는 편이 자연스럽습니다.

최종 시안에서는 참고했던 사이트보다 현재 넣어야 할 콘텐츠가 안정적으로 들어가는지를 기준으로 다시 확인해보세요.

자주 묻는 질문

레퍼런스는 시안의 방향을 잡는 자료로 활용해보세요

웹디자인 레퍼런스를 많이 보는 것만으로 시안의 방향이 자동으로 정해지지는 않습니다.

현재 만들려는 페이지에 필요한 구조를 먼저 생각하고, 레퍼런스에서 레이아웃과 타이포그래피, 여백, 이미지, 버튼과 카드처럼 실제로 참고할 요소를 골라보세요.

여러 자료를 참고했다면 최종 시안에서는 다시 하나의 기준으로 정리하는 과정도 필요합니다. 각 요소가 따로 눈에 띄기보다 같은 홈페이지 안에서 자연스럽게 이어지는지 확인하면 됩니다.

디자인키트의 PSD, Figma, HTML 자료를 활용할 때도 필요한 작업 범위를 먼저 확인하고 각 자료에서 참고할 부분을 나누어 살펴보면 시안 작업과 이후 제작 방향을 잡기가 수월합니다.

디자인키트 HTML 소스 가격 개편

시안 이후 실제 홈페이지 제작에 활용할 HTML 소스가 필요하다면 디자인키트의 HTML 소스도 함께 살펴볼 수 있습니다.

HTML 소스 가격은 165,000원에서 39,000원으로 개편되었습니다.

가격 개편 내용 자세히 보기 →

작성자: 디자인키트

작성일: 2026.10.13

최종 수정일: 2026.10.13