원주 가게 사진, 홈페이지에 올리기 전 — 자리별 목록 · 밝기 · 크기 · 대체텍스트 정리
원주 가게 사진을 홈페이지에 쓰려면 촬영 전에 페이지 자리별 사진 목록부터 만들고, 올리기 전에 크기를 표시 칸에 맞춰 줄이고, 사진마다 대체텍스트를 적는 것이 순서입니다. 휴대폰 원본을 그대로 올리면 화면은 같아 보여도 페이지가 무거워지고, 검색엔진은 사진이 무엇인지 알기 어렵습니다. 크기 · 형식은 web.dev, 대체텍스트 · 파일 이름은 Google 검색 센터 문서에서 10월 17일 확인한 내용이고, 목록 짜기와 밝기 맞추기는 일반적인 요령입니다.
- 사진은 '많이'보다 '자리별로' 준비합니다. 첫 화면 · 대표 상품 · 내부 · 입구 · 찾아오는 길처럼 칸을 먼저 정하면 빠지는 컷이 없습니다.
- web.dev는 사진을 화면에 보이는 크기에 맞춰 내보내라고 안내합니다. 500px 칸이면 고해상도 휴대폰(DPR 2) 기준 1000px이면 충분합니다.
- WebP · AVIF는 대개 JPEG · PNG보다 압축이 잘 되고, 모든 img에는 width · height를 적어 화면 밀림을 막는 것이 좋습니다.
- Google은 대체텍스트를 키워드 나열이 아닌 사진 설명으로 쓰고, 파일 이름도 IMG00023.JPG 대신 내용을 담으라고 권합니다.
- 얼굴이 나오는 사진의 초상권 · 인터넷 사진 저작권은 창원 편 글에서 따로 정리했습니다.
1홈페이지 어느 자리에 어떤 사진이 들어가나요?
사진 촬영을 하루 잡기 전에, 홈페이지 화면을 칸으로 나눠 보면 필요한 컷이 정해집니다. 칸마다 손님이 확인하려는 것이 다르기 때문에 가로 · 세로 방향과 장수도 함께 적어 두면 다시 찍는 일이 줄어듭니다. 아래 표는 작은 가게 홈페이지를 기준으로 한 일반적인 예시입니다.
| 홈페이지 자리 | 손님이 확인하려는 것 | 준비할 컷(예시) | 방향 |
|---|---|---|---|
| 첫 화면 | 어떤 가게인지 한눈에 | 대표 메뉴 · 대표 시공 한 장, 글자를 얹을 빈 공간이 있는 컷 | 가로 1장 + 모바일용 세로 1장 |
| 메뉴 · 상품 · 서비스 | 무엇을 파는지, 실물이 어떤지 | 같은 배경 · 같은 각도로 찍은 상품별 컷 | 정사각형 또는 같은 비율로 통일 |
| 가게 안 | 분위기, 좌석 · 공간 크기 | 입구 쪽에서 안쪽으로 넓게 1장, 좌석 가까이 1장 | 가로 |
| 입구 · 간판 | 처음 오는 손님이 찾을 수 있는지 | 길 건너에서 간판과 입구가 같이 보이는 컷 | 가로 |
| 찾아오는 길 · 주차 | 어디에 세우고 어디로 들어가는지 | 주차장 입구, 건물 출입구 컷 | 가로 |
| 작업 과정 · 사람 | 누가 어떻게 만드는지 | 손과 도구 위주의 컷(얼굴은 동의를 받은 경우만) | 세로(숏폼과 같이 쓰기 좋음) |
2사진마다 밝기와 색이 다르면 어떻게 맞추나요?
홈페이지에서 사진이 어수선해 보이는 가장 흔한 이유는 사진 하나하나의 품질보다 사진끼리 밝기와 색이 제각각이라는 점입니다. 낮에 찍은 메뉴 사진 옆에 밤 조명 아래 찍은 사진이 붙으면 같은 가게로 보이지 않습니다. 아래는 일반적인 요령입니다.
- 같은 칸에 들어갈 사진은 같은 날, 같은 시간대, 같은 자리에서 몰아서 찍습니다.
- 형광등과 창문 빛이 섞이면 색이 틀어지기 쉬우므로 한쪽 빛을 주로 씁니다.
- 보정은 한 장을 먼저 맞춘 뒤, 같은 값을 나머지 사진에 똑같이 적용합니다. 사진마다 따로 만지면 다시 제각각이 됩니다.
- 필터는 음식 색이 실제와 달라질 정도로 쓰지 않습니다. 손님이 받은 실물과 달라 보이면 오히려 신뢰가 떨어집니다.
- 어두운 원본을 지나치게 밝히면 거친 점(노이즈)이 생깁니다. 이럴 때는 보정보다 다시 찍는 편이 빠릅니다.
3휴대폰 원본을 그대로 올리면 왜 문제가 되나요?
web.dev의 이미지 성능 문서는 사진을 화면에 표시되는 크기에 맞춰 내보내라고 설명합니다. 예를 들어 화면에서 500 × 500 CSS 픽셀 칸에 들어갈 사진은 기기 픽셀 비율(DPR)이 1이면 500px, 2이면 1000px, 3이면 1500px이 알맞고, DPR 1 화면에서 1,000픽셀 정사각형을 쓰면 필요한 크기의 두 배가 된다고 적고 있습니다. 같은 문서는 대부분의 사용자가 최적보다 약간 작은 이미지도 눈에 띄는 품질 저하 없이 본다고 덧붙입니다. 휴대폰 원본은 이보다 훨씬 큰 경우가 많아, 그대로 올리면 손님 휴대폰이 필요 없는 데이터까지 받게 됩니다.
PC 화면과 휴대폰 화면은 사진 칸의 너비가 다릅니다. web.dev는 이럴 때 `srcset`으로 크기별 사진 후보를 주고 `sizes`로 표시 너비를 알려 주는 방법을 안내하며, 너비 설명자(1000w 같은 값)를 쓸 때는 `sizes`가 함께 있어야 한다고 적고 있습니다. 제작을 맡기셨다면 '사진을 크기별로 나눠 내보내는지'만 물어보셔도 충분합니다.
4파일 형식과 화면 밀림은 무엇을 확인하나요?
| 확인할 것 | 공식 문서 내용 | 사장님이 볼 곳 |
|---|---|---|
| 파일 형식 | WebP · AVIF는 대개 PNG · JPEG보다 압축이 잘 되어 로드 시간과 LCP 개선에 도움(web.dev) | 사진 주소 끝이 .webp · .avif인지, 아니면 원본 .jpg인지 |
| 압축 정도 | 압축한 사진이 품질 기준을 맞는지 항상 확인, 여러 단계로 시험(web.dev) | 휴대폰으로 확대했을 때 글씨 · 경계가 뭉개지지 않는지 |
| 화면 밀림 | 모든 img에 width · height를 넣어 공간을 미리 잡고 레이아웃 이동을 막는 것을 권장(web.dev) | 페이지가 열리는 도중 글자가 아래로 밀리는지 |
| 지연 로드 | 처음 보이는 화면의 사진, 특히 LCP 이미지는 지연 로드하지 말 것(web.dev) | 첫 화면 큰 사진이 늦게 뜨는지 |
| 형식 지원 | Google 이미지 검색은 BMP · GIF · JPEG · PNG · WebP · SVG · AVIF 지원, 확장자는 실제 형식과 맞출 것(Google 검색 센터) | 파일 이름 끝과 실제 형식이 같은지 |
LCP(최대 콘텐츠 페인트)는 첫 화면에서 가장 큰 요소가 보이기까지 걸리는 시간을 말합니다. 가게 홈페이지에서는 보통 첫 화면의 대표 사진이 이 역할을 하므로, 대표 사진 한 장의 크기만 줄여도 체감 속도가 달라질 수 있습니다. 지금 홈페이지가 얼마나 무거운지 궁금하면 무료 SEO 점검으로 먼저 확인해 보셔도 됩니다.
5대체텍스트와 파일 이름은 어떻게 쓰나요?
Google 검색 센터의 이미지 SEO 문서는 대체텍스트(alt)를 페이지 맥락에 맞는 유용한 설명으로 쓰라고 권하고, 관련 단어를 길게 늘어놓는 것은 사용자 경험을 해치고 스팸으로 볼 수 있다고 경고합니다. 문서의 예시도 alt가 없는 것보다 '강아지'가 낫고, 그보다 '가져오기 놀이를 하는 새끼 달마시안'처럼 구체적인 설명이 가장 좋다고 보여 줍니다.
| 구분 | 아쉬운 예(가게 예시) | 나은 예(가게 예시) |
|---|---|---|
| 대체텍스트 | 맛집, 원주맛집, 칼국수, 점심, 회식 | 들깨칼국수 한 그릇과 겉절이가 놓인 2인 식탁 |
| 대체텍스트 | (비어 있음) | 간판과 입구가 함께 보이는 가게 외관, 1층 출입문 |
| 파일 이름 | IMG_0423.JPG | perilla-kalguksu-2.webp |
같은 문서는 `IMG00023.JPG` 대신 `my-new-black-kitten.jpg`처럼 내용을 담은 파일 이름을 쓰고, 사진을 관련 글 가까이 두라고 안내합니다. 캡션과 페이지 제목도 Google이 사진 주제를 파악하는 데 쓰는 정보라고 적고 있습니다. 위 표의 가게 예시는 이해를 돕기 위해 만든 것이고, 공식 문서의 예시는 아닙니다. 글자 대비 · 화면 확대까지 포함한 접근성 점검은 인천 웹 접근성 글에 따로 정리했습니다.
6원주에서 사진 · 홍보를 상의할 공식 창구는 어디인가요?
원주시소상공인종합정보센터 누리집에는 라이브커머스 스튜디오(뷰티 · 푸드) 예약 메뉴가 있습니다. 다만 10월 17일 확인한 이용안내에는 스튜디오 이전 예정으로 대관을 잠시 중단하며, 재개 일정은 이전 설치 · 정돈 후 11월 중순경 다시 안내한다고 적혀 있습니다. 스튜디오에서 상품 사진을 찍을 계획이라면 재개 공지를 먼저 확인하는 것이 좋습니다.
같은 누리집의 '2026년 원주시 소상공인 맞춤형 컨설팅 지원사업'은 원주시 관내 소상공인을 대상으로 1월 30일부터 11월 30일까지 선착순으로 신청을 받고, 예산이 소진되면 일찍 마감된다고 안내합니다. 세부 컨설팅 분야는 첨부 공고문에서 확인해야 합니다. 큰길브리지는 원주 지역 홈페이지 · 홍보영상 작업을 전국 비대면으로 진행합니다.
7사진을 올리기 전 마지막 점검 순서는?
- 자리별 목록과 찍은 사진을 맞춰 보고 빠진 칸을 표시합니다.
- 같은 칸에 들어갈 사진의 밝기 · 색을 한 장 기준으로 똑같이 맞춥니다.
- 사진 칸의 표시 너비를 확인하고, 그 두 배 안팎으로 줄여 내보냅니다(DPR 2 기준).
- WebP 등으로 압축한 뒤 휴대폰에서 확대해 품질을 확인합니다.
- 파일 이름을 내용이 드러나는 영문 소문자로 바꿉니다.
- 사진마다 '무엇이 보이는지'를 한 문장으로 적어 대체텍스트로 넣습니다.
- 얼굴이 나오는 사진은 동의 여부를 다시 확인합니다(창원 가게 사진 촬영 글 참고).
사진 준비가 끝났는데 어디에 어떻게 넣을지 막막하다면 제작 문의로 화면 구성부터 상의하실 수 있습니다.
자주 묻는 질문
홈페이지 사진은 몇 픽셀로 올리면 되나요?
정답 한 가지는 없고, 사진이 들어갈 칸의 표시 너비에 맞춥니다. web.dev 예시로는 500px 칸이면 DPR 1 화면은 500px, DPR 2는 1000px, DPR 3은 1500px이 알맞습니다. PC와 휴대폰 칸이 다르면 srcset으로 크기별 사진을 함께 줍니다.
대체텍스트에 가게 이름과 지역 키워드를 넣어도 되나요?
사진을 설명하는 데 자연스럽다면 괜찮지만, 여러 키워드를 나열하는 것은 Google이 사용자 경험을 해치고 스팸으로 볼 수 있다고 안내합니다. 사진에 실제로 보이는 것을 한 문장으로 적는 것이 기본입니다.
첫 화면 큰 사진에도 지연 로드를 걸면 빨라지지 않나요?
반대입니다. web.dev는 페이지가 열릴 때 화면에 보일 가능성이 있는 사진, 특히 LCP 이미지는 지연 로드하지 말라고 안내합니다. loading=lazy는 첫 화면 밖의 사진에만 씁니다.
원주시 라이브커머스 스튜디오는 지금 쓸 수 있나요?
10월 17일 확인한 원주시소상공인종합정보센터 이용안내에는 스튜디오 이전 예정으로 대관을 잠시 중단하고 11월 중순경 재개 일정을 안내한다고 적혀 있습니다. 이용 전 센터 공지를 확인하세요.
