와이어프레임과 시안은 웹사이트의 화면 구성을 실제 콘텐츠를 만들기 전에 도형과 더미 콘텐츠로 먼저 확인하는 디자인 작업 단계입니다. 웹 브라우저에서 사용할 수 있는 와이어프레임, 프로토타입, 목업, 더미 콘텐츠, 디자인 에셋 도구를 대상으로 합니다.
← 모음
웹사이트 와이어프레임·시안 작업 도구 모음: 로렘 입숨, 프로토타입, 목업
홈페이지 기획과 시안 단계에서 쓰는 로렘 입숨 생성기, 더미 이미지, 와이어프레임·프로토타입·목업 도구, 색상·아이콘 에셋을 작업 순서대로 모았습니다.
소스
Lorem IpsumLorem Ipsum은 디자인과 레이아웃 테스트를 위한 표준 더미 텍스트 생성 도구이다.
Hipster IpsumHipster Ipsum은 힙스터 스타일의 더미 텍스트를 생성하는 도구이다.한글 Lorem Ipsum한글 Lorem Ipsum은 한글 레이아웃 테스트를 위한 더미 텍스트 생성 도구이다.
- LipsumLipsum은 로렘 입숨 텍스트를 단락, 단어, 문자 수 단위로 생성하는 웹 생성기이다.
- Placehold.coPlacehold.co는 크기와 문구를 주소에 지정해 플레이스홀더 이미지를 만드는 서비스이다.
- Lorem PicsumLorem Picsum은 크기를 지정해 무작위 사진을 플레이스홀더로 불러오는 서비스이다.
FigmaFigma는 웹 기반으로 화면 디자인과 협업을 하는 디자인 도구이며, 커뮤니티에서 템플릿과 UI 키트를 공유한다.- PenpotPenpot은 웹 표준 기반으로 디자인과 프로토타입을 만드는 오픈소스 디자인 도구이다.
- BalsamiqBalsamiq은 손으로 그린 듯한 저해상도 와이어프레임을 빠르게 만드는 도구이다.
- WhimsicalWhimsical은 와이어프레임, 플로차트, 마인드맵을 하나의 화면에서 작성하는 웹 도구이다.
- ExcalidrawExcalidraw는 손그림 스타일로 도형과 화면 스케치를 그리는 오픈소스 웹 화이트보드이다.
- Wireframe.ccWireframe.cc는 최소한의 도구로 와이어프레임을 그리는 웹 서비스이다.
- SmartmockupsSmartmockups는 디자인을 기기와 제품 이미지에 넣어 목업을 만드는 웹 서비스이다.
- PlaceitPlaceit은 템플릿에 이미지를 넣어 목업과 디자인 결과물을 만드는 온라인 서비스이다.
- CoolorsCoolors는 색상 팔레트를 생성하고 저장하는 웹 서비스이다.
Font AwesomeFont Awesome는 웹사이트에서 가장 널리 쓰이는 아이콘 폰트 및 SVG 툴킷으로, 무료 버전만으로도 수천 개의 아이콘을 제공한다. CSS 클래스 기반으로 손쉽게 적용할 수 있어 SNS 로고, UI 아이콘 등에 널리 활용된다.
와이어프레임과 시안 작업 흐름
| 단계 | 작업 | 필요한 요소 |
|---|---|---|
| 기획 | 화면 구성과 메뉴 구조 정리 | 스케치, 플로차트 |
| 와이어프레임 | 영역 배치와 콘텐츠 위치 | 도형, 더미 텍스트 |
| 시안 | 색상, 타이포그래피, 이미지 적용 | 더미 텍스트, 더미 이미지, 색상 팔레트, 아이콘 |
| 목업 | 기기·제품 화면에 시안 적용 | 목업 템플릿 |
| 퍼블리싱 | 코드 작업, 반응형 확인 | 더미 콘텐츠 |
로렘 입숨의 용도
로렘 입숨, Lorem Ipsum은 일종의 더미 텍스트(dummy text)로, 출판, 타이포그래피, 그래픽 디자인 등의 분야에서 사용되는 표준 채우기 텍스트입니다. 이는 주로 미완성된 디자인이나 레이아웃의 시각적인 효과를 미리 볼 때 사용됩니다.
로렘 입숨은 라틴어를 기반으로 한 가상의 텍스트이며, 의미가 없는 단어와 문장으로 이루어져 있습니다. 그래서 글쓰기나 디자인에 집중할 수 있도록 미완성인 부분을 임시로 채우는 데 유용하게 쓰이며, 주로 "Lorem ipsum dolor sit amet, consectetur adipiscing elit"이라는 문장이 자주 사용됩니다.
로렘 입숨 생성기
| 도구 | 용도 |
|---|---|
| Lorem Ipsum | 표준 더미 텍스트 생성 |
| Hipster Ipsum | 힙스터 스타일 더미 텍스트 |
| 한글 Lorem Ipsum | 한글 레이아웃 테스트용 더미 텍스트 |
| Lipsum | 단락·단어·문자 수 단위 생성 |
한글, 영문, 숫자 예문
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 가나다라마바사 @#$%! Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 12345 한글 로렘입숨은 디자인 프로젝트에서 빠른 텍스트 채우기에 유용합니다.
Aliquam erat volutpat. Sed at tortor id odio maximus feugiat in vitae justo. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 가나다라마바사 67890 @#$%! Lorem ipsum dolor sit amet, consectetur adipiscing elit. 한글 로렘입숨은 디자인 작업에서 텍스트의 양을 빠르게 채우는 데 도움이 됩니다. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
한글 예문
한 여름 날, 햇살이 뜨거운 대지 위에 서 있었다. 구름 없는 하늘은 푸르게 펼쳐져 있었고, 바람은 산들에게 부는 시원한 숨결이었다. 나뭇잎은 푸른 그늘을 만들어내고, 꽃들은 화사한 색으로 그 향기를 퍼뜨리고 있었다. 새들은 하늘을 날아다니며 자유를 느끼고, 강물은 산악 지형을 따라 흐르며 시원함을 전했다.
나는 이 자연의 아름다움을 느끼며 마음 속에 평화를 느꼈다. 시간의 흐름은 멈추어 있었고, 순간의 아름다움에 마음이 채워졌다. 이곳은 고요와 조화가 공존하는 곳이었다. 나는 소중한 순간을 간직하며, 자연과 하나가 되었다. 이 순간을 영원히 기억하며, 이 아름다움을 나누고 싶었다.
영문 예문
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consequat, est eu volutpat laoreet, neque lectus mattis nulla, id condimentum est mi vel metus. Integer sed massa eget justo consequat fermentum. Suspendisse potenti. Proin et magna nec dui fringilla tristique vel non ex. Curabitur id felis efficitur, cursus ipsum vel, venenatis mi. Fusce id congue eros.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Ut rutrum, leo ac porttitor lacinia, tellus magna viverra tellus, vitae condimentum nunc enim a diam. Mauris interdum nisl nec vulputate tincidunt. Proin tempus, dolor at porta aliquam, mi magna feugiat neque, in consectetur enim sapien a enim. Nulla facilisi. Nam auctor elementum diam vitae congue.
더미 이미지
| 도구 | 용도 |
|---|---|
| Placehold.co | 크기·문구를 주소로 지정하는 플레이스홀더 이미지 |
| Lorem Picsum | 크기를 지정해 무작위 사진을 불러오는 플레이스홀더 |
와이어프레임·프로토타입 도구
| 도구 | 용도 | 특징 |
|---|---|---|
| Figma | 화면 디자인, 프로토타입 | 웹 기반 협업 |
| Penpot | 화면 디자인, 프로토타입 | 오픈소스 |
| Balsamiq | 와이어프레임 | 저해상도 스케치 스타일 |
| Whimsical | 와이어프레임, 플로차트 | 마인드맵 함께 작성 |
| Excalidraw | 화면 스케치 | 손그림 스타일 |
| Wireframe.cc | 와이어프레임 | 최소 도구 구성 |
목업과 디자인 에셋
| 분류 | 도구 | 용도 |
|---|---|---|
| 목업 | Smartmockups | 기기·제품 이미지에 시안 적용 |
| 목업 | Placeit | 템플릿 기반 목업 생성 |
| 색상 | Coolors | 색상 팔레트 생성 |
| 아이콘 | Font Awesome | 아이콘 세트와 아이콘 폰트 |
Font Awesome는 웹사이트에서 가장 널리 쓰이는 아이콘 폰트 및 SVG 툴킷으로, 무료 버전만으로도 수천 개의 아이콘을 제공한다. CSS 클래스 기반으로 손쉽게 적용할 수 있어 SNS 로고, UI 아이콘 등에 널리 활용된다.
도구 선택 기준
| 기준 | 확인 항목 |
|---|---|
| 작업 단계 | 와이어프레임, 시안, 목업 |
| 정밀도 | 저해상도 스케치, 고해상도 시안 |
| 협업 | 공유 링크, 동시 편집 |
| 비용 구조 | 무료 플랜 범위, 유료 전환 조건 |
| 출력 형태 | 이미지, 링크, 코드 |
템플릿·디자인 플랫폼은 디자인 플랫폼·템플릿 사이트 모음, jQuery 기반 UI는 jQuery 플러그인 모음과 함께 보면 역할이 나뉩니다.
등록조회1