상담 전화 010-3911-0402 · 현재 홈페이지 주소와 바꾸고 싶은 점을 알려주세요.
전문 웹디자이너가 제작한 기존 슈갤러리 홈페이지를 슬로히어로가 바이브코딩으로 리디자인했습니다. 갤러리의 첫인상을 바꾸고, 전시와 작품을 보여주는 구성을 다시 정리한 작업입니다.
홈페이지 리뉴얼을 고민할 때는 완성된 화면부터 비교하는 것이 좋습니다. 같은 갤러리의 기존 사이트와 현재 사이트를 보면 어떤 부분을 유지하고 어디를 바꿨는지 구체적으로 판단할 수 있습니다. 아래는 두 사이트의 실제 화면입니다.
PC에서 보는 기존 홈페이지와 리디자인 결과
두 화면 모두 같은 크기의 브라우저에서 캡처했습니다. 이미지를 누르면 원본 크기로 볼 수 있습니다.
기존 화면은 분홍색 로고와 넓은 상단 메뉴, 갤러리 공간을 담은 큰 배너로 구성되어 있습니다. 방문자는 갤러리의 이름과 실제 공간을 먼저 만나게 됩니다.
리디자인에서는 차분한 배경과 큰 서체로 갤러리의 이름을 보여주고, 서로 다른 작가의 작품을 첫 화면에 배치했습니다. 상단에는 전시·아티스트·소개·아트가이드·소식·미디어·방문 메뉴를 정리했습니다. 공간 사진이 중심이던 첫인상을 작품과 작가가 드러나는 화면으로 바꾼 것입니다.
이 비교에서 기존 사이트는 전문 웹디자이너 제작물이고, 현재 사이트는 슬로히어로가 바이브코딩으로 구현한 결과물입니다. 바이브코딩은 원하는 화면과 기능을 AI에 설명하며 코드를 만들고 수정하는 방식입니다. 제작 방식을 공개하고, 고객이 실제 결과를 보고 판단할 수 있도록 두 사이트를 함께 보여드립니다.
기존 슈갤러리 홈페이지 보기 · 리디자인한 슈갤러리 홈페이지 보기
PC부터 태블릿과 모바일까지 화면에 맞춰지는 반응형 홈페이지
이번 홈페이지 리뉴얼에서는 PC에 맞춘 고정 폭의 메인 화면을, 화면 너비에 따라 배치가 바뀌는 반응형 홈페이지로 개선했습니다. 반응형이란 PC·태블릿·휴대전화처럼 화면 크기가 달라져도 메뉴와 콘텐츠가 그 너비에 맞춰 표시되는 방식입니다.
기존 홈페이지의 메인 화면은 브라우저 폭을 줄여도 약 1,180px의 콘텐츠 너비를 유지했습니다. 태블릿에 가까운 768px 폭과 휴대전화에 가까운 390px 폭에서는 오른쪽 내용이 화면 밖으로 나가 가로 스크롤이 생겼습니다. 현재 메인 화면은 확인한 세 가지 폭 모두에서 가로 넘침 없이 화면 안에 맞춰졌습니다.
- PC 1440px: 두 사이트 모두 화면 안에 표시됩니다. 현재 사이트는 갤러리 이름과 작품 세 점을 중심으로 첫인상을 구성했습니다.
- 태블릿 768px: 기존 사이트는 오른쪽 내용이 넘어가지만, 현재 사이트는 줄어든 너비에 맞춰 제목과 작품을 보여줍니다.
- 모바일 390px: 기존 사이트는 고정 폭 화면의 일부가 보이고, 현재 사이트는 메뉴를 접고 제목과 작품을 화면 안에 배치합니다.
먼저 태블릿 폭에서 본 화면입니다. 기존 사이트의 오른쪽이 잘린 모습은 이미지 편집으로 생긴 것이 아니라, 해당 너비에서 실제로 보이는 상태입니다.
아래는 더 좁은 모바일 폭 비교입니다. 두 캡처 전체를 축소해 나란히 배치했으며, 이미지를 누르면 원본을 확인할 수 있습니다.
같은 390px 폭으로 열었을 때 기존 사이트는 넓은 화면 구성이 유지돼 메뉴와 배너의 일부가 화면 밖으로 나갑니다. 캡처 하단에서도 가로 스크롤을 확인할 수 있습니다.
현재 사이트는 메뉴를 접어 배치하고, 갤러리 소개와 제목, 작품 세 점을 좁은 화면 안에 보여줍니다. 이어서 현재 전시를 소개하는 화면으로 내려갈 수 있습니다.
홈페이지를 새로 만들 때는 PC의 큰 화면만 보고 결정하기 쉽습니다. 하지만 고객이 휴대전화에서 링크를 열었을 때도 내용을 읽고 다음 페이지로 이동할 수 있어야 합니다. 리뉴얼 상담에서는 실제로 불편한 화면을 함께 확인해 보세요. 로고나 색상을 바꾸는 것 외에 어떤 작업이 필요한지 드러납니다.
전시 목록과 상세 정보도 함께 정리했습니다
기존 사이트에도 현재전시·예정전시·지난전시 메뉴가 있었습니다. 리디자인에서는 전시를 보여주는 카드의 구성과 상세 페이지로 이어지는 방식을 다시 정리했습니다.
현재 전시 목록은 포스터와 함께 연도, 기간, 전시명, 작가, 전시 유형을 보여줍니다. 방문자는 포스터의 분위기를 보고 관심 있는 전시를 고르면서 일정과 작가도 함께 확인할 수 있습니다. 과거 사이트의 지난전시 목록과 현재 아카이브는 공개된 자료의 범위가 다르므로, 게시물 수가 늘어난 것을 디자인 성과로 계산하지는 않습니다.
전시 상세에는 소개·작품·작가로 이동하는 구성을 두었습니다. 예를 들어 슈어킴의 전시 페이지에서는 전시명과 기간을 읽고, 작품과 작가에 관한 내용을 이어서 찾아볼 수 있습니다. 전시마다 다른 정보를 같은 화면 구조에 담아, 다음 전시를 볼 때도 익숙한 순서로 읽도록 구성했습니다.
전시 상세 페이지 보기 · 슈갤러리 전체 제작 사례 보기
우리 홈페이지는 어디까지 리뉴얼하면 될까요
슈갤러리는 작품을 보여주는 방식과 전시 정보 구성을 함께 바꾼 사례입니다. 다른 업종이라면 고객에게 먼저 보여줄 내용부터 달라집니다. 기업은 서비스와 실적, 스튜디오는 포트폴리오와 예약, 갤러리는 전시와 작가가 중요한 판단 자료가 될 수 있습니다.
상담하실 때 현재 홈페이지 주소와 아래 세 가지를 함께 알려주세요.
- 지금 불편한 점: 휴대전화에서 잘리는 화면, 직접 바꾸기 어려운 사진·문구, 찾기 어려운 메뉴 등.
- 유지할 내용: 도메인, 기존 게시글·사진, 문의·예약 기능 등.
- 바꾸고 싶은 방향: 참고 사이트와 희망 완료일.
한두 화면을 고치는 것으로 충분한지, 전체 디자인과 정보 구조를 다시 잡아야 하는지부터 정리할 수 있습니다. 기존 자료를 옮겨야 한다면 페이지와 게시글의 범위, 사진·첨부파일, 기존 주소와 연결된 기능도 견적 전에 함께 확인해야 합니다.
결과와 작업 범위를 확인한 뒤 결정하세요
슬로히어로는 상담 후 메인 화면과 디자인 방향의 1차 초안을 결제 전에 확인하는 절차를 안내하고 있습니다. 리뉴얼에서도 기존 사이트 주소와 원하는 방향을 먼저 공유하고, 적용할 작업 범위와 견적·일정을 확인한 뒤 진행 여부를 결정하시면 됩니다.
현재 서비스 안내에는 확정한 시안과 범위 안에서 수정 3회, 오픈 후 1년간 무료 유지보수가 포함되어 있습니다. 전체 구조 변경이나 새로운 외부 연동은 별도 협의 대상입니다. 리뉴얼 상담에서는 자료 이전과 오픈 후 관리에 어떤 작업이 포함되는지도 함께 정합니다.
바이브코딩으로 제작한다는 설명과 함께, 실제 화면·작업 범위·인계 조건을 확인하세요. 슈갤러리의 비교 화면이 우리 사이트에 필요한 리뉴얼을 판단하는 출발점이 될 수 있습니다.
현재 홈페이지 주소와 바꾸고 싶은 점을 알려주세요.
상담 전화 010-3911-0402 · 휴대전화에서 버튼을 누르면 전화 걸기 화면이 열립니다. PC에서는 위 번호로 연락해 주세요.
화면 비교 기준: 2026년 10월 9일 공개된 두 사이트를 같은 브라우저에서 확인했습니다. 메인 화면은 PC 1440×1280, 태블릿 폭 768×1024, 모바일 폭 390×844로 캡처했습니다. 전시 목록·상세 화면은 1440×1000입니다. 반응형 비교는 두 사이트의 메인 화면을 대상으로 하며, 태블릿·모바일 이미지는 해당 폭으로 조정한 브라우저 캡처입니다. 실제 기기별 동작을 모두 검증했다는 의미는 아닙니다.
