사진과 표를 넣고 첫 글 공개하기
사용 권리가 있는 사진과 표를 예제 형식에 맞게 넣고 초안 저장·검수·공개 순서로 확인합니다.
사진은 빈 공간을 채우는 장식보다 글에서 설명하는 위치나 차이를 보여 줄 때 쓸모가 있습니다. 표는 여러 조건을 같은 기준으로 비교할 때 사용합니다. 예제에 맞는 형식으로 넣은 뒤 관리자 입력값뿐 아니라 실제 방문자가 읽는 화면을 확인하고 첫 글을 공개합니다.
오늘 확인할 질문
사진과 비교표를 글에 넣은 뒤 어떤 상태를 확인하고 첫 글을 공개하나요?
이 글에서 꼭 보여 줄 장면을 고릅니다
케이블 정리 글에는 정리된 책상 전체 사진보다 콘센트 위치와 케이블이 지나는 구간을 보여 주는 사진이 필요할 수 있습니다. 본문에서 ‘책상을 앞으로 움직였을 때’를 설명한다면 두 위치의 차이가 보이도록 촬영합니다. 사진만으로 모든 안전 조건을 판단하게 하지 않고 글에서 확인할 부분을 짚어 줍니다. 보이지 않는 환경까지 일반화한 설명은 피합니다.
직접 촬영한 사진에 이름표, 택배 송장, 컴퓨터 알림, 가족 사진 같은 정보가 보이지 않는지 확인합니다. 필요한 범위만 촬영하거나 공개 전 가립니다. 다른 사람의 사진을 사용할 때는 광고가 붙는 사이트에서 사용 가능한 조건과 출처 표시 요구를 확인합니다. 이미지를 검색해 찾았다는 사실은 사용 권리 확인과 다릅니다. 출처를 적는 것만으로 모든 이용이 허용되는 것도 아닙니다.
파일은 지나치게 큰 원본을 그대로 올리기보다 화면에서 필요한 해상도와 용량으로 준비합니다. 사진의 글자나 치수를 읽어야 한다면 줄인 뒤에도 식별되는지 봅니다. 특정 용량 하나가 모든 사진의 정답은 아니지만 휴대폰에서 여는 데 오래 걸리는 크기는 조정할 필요가 있습니다. 파일 형식은 예제에서 허용한 JPG, JPEG, PNG, WebP, SVG 중 내용에 맞는 것을 사용합니다. 출처를 모르는 SVG 파일은 실행 가능한 내용이 포함될 수 있어 그대로 가져오지 않습니다.
사진·표·미리보기를 한 글에서 확인합니다
사진이 추가됐다는 메시지 뒤에 글까지 저장해야 미리보기에 반영됩니다. 이미지는 별도 문단, 표는 중간 빈 줄 없이 넣고 마지막 행의 열 수를 확인하세요. 공개 전에 틀린 수치가 보이면 이 화면에서 고친 뒤 다시 저장합니다. 사진을 보려고 글을 잠깐 공개할 필요가 없습니다.
| 누를 곳 | 넣을 것 | 정상 결과 |
|---|---|---|
| 사진 추가 | 내 사진·장면 설명 | /media/주소 생성 |
| 본문 | 이미지 한 줄·앞뒤 빈 줄 | 문단 사이 사진 |
| 저장 후 미리보기 | 현재 수정본 저장 | 광고 없는 관리자 전용 글 |
| 검수 완료 → 지금 공개 | 확인한 본문 | 같은 내용의 공개 글 |
관리자에서 사진을 추가하고 문단 사이에 넣습니다
관리자에서 글을 먼저 입력한 뒤 아래쪽 사진 추가로 이동합니다. 내게 사용 권리가 있는 JPG·PNG·WebP 파일을 고르고 사진 설명을 적습니다. 예를 들어 ‘서랍 안쪽 폭을 재는 줄자의 시작점’처럼 무엇을 보여 주는지 적으면 됩니다. 사진 저장 후 본문에 넣기를 누르면 사진이 내 사이트 저장 공간에 올라가고 본문에 이미지 한 줄이 들어갑니다. 저장 후 미리보기를 열어 사진과 설명이 원하는 문단 아래에 표시되는지 확인하세요.
브라우저는 긴 변을 1,600px 이내로 줄이고 WebP로 바꿉니다. 서버에는 변환 후 장당 256KB 이하만 저장하며 실습 파일 전체 한도는 100장입니다. 너무 크다는 오류가 나면 원본에서 불필요한 주변을 잘라 다시 고릅니다. 읽어야 할 수치가 있는 사진은 저장 후 미리보기에서 글자가 뭉개지지 않았는지도 확인하세요. 100장을 채운 뒤 사진을 계속 모으려면 별도 파일 저장소와 관리 기능을 확장해야 합니다.
본문에는  가 들어갑니다. 실제 경로는 저장 결과의 값을 그대로 사용하고 예시 이름을 복사하지 않습니다. 이 한 줄을 설명할 문단 바로 뒤로 옮기고 위아래에 빈 줄을 둡니다. 두 번째 사진도 같은 순서로 추가할 수 있습니다. 대표 사진을 상단에 따로 보이려면 생성된 경로를 이미지 경로 칸에도 넣고 대표 이미지 설명을 채웁니다. 같은 사진이 두 번 나오면 어느 위치에 필요한지 골라 한쪽을 비웁니다.
사진 저장과 원고 저장은 별개입니다. 사진을 넣은 다음 수정본·초안 저장 또는 저장 후 미리보기를 눌러 본문까지 저장하세요. 공개 글에 쓰이지 않은 사진은 관리자에게만 보입니다. 공개한 글에 사용되면 방문자도 같은 경로로 볼 수 있습니다. 파일을 직접 관리하고 싶다면 public/images 폴더에 넣고 배포한 /images/주소를 쓰는 방법도 있지만, 첫 글에서는 관리자 사진 추가만으로 진행할 수 있습니다.
표는 비교 기준을 먼저 정합니다
서랍 정리함 글이라면 ‘서랍 안쪽 폭’, ‘넣을 정리함의 전체 폭’, ‘남는 폭’을 비교할 수 있습니다. 케이블 위치 글이라면 ‘확인 위치’, ‘현재 상태’, ‘다음 선택’을 나눌 수 있습니다. 단순한 문장을 모두 표로 바꿀 필요는 없습니다. 같은 항목을 여러 대상에 적용할 때 표를 사용하면 차이를 보기 쉽습니다. 표의 제목이나 앞 문장에서 무엇을 비교하는지 설명합니다.
공개 미리보기입니다. 전체 학습은 로그인 후 수강 조건에 따라 이용할 수 있습니다.