리뷰후기, 끄적임

웹디자이너들이 업무를 할 때 알아두면 좋은 팁을 설명하겠습니다. 디자이너로 일하고 있는데 회사 홈페이지에 걸려있는 이미지를 바꾸고 싶다면? 관리자 페이지에서도 변경 설정이 프로그램화되어 있지 않으며, 개발자나 퍼블리셔가 없는 상황일 때, 오로지 디자인만 해 왔던 분들은 어려운 부분일 수 있습니다. 아래 설명을 잘 따라 하시면 이미지 변경이 어렵지 않습니다. 우선, 이 전에 필자가 설명했던 '웹디자이너의 FTP에 접속하기 : 에디트 플러스'를 보셨다면 따라 하시는데 훨씬 수월합니다. 

먼저, 변경하려는 이미지의 경로를 알아보는 것이 가장 중요합니다. 이미지가 있는 페이지를 브라우저 창에 띄웁니다. 이때 브라우저는 크롬 또는 익스 플로러로 사용하시는 게 좋습니다. 필자가 설명하려는 브라우저는 크롬입니다. 방법은 익스 플로러도 크게 다르지 않습니다.

이미지가 있는 페이지에서 키보드 F12를 눌러봅니다. 그러면 DevTolls라는 창이 팝업 또는 브러우저 화면 우측(익스플로러는 하단)에 나타날 것입니다. 상단 메뉴에 Elements가 활성화되어 있어야 하며, 상단 가장 좌측에 네모와 화살표가 겹쳐있는 아이콘을 클릭합니다. 이후 이 버튼을 셀렉 버튼이라고 칭하겠습니다. 

셀렉 버튼을 클릭하고 이미지에 마우스를 가져다 대면 아래 그림처럼 이미지의 영역이 활성화가 되고, 그 부분을 클릭하면 DevTools의 Elements 내용이 선택한 이미지가 적힌 위치로 펼쳐집니다. 표시된 위치에서 링크된 부분(밑줄)에 마우스를 올리면 이미지의 사이즈 정보를 확인할 수 있습니다.(원본 이미지 사이즈 512*512/ 실제 홈페이지에서 보이는 이미지 사이즈 41*41)

여기서 두 가지 경우로 나뉩니다. html, css를 처음 접하는 분들은 생소할 수 있는 말들이지만 이해하려고 할 필요 없이 보이는 것을 그대로 확인만 하면 됩니다.

첫 번째, img 태그를 썼을 경우. 셀렉 버튼으로 이미지를 클릭 후 DevTools 창의 Elements 내의 이미지 위치가 표시될 것입니다. 이때 img라는 글씨 뒤 src="여기"이 내용을 보시면 됩니다. 이 것이 이미지가 있는 경로가 되겠습니다.

두 번째, 태그의 background로 설정되어 있는 경우. 마찬가지로 셀렉 버튼으로 이미지 클릭 후 DevTools 창의 Elements 내의 표시된 위치에 img라는 글씨가 없다면 우측 Styles의 내용을 봐야 합니다. 여러 가지 글씨 중 background 또는 background-image라는 글씨를 찾아서 url : 여기 이 내용을 보시면 됩니다. 

방금 둘 중 어떤 방법으로든 확인한 내용이 바로 이미지의 경로입니다. 지금부터는 경로에 대해 설명을 드리겠습니다. 경로에는 절대 경로와 상대 경로가 있습니다. 절대 경로는 맨 앞에 '/' 또는 '서버 IP' 또는 '도메인' 등으로 시작하며 상대 경로는 '../' 또는 '영문(도메인이 아닌 영문으로 시작하는 경우)'로 해당 경로가 절대 경로인지 상대 경로인지를 파악해야 합니다. 절대 경로는 FTP에 접속한 뒤 경로에 적혀있는 대로 폴더를 찾아서 따라가면 됩니다. 이때 맨 앞의 '/' 또는 '서버 IP' 또는 '도메인'은 생략하고 그 뒤부터 폴더명을 찾아가면 됩니다. 

(*두 번째 background인 경우인데, 상대 경로로 되어 있다면? css파일을 찾아야 합니다. backgroud가 적혀있는 구간 우측 상단을 보면 여기.css 여기에 마우스를 오버시키면 해당 css의 파일이 있는 경로를 확인할 수 있습니다.)

위 예시 이미지에서는 도메인이 아닌 '영문'으로 바로 시작되어 img/licencse.png라고 확인이 됩니다. 해당 이미지는 상대 경로로 표시가 되었습니다. 상대 경로는 현재 페이지의 위치를 찾는 것이 먼저입니다. 현재 페이지의 위치를 기준으로 상대적인 경로로 작성된 것이기 때문입니다. 해당 예시 페이지는 도메인 주소 뒤에 아무것도 붙어있는 것이 없습니다. 이런 경우 특별한 보안 프로그램으로 개발된 페이지가 아니라면 메인 페이지입니다. 메인 페이지의 파일은 FTP 접속 시 가장 상위 폴더에 있는 index라는 파일입니다. 그럼 최상위 폴더를 기준으로 작성된 경로이기 때문에 절대 경로랑 다를 것이 없습니다. 선택된 이미지는 최상위 폴더 안에 'img'라는 폴더 안에 license.png라는 이미지 파일인 것입니다.(*여기서 말하는 최상위 폴더는 www일수도 있고, html이라고 되어 있을 수도 있습니다. 둘 중 하나가 최상위 폴더입니다. 또는 index파일이 있는 폴더가 최상위 폴더 이기도 합니다.)

만약 예를 들어 해당 페이지가 메인 페이지가 아닌 서브페이지 중 하나였다면 아마 dothome.co.kr/sub/info.html이라고 가정했을 때, 최상위 폴더 안에 'sub' 폴더 안에 info.html이 해당 페이지가 될 것이고 이런 경우 앞에서와 같이 src="img/license.png"인 경우 이미지의 경로는 최상위 폴더 안에 'sub'폴더 안에 'img'폴더 안에 license.png 이미지 파일일 것입니다.

이렇게 이미지의 경로를 찾고 FTP에 접속하여 이미지가 있는 폴더를 찾았다면 변경하려는 이미지를 '이름:확장자'를 동일하게 작성하여 업로드(드래그 앤 드롭)합니다. html을 수정하지 않고는 이미지의 이름과 확장자를 반드시 동일하게 설정해 주어야 합니다. 업로드가 성공적으로 되었다면 홈페이지를 새로고침하여 변경된 이미지를 확인하시면 됩니다.

혹시 필자의 설명이 어렵거나 복잡하여 경로를 확인하는데  어려움이 있는 분들은 댓글로 문의 글 남겨주시면 확인하도록 하겠습니다. 긴 설명 읽어주셔서 감사합니다.