WP기초 - 미디어

관리자 메뉴의 순서를 보면 "글" 다음에 "페이지"가 아니고 "미디어"가 와 있습니다. 

저만의 생각일 수도 있지만 그만큼 미디어가 중요하다는 뜻이 아닐까요? (뭐... 사실 전부 중요하긴 하지만;;;)

워드프레스는 각 글 및 페이지에 "특성이미지(featured image)"라는 항목이 있습니다. 글 및 페이지의 내용을 대표할 수 있는 이미지를 하나 등록하는 것인데 이것은 썸네일(thumbnail)화 되어서 홈 화면이나 글 목록 등 게시물들을 한꺼번에 여러개 보여 줄 때 각 글들을 명확히 구분하기 위한 용도로 주로 사용됩니다. 주로 이 이미지(및 각종 미디어 파일)의 업로드를 "미디어"를 통해서 하는 것이죠.

"파일 올리기"를 통해 컴퓨터에 있는 파일을 워드프레스에 업로드 할 수 있습니다.

업로더(파일을 올리는 툴)는 "다중 파일 업로더"와 "브라우저 업로더"가 있는데 "다중 파일 업로더"는 여러 개의 파일을 한꺼번에 올릴 수 있고 "브라우저 업로더"는 파일을 하나씩 올릴 수 있습니다. 당연히 다중 파일 업로더를 사용하겠죠?

미디어도 글 이나 페이지처럼 해당 항목을 통해 "편집화면"으로 들어갈 수 있습니다.

(위에도 잠깐 썼는데, 주로 이미지를 다루기 때문에 앞으로는 미디어 말고 이미지라고 쓰겠습니다)

편집화면에서 미디어에 정보를 추가할 수 있는데, 바로 "캡션, 대체 텍스트, 설명"입니다.

캡션은 이미지 아래쪽에 노출되는 텍스트 즉, 이미지 제목 정도를 말하고, 

대체 택스트는 어떤 이유로 인해 이미지가 출력되지 않을 때 대신해서 출력되는 텍스트를 말합니다.

그리고 설명은 이미지에 대한 자세한 정보를 적는 곳이라고 생각하면 되겠군요. 예를 들어 사진을 올렸다면 이 사진이 언제, 어디서, 무엇으로 찍었는가 하는 등의 정보라고 하면 될까요?

셋 중 가장 중요한 것은 "대체 텍스트" 입니다.

근래 웹개발 쪽에서 가장 신경써야 할 부분인 "웹 접근성"을 충족하기 위한 최소한의 마지노선이기 때문인데, 이 대체 텍스트가 시각장애인을 위한 화면리더기에서 감지하는 부분이기 때문입니다(저도 그냥 그렇다고만 알고 있습니다).

반드시 넣으시길 바랍니다.

워드프레스는 이미지 편집 기능을 제공하는데 이를 통해 웹 브라우저에서 이미지 자르기, 이미지 회전, 상하/좌우 전환, 이미지 크기 조정을 할 수 있습니다. 

이미지 미리보기 하단의 [이미지 편집]을 클릭하면 아래의 화면을 볼 수 있습니다. 일부러 메타박스를 모두 열어놓았습니다.

이미지 자르기"만 다뤄보겠습니다. 위의 사이드 바에 등록한 베너 이미지의 경우 정사각형이라 사실 잘 어울리는 편이 아닙니다. 글자의 상하 부분을 잘라서 좌우로 긴 이미지로 만들어야 겠습니다.

우선 마우스 커서를 이미지 위로 이동하고 '클릭 & 드래그'해서 원하는 영역을 만듭니다. 

이미지의 크기는 "이미지 자르기" 메타박스를 보면 "선택" 항목에 좌*우 픽셀값이 나타나기 때문에 이를 잘 활용해서 사이즈를 조정할 수 있습니다. 저의 경우 깔끔한 수치를 좋아해서 첫째 자리수를 "0"으로 맞췄습니다.

크기를 설정했으면 아이콘 중에서 "자르기"를 클릭하여, 설정한 것을 이미지에 적용합니다. 그리고 적용된 것을 확인한 후 [저장하기]를 클릭합니다.

이제 이미지를 확인해 보면, 아래와 같이 잘려진 것을 확인할 수 있습니다.

여기서 중요한 것은 원래의 이미지 파일은 변하지 않고 새로운 편집된 이미지 파일이 따로 저장된다는 것입니다.

'연구&개발' 카테고리의 게시물 중 "사이드바 정리와 이미지 베너 추가"를 보면 플러그인을 통해 베너이미지를 삽입하는 내용을 볼 수 있습니다. 이곳의 이미지가 자동으로 변경되면 좋겠지만 그렇게는 되지 않는다는 이야기가 되겠죠.

그래서 플러그인을 사용하여 사이드바에 베너를 다시 추가하였습니다.

사용자가 이미지를 업로드하면 그 이미지 파일 말고도 3개의 파일이 더 생성됩니다.

Thumbnail(썸네일-미리보기 이미지), Medium(중간크기 이미지), Large(큰 이미지), Full(업로드 한 이미지) 로 구분되며 보통은 이미지의 크기가 파일명 뒤에 붙습니다. 이 이미지 크기를 설정하는 곳은 다른 곳에 있는데 바로 "설정 - 미디어"에 있습니다. 

워드프레스의 테마마다 이 미디어 크기 설정이 조금씩 다르며, 필요한 경우 플러그인을 사용하거나 사용자 함수를 추가하여 다른 크기의 이미지들을 따로 생성할 수도 있습니다.

부족한 글이나마 도움이 되었다면 "좋아요" 부탁드립니다.