리뷰후기, 끄적임

요즘 웹디자이너들 중 코딩을 독학 또는 다양한 방법으로 공부하며 업무 범위를 퍼블리싱까지 넓혀가는 분들이 꽤 많은 것으로 알고 있다. 필자 또한 웹디자인을 공부하면서 HTML, CSS, JQuery 등 코딩 공부를 병행하여 디자인 외 약간의 코딩 작업이 가능하다. 하지만 공부에는 끝이 없는 법. 급변하는 웹, 앱 트렌드를 따라가려면 디자인뿐만 아니라 코딩 개발에도 끊임없이 공부해야 한다. 

시간과 금전적인 여유가 많다면 끊임없이 공부하는 데 어려움이 없을 것이다. 하지만, 필자와 같이 직장을 다니는 동시에 자기개발을 한다는 것이 여간 쉬운 일은 아니다. 필자는 무료 또는 저렴한 가격에 공부에 도움이 되는 강의들이 있는 사이트를 소개하려고 한다.

인프런 이라는 사이트이다. IT 프로그래밍, 크리에이티브, 비즈니스, 마케팅 등의 카테고리가 있으며 필자는 IT 프로그래밍 카테고리의 강의를 보며 자기 계발을 하고 있다. 이 사이트는 페이스북, 구글 등 SNS 계정을 이용해 로그인이 가능하다. 

사이트 로그인 후 상단 로고 옆 '분야별 강좌' 메뉴에서 원하는 카테고리를 선택하면 강의 목록을 볼수 있다. 화면 좌측에서는 강의 목록을 원하는 조건으로 필터링하여 재배열할 수도 있게 되어 있다. 여기서 '무료'를 선택하여 조회하면 무료로 강의를 볼 수 있는 강좌만 보이게 된다. 

화면 상단에서 키워드를 선택하면 해당 키워드와 관련있는 강좌가 필터링된다. 필자는 무료를 선택한 후 html/css, javascript, 웹퍼블리싱, JQuery를 선택해 보았다. 아래 무료로 된 관련 강좌가 꽤 많다. 코딩이라는 것이 혼자 독학한 부분은 내가 한 게 맞는지 틀리는지 알 길이 없다. 인프런에서 기초부터 차근차근 강좌를 보면서 다시금 복습과 예습, 실전에서 쓸 수 있는 소스들을 얻는다. 

물론 원하는 무료강의가 없을 수도 있다. 유료 강의도 저렴한 강의가 많으니 학습자들의 평을 보고 판단하여 유료 강좌를 신청하여 보면 된다. 보고싶은 강좌들을 학습하기 시작하면 내 강좌들에서 강의 리스트를 볼 수 있다. 

학습 진행률을 볼수 있는 '내 학습상황'도 있고, 강좌 내에서 질문과 답변을 받을 수 있는 게시판도 있어서 학습 중에 생기는 궁금증에 대해 피드백도 받을 수 있어서 좋다. 코딩하다 보면 인터넷 검색해도 안 나오고, 어디다가 물어볼 때는 없고, 답답할 때가 종종 있는데 강의 보면서 질문하고 피드백받으면 정말 도움이 많이 된다. 

지금까지 코딩 무료, 유료 강좌를 볼수있는 사이트 '인프런'에 대해 얘기해 보았다. 코딩을 공부하고 있는 디자이너들에게 조금이나마 도움이 되길 바란다.

웹디자이너들이 업무를 할 때 알아두면 좋은 팁을 설명하겠습니다. 디자이너로 일하고 있는데 회사 홈페이지에 걸려있는 이미지를 바꾸고 싶다면? 관리자 페이지에서도 변경 설정이 프로그램화되어 있지 않으며, 개발자나 퍼블리셔가 없는 상황일 때, 오로지 디자인만 해 왔던 분들은 어려운 부분일 수 있습니다. 아래 설명을 잘 따라 하시면 이미지 변경이 어렵지 않습니다. 우선, 이 전에 필자가 설명했던 '웹디자이너의 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을 수정하지 않고는 이미지의 이름과 확장자를 반드시 동일하게 설정해 주어야 합니다. 업로드가 성공적으로 되었다면 홈페이지를 새로고침하여 변경된 이미지를 확인하시면 됩니다.

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

디자인만 하던 웹디자이너들이 개발자 또는 퍼블리셔 없이 홈페이지 이미지 변경은 어떻게 할까? 텍스트 수정은 어떻게 하지? 홈페이지에 관리자 모드가 있어 그곳에서 콘텐츠를 쉽게 변경할 수 있으면 가장 좋지만 홈페이지를 어떻게 만들었냐에 따라 관리자 페이지가 없을 수도 있고 있다 하더라도 변경이 안 되는 부분일 경우가 있을 것이다. 이럴 때 이미지나 텍스트를 수정할 수 있는 스킬이 있다면? 연봉 상승 각인가.

우선 홈페이지 안의 정보를 관리자 모드 없이 수정하려면 FTP에 접속해야한다. 이 FTP란 간단하게 파일 전송 프로토콜(File Transfer Protocol)이다. 이 FTP에 접속하려면 편집기 또는 파일 전송 클라이언트가 있다. 편집기는 어도비 드림위버나 에디트 플러스처럼 FTP 접속해 편집, 업로드, 다운로드 다 가능한 것을 말한다. 파일 전송 클라이언트는 알드라이브, 파일질라 같은 편집이 아닌 업로드, 다운로드만 가능한 것을 말한다. 필자는 퍼블리싱 작업도 병행하다 보니 편집 기능이 함께 있는 드림위버나 에디트 플러스가 편하다.

어떤 프로그램이든 체험기간은 있지 않은가? 에디트 플러스 체험판을 사용하는 방법을 알려주겠다. 에디트 플러스 공식 홈페이지에 접속하면(www.editplus.com/kr/index.html) '다운로드'라는 페이지에 평가판을 무료로 다운로드 할 수 있는 서비스가 제공되고 있다. 다운로드하면 30일 동안 사용해 볼 수 있다. 물론 30일 이후에도 계속 사용하려면 정식 라이선스를 구입해야 만한다. 

에디트 플러스 설치가 완료되면 실행해본다. 그럼 아래와 같은 화면이 보일 것이다.

앞에 말했던 FTP를 설정해야만 접속이 가능하다. 파일>FTP>FTP설정 메뉴를 클릭한다. 

'추가'를 클릭하면 New FTP Account라는 것이 새로 생성되는 것을 볼 수 있다. New FTP Account라고 적혀있는 부분에 내가 알아볼 수 있는 홈페이지의 이름 또는 설명을 작성해주면 된다. 문제는 그다음이다. 설명을 입력하는 란 아래 FTP 서버, Username, Password를 필수로 작성해야 한다. 혹시 이 정보를 알고 있다면 정보를 입력하면 될 것이고, 정보가 없거나 기억이 나지 않는다면 찾아봐야 한다. 

FTP 서버, Username, Password가 다 뭘까? 홈페이지를 만들 때는 호스팅이라는 것을 구매하게 된다. 이때 구매한 호스팅 업체에서 제공해 주는 정보이다. 호스팅 업체는 가비아, 카페 24, 닷홈 등 여러 가지가 있다. 필자는 무료 호스팅을 제공하는 닷홈에 홈페이지를 두고 있다. 닷홈 홈페이지로 들어가 보겠다. 닷홈 홈페이지에서 로그인 후 마이닷홈>웹/이미지호스팅목록>해당홈페이지의 '상세보기'를 클릭하면 아래와 같은 정보가 적혀있는 것을 볼 수 있다.

웹서버/FTP정보에서 웹서버 아이피(=FTP서버), FTP 아이디(=Username), FTP 암호(=Password)를 확인해서 입력하면 된다. 다른 정보는 볼 필요 없다. FTP 암호도 기억이 나지 않는다면 '변경'버튼을 눌러 새 암호를 등록하면 된다. 

위 정보를 다 입력했다면 '확인'버튼을 클릭한다. 그러면 FTP설정 팝업창이 사라질 것이다. 좌측 상단에 선택 박스를 들여다보면 방금 전 설정한 홈페이지가 리스트에 추가되어 있는 것을 확인할 수 있을 것이다. 

설정이 잘 되었다면 선택박스안에 생성된 홈페이지 클릭 시 FTP에 접속할 수 있을 것이다. 좌측 상단의 창에는 접속한 FTP의 폴더 목록이 트리 형식으로 보이지고, 좌측 하단의 창에는 선택한 폴더 안에 업로드되어 있는 파일 목록이 보일 것이다. 

다른 편집기나 파일전송 클라이언트도 FTP 설정 방식은 크게 다르지 않다. 위와 같이 잘 설정이 되었다면 에디트 플러스로 파일 편집부터 이미지 재 업로드 다운로드 모두 가능하다. 다음 편에는 이미지 경로를 찾아서 이미지 변경하는 방법에 대해 포스팅하도록 하겠다. 

[사진출처 : color.adobe.com 홈페이지 내 화면 캡쳐]