AI로 웹사이트 만들기, 설명 대신 직접 살펴보는 화면은 어떻게 설계할까요

핵심 요약 (TL;DR)

AI로 웹사이트를 만들 때 설명을 늘리는 것만이 답은 아닙니다. 방문자가 한 가지를 직접 살펴보게 만들면 긴 소개문보다 서비스의 쓰임이 선명해질 수 있습니다. 최근 Show HN에는 Astra로 만들었다고 소개된 Livedin의 인터랙티브 건축 패턴 사이트가 올라왔습니다. 공개 페이지에서 건축 사례 목록과 개별 소개 화면을 확인했습니다. 다만 AI가 작성한 코드의 비중이나 제작 시간, 3D 조작의 실제 동작까지 검증한 것은 아닙니다.

이 사이트는 무엇을 먼저 보여 주나요?

Livedin은 창가 좌석, 발코니, 안뜰, 거리 같은 건축 요소를 이미지와 짧은 설명으로 펼쳐 놓습니다. 방문자는 추상적인 설계 철학을 먼저 읽기보다 관심 있는 공간을 고를 수 있습니다. 창가 좌석의 개별 페이지는 깊은 목재 창틀과 잠시 머물 공간이라는 구체적인 장면을 설명하고, 3D 모델을 준비하는 안내를 표시합니다.

여기서 배울 점은 화려한 기술보다 정보의 순서입니다. ‘우리 서비스는 혁신적입니다’라는 선언 대신, 고객이 궁금해할 대상을 먼저 꺼내 놓는 것입니다. 다만 모델 준비 문구가 보인다는 사실만으로 실제 회전이나 확대가 잘 된다고 말할 수는 없습니다. 소개 화면과 기능 검증은 따로 다뤄야 합니다.

내 업종에는 어떤 작은 체험을 만들면 좋을까요?

인테리어라면 공간 유형을 골라 사례를 보는 화면, 교육이라면 수업 상황을 골라 예시 자료를 펼치는 화면이 될 수 있습니다. 처음부터 모든 조건을 계산하는 견적 시스템을 만들 필요는 없습니다. 선택 하나가 달라지면 무엇을 보여 줄지부터 정해 보세요.

아래는 이 사례에서 착안한 제작 요청 예시입니다. 원작의 프롬프트를 재현한 것이 아니라 독자가 응용할 수 있도록 제안하는 문장입니다.

“서비스 사례를 탐색하는 모바일 웹페이지를 만들어 주세요. 첫 화면에는 실제 자료가 있는 사례만 카드로 보여 주세요. 카드를 누르면 사진, 짧은 설명, 문의 버튼이 나타나게 해 주세요. 자료가 없거나 불러오기에 실패하면 그 상태를 분명히 알려 주세요. 고객 정보 저장과 자동 발송은 이번 범위에서 제외합니다.”

이렇게 요청하면 AI에게 디자인 취향뿐 아니라 콘텐츠의 경계도 전달할 수 있습니다. 실제 사례가 부족한데 AI가 고객 후기나 작업 사진의 설명을 지어내게 두지 않는 것이 중요합니다.

배포 전에 무엇을 직접 눌러 봐야 할까요?

첫째는 탐색의 끝입니다. 카드를 열고 돌아왔을 때 이전 위치를 쉽게 찾을 수 있는지 보세요. 둘째는 느린 로딩입니다. 이미지나 모델이 늦게 열릴 때 빈 화면 대신 기다릴 이유와 다른 선택지를 보여 줘야 합니다. 셋째는 문의로 이어지는 연결입니다. 버튼을 눌렀을 때 어떤 정보가 전달되는지 미리 알려 주세요.

입체 화면이 반드시 필요한지도 물어보세요. 사진 한 장으로 충분히 설명되는 서비스라면 가벼운 이미지와 명확한 문장이 더 나을 수 있습니다. 좋은 체험은 기술의 수가 아니라 고객이 이해해야 할 부분을 얼마나 쉽게 드러내는지로 판단하는 편이 좋습니다.

FAQ: AI를 쓰면 3D 웹사이트도 바로 완성되나요?

보장할 수 없습니다. 공개 소개와 실제 기기에서의 동작은 다릅니다. 모바일 성능, 로딩 실패, 화면 조작을 직접 확인해야 합니다.

FAQ: 개발자 없이 시작할 수 있나요?

자료를 탐색하는 작은 화면부터 시작할 수 있습니다. 개인정보 저장이나 결제까지 넣는다면 접근 권한과 서버 처리는 별도로 검토해야 합니다.

출처: https://livedin.co.uk/design-patterns/
사례 확인: https://news.ycombinator.com/item?id=49650474
개별 화면: https://livedin.co.uk/design-patterns/window-seat
관찰 시점: 2026-09-12 KST