AI에게 홈페이지나 앱 화면을 시켜 본 분이라면 같은 경험을 하셨을 겁니다. 결과는 나오는데 어디선가 본 듯한 평범한 화면입니다. 이럴 때 가장 먼저 손볼 곳은 프롬프트의 말솜씨가 아니라 AI에게 보여 줄 참고 자료입니다. 그래서 2026년 10월 29일 기준으로 디자인 참고 사이트 5곳을 한 번에 정리했습니다.
목차
먼저 답부터 적습니다. 디자인 참고 사이트 5곳은 역할이 다릅니다. 구성을 고르는 곳 둘, 장면과 배경을 만드는 곳 둘, 결과물을 영상으로 보여 주는 곳 하나입니다. 이 순서대로 쓰면 AI에게 “예쁘게 만들어 줘”라고 하는 대신 “이 구성에, 이 배경으로”라고 말할 수 있습니다. 디자인 참고 사이트를 먼저 보고 시키는 것만으로 결과의 방향이 잡힙니다.
이 글은 써 본 후기가 아닙니다. 5곳의 공식 사이트를 직접 열어 확인한 내용만 적었고, 숫자는 모두 사이트가 스스로 밝힌 표기입니다. 요금과 수량은 자주 바뀌니 가입 전에 해당 사이트에서 다시 확인하세요.
디자인 참고 사이트 5곳은 무엇이 다른가요?
| 사이트 | 한 줄 설명 | 이럴 때 | 무료로 볼 수 있는 범위 |
|---|---|---|---|
| 랜드북 | 직접 골라 모은 웹사이트 디자인 갤러리 | 홈페이지 구성을 고를 때 | 둘러보기 무료, 일부 템플릿은 유료 판매 |
| 모빈 | 실제 서비스 중인 앱과 사이트의 화면 모음 | 가입, 결제 같은 흐름을 볼 때 | 무료 가입 후 둘러보기, 전체 열람은 요금제 확인 |
| 게터레이어스 | 복사해서 AI에 붙여 넣는 템플릿과 3D 장면 모음 | 첫 화면에 연출을 넣고 싶을 때 | 무제한 이용은 유료로 안내 |
| 그레이니언트 | 그라데이션과 움직이는 배경 모음 | 배경과 분위기를 정할 때 | 전체는 프로 이용권 필요 |
| 릴폴리오 | 화면 캡처를 영상으로 바꿔 주는 도구 | 만든 화면을 영상으로 보여 줄 때 | 사이트에서 요금 확인 |
1. 랜드북, 홈페이지 구성을 고르는 디자인 참고 사이트
랜드북(Land-book)은 사람이 직접 골라 모은 웹사이트 디자인 갤러리이고, 매일 새 사이트가 올라온다고 스스로 소개합니다. 눈여겨볼 점은 사이트 전체가 아니라 부분으로도 찾을 수 있다는 것입니다. 상단 메뉴에 웹사이트, 섹션, 모바일, 모션, 소셜 공유 이미지, 헤드라인이 따로 나뉘어 있고, 랜딩, 포트폴리오, 블로그, 쇼핑몰 같은 종류로도 거릅니다.
AI에게 화면을 시킬 때 막히는 곳은 보통 “첫 화면 다음에 무엇을 둘지”입니다. 이때 같은 종류의 사이트 서너 개를 열어 섹션 순서만 적어 두면 됩니다. 예를 들어 “소개, 기능 세 가지, 후기, 가격, 문의” 같은 뼈대입니다.
주의할 점: 구성만 참고하세요. 남의 디자인을 그대로 따라 만들면 안 됩니다. 일부 템플릿은 유료로 판매 중이니 무료로 보이는 것과 구분해 보세요.
2. 모빈, 앱 화면의 흐름을 보는 디자인 참고 사이트
모빈(Mobbin)은 실제 출시된 앱과 사이트의 화면을 모아 둔 디자인 자료실입니다. 사이트에 따르면 62만 개가 넘는 화면이 있고 매주 새로 올라옵니다. 앱, 사이트, 화면, 흐름, 애니메이션, 화면 부품으로 나눠 볼 수 있습니다.
모빈이 도움이 되는 순간은 한 장짜리 화면이 아니라 흐름을 볼 때입니다. 가입은 몇 단계로 하는지, 결제 화면에는 무엇이 먼저 나오는지 같은 것입니다. 가계부나 쇼핑몰처럼 만들 서비스가 정해졌다면 비슷한 앱의 흐름을 먼저 보고 나서 AI에게 순서를 지시하는 편이 낫습니다.
사이트에는 AI 도구와 연결하는 기능도 소개되어 있습니다. 다만 이 기능은 프로와 팀 요금제에서만 쓸 수 있다고 적혀 있습니다. 무료 가입으로 둘러보는 것과 전체를 쓰는 것은 다르니 요금제 화면을 확인하세요.
3. 게터레이어스, 프롬프트째 복사하는 곳
게터레이어스(GetLayers)는 웹 템플릿, 3D 장면, 움직이는 배경, 그라데이션을 모아 두고, 각각을 프롬프트 하나로 복사해 쓰게 한 곳입니다. 사이트가 내세우는 방식은 “프롬프트를 복사해 AI에 붙여 넣으면 AI가 만든 티가 나지 않는 사이트가 나온다”는 것입니다. 이 문장은 사이트의 주장이고, 결과는 쓰는 AI와 지시에 따라 달라집니다.
화면 한가운데에 입체 장면이 돌아가는 첫 화면을 만들고 싶을 때 후보가 됩니다. 직접 코드를 짜지 않아도 되니 비개발자에게 문턱이 낮습니다. 무제한 이용은 유료로 안내되어 있습니다.
주의할 점: 3D 장면은 휴대폰에서 느려질 수 있습니다. 붙여 넣어 만든 뒤 모바일에서 꼭 열어 보세요.
4. 그레이니언트, 배경과 분위기를 정하는 곳
그레이니언트(Grainient)는 그라데이션과 배경을 모은 곳입니다. 사이트 표기로는 거친 질감의 그라데이션 387개, 부드럽게 섞인 그라데이션 466개, 움직이는 그라데이션 90개, AI가 만든 배경 556개가 있습니다. 직접 색을 조절하는 셰이더 도구도 함께 제공합니다.
AI가 만든 화면이 밋밋해 보이는 이유 중 하나가 배경입니다. 흰 바탕에 파란 버튼 대신 질감이 있는 배경 하나만 바꿔도 첫인상이 달라집니다. 마음에 드는 배경을 골라 “이 이미지를 첫 화면 배경으로 쓰고, 글자는 흰색으로”라고 지시해 보세요.
주의할 점: 사이트는 라이선스를 갖춘 자료라고 소개하지만, 상업적으로 쓸 계획이라면 이용 범위를 약관에서 먼저 확인하세요. 전체 자료와 움직이는 배경은 프로 이용권이 필요하다고 안내합니다.
5. 릴폴리오, 만든 화면을 영상으로 보여 주는 도구
릴폴리오(Reelfolio)는 화면 캡처나 녹화 영상을 올리면 포트폴리오용 영상으로 바꿔 주는 도구입니다. 영상 편집 경험이 필요 없다고 소개하고, 템플릿을 고른 뒤 올리고 다듬고 내보내는 네 단계입니다. 가로, 세로, 정사각형, 4:5 비율로 내보낼 수 있다고 하니 인스타그램이나 유튜브 숏츠에 올리기 좋습니다.
AI로 화면을 만들었다면 마지막에는 그것을 보여 줘야 합니다. 캡처 몇 장으로 소개 영상을 뽑는 용도입니다.
주의할 점: 영상에 넣는 화면에 개인정보가 보이지 않는지 올리기 전에 확인하세요. 상업적 이용 범위는 사이트 안내를 따르세요.
AI에게 참고 자료를 어떻게 전달하나요?
참고 사이트를 열어 놓고도 AI에게 무엇을 말해야 할지 막막할 수 있습니다. 세 가지만 적으면 됩니다.
- 순서: 섹션이나 화면이 어떤 순서로 나오는지. 예를 들어 “소개, 기능 셋, 후기, 가격, 문의”.
- 분위기: 색과 질감. 예를 들어 “어두운 바탕에 거친 질감의 그라데이션, 글자는 흰색”.
- 하지 말 것: 예를 들어 “파란 버튼에 흰 배경 기본 형태는 쓰지 않기”.
이 세 줄이 “예쁘게 만들어 줘”보다 훨씬 구체적입니다. 사이트의 이미지를 그대로 올리라는 뜻이 아니라, 눈으로 본 구성과 분위기를 말로 옮기라는 뜻입니다. 이렇게 하면 같은 AI라도 결과가 덜 평범해집니다.
디자인 참고 사이트 5곳은 어떤 순서로 쓰면 되나요?
처음부터 다 쓰려고 하지 마세요. 아래 네 단계면 충분합니다. 각 단계에서 사이트 하나만 열어도 됩니다.
- 구성을 정합니다. 랜드북이나 모빈에서 비슷한 서비스 서너 개를 열고, 섹션이나 화면 순서를 메모합니다.
- 그 순서를 AI에게 적어 줍니다. “소개, 기능 셋, 후기, 가격, 문의 순서로”처럼 순서를 먼저 말합니다.
- 분위기를 얹습니다. 그레이니언트에서 배경 하나, 필요하면 게터레이어스에서 장면 하나를 고릅니다.
- 영상으로 마무리합니다. 완성한 화면을 캡처해 릴폴리오로 소개 영상을 만듭니다.
이 순서는 5곳의 설명을 바탕으로 제가 정리한 제안이고, 모든 사이트가 이 흐름을 권하는 것은 아닙니다.
디자인 참고 사이트를 쓰기 전에 무엇을 확인해야 하나요?
- 요금. 5곳 모두 무료로 볼 수 있는 범위와 유료 범위가 나뉩니다. 가입 전에 요금 화면을 보세요.
- 저작권과 라이선스. 참고는 구성과 분위기까지입니다. 이미지나 코드를 그대로 쓸 때는 이용 약관을 확인하세요.
- 결과 확인. AI가 만든 화면은 휴대폰과 컴퓨터에서 모두 열어 보고, 글자가 읽히는지 점검하세요.
AI에게 맡기는 도구 모음은 디자인 도구 7곳 정리에서 스타일, 부품, 움직임, 마감으로 나눠 소개해 두었습니다. 이 글의 5곳이 참고 자료 쪽이라면 그 글은 만드는 도구 쪽입니다.
자주 묻는 질문
디자인 참고 사이트는 어디부터 보면 되나요?
만들 화면이 홈페이지라면 랜드북, 앱이라면 모빈입니다. 구성을 먼저 정해야 뒤의 배경과 장면이 의미가 있습니다. 디자인 참고 사이트를 고를 때는 만들 화면의 종류부터 정하세요.
전부 무료로 쓸 수 있나요?
아닙니다. 둘러보기는 무료인 곳이 있지만 전체 자료나 고급 기능은 유료인 곳이 많습니다. 사이트마다 요금 화면을 확인하세요.
참고한 디자인을 그대로 따라 만들어도 되나요?
권하지 않습니다. 섹션 순서와 분위기를 참고하고, 이미지와 문구는 직접 만드세요. 디자인 참고 사이트에 올라온 작품에는 만든 사람의 저작권이 있을 수 있습니다.
코딩을 몰라도 쓸 수 있나요?
5곳 모두 코딩 없이 둘러보거나 쓸 수 있게 소개되어 있습니다. 다만 AI에게 시킨 뒤 결과를 확인하는 일은 사람이 해야 합니다.
게터레이어스의 3D 장면은 모든 화면에서 잘 보이나요?
장담하기 어렵습니다. 기기 성능에 따라 느려질 수 있으니 휴대폰에서 직접 열어 보세요.
작성자 소개
