홈페이지 화면을 직접 고쳐보려고 검색하다 보면 FTP, 에디터 같은 낯선 단어들이 쏟아집니다. 프로그램 이름은 많은데 뭐가 뭔지, 어떤 걸 깔아야 하는지부터 막히는 경우가 대부분입니다. 사실 필요한 프로그램은 두 가지뿐입니다. 파일을 나르는 프로그램과 파일 내용을 고치는 프로그램입니다. 이 글에서는 현업에서 오래 검증된 프로그램만 골라, 각각 언제 어떻게 쓰는지 설명하겠습니다.
꼭 필요한 프로그램은 두 가지입니다
웹사이트 파일 작업은 크게 두 단계로 나뉩니다. 서버에 있는 파일을 내 컴퓨터로 가져오거나 다시 올리는 단계, 그리고 가져온 파일의 내용을 고치는 단계입니다. 단계마다 쓰는 프로그램이 다르기 때문에, 각각 하나씩만 준비하면 됩니다.
파일을 나르는 프로그램, FTP 클라이언트
FTP 클라이언트는 내 컴퓨터와 웹사이트 서버 사이에서 파일을 나르는 프로그램입니다. USB 메모리에 파일을 담아 다른 컴퓨터로 옮기는 것과 비슷한데, USB 대신 인터넷으로 옮긴다고 생각하면 됩니다. 화면이 좌우로 나뉘어 왼쪽에는 내 컴퓨터, 오른쪽에는 서버의 폴더가 보이고, 옮기고 싶은 파일을 마우스로 끌어다 놓으면 끝입니다.
회사 소개 페이지의 이미지 수십 장을 한꺼번에 올리거나, 수정 작업 전에 웹사이트 파일 전체를 내 컴퓨터로 받아 백업해둘 때 이 프로그램을 씁니다. 홈페이지 관리 화면에서 한 장씩 올리는 것보다 훨씬 빠르고, 관리 화면이 따로 없는 사이트라면 사실상 유일한 방법입니다.
- 파일질라(FileZilla)(윈도우, 맥 모두 지원, 무료): 전 세계에서 가장 많이 쓰는 FTP 프로그램입니다. 사용자가 많아 막히는 부분을 검색하면 한국어 자료도 쉽게 찾을 수 있습니다. 처음이라면 이것부터 쓰면 됩니다.
- WinSCP(윈도우 전용, 무료): 파일질라와 기능은 비슷하고, 국내 개발자들도 많이 씁니다. 둘 중 화면이 더 편한 쪽을 쓰면 됩니다.
- Cyberduck(맥 전용, 무료): 맥 사용자라면 이 프로그램이 화면이 단순해 적응하기 쉽습니다.
파일 내용을 고치는 프로그램, 코드 에디터
FTP로 파일을 내 컴퓨터에 가져왔다면, 이제 그 안의 내용을 고칠 차례입니다. 코드 파일도 결국 글자로 된 문서라서 아무 프로그램으로나 열 수는 있습니다. 문제는 윈도우 기본 메모장으로 열면 수백 줄의 코드가 뒤엉켜 보여서, 고쳐야 할 한 줄을 찾는 것부터 고생이라는 점입니다.
코드 에디터는 이 문제를 해결해줍니다. 태그는 파란색, 글자 내용은 검은색, 주소는 초록색처럼 역할마다 색을 다르게 보여줘서, 코드를 몰라도 어디에 무엇이 있는지 구분이 됩니다. 형광펜으로 밑줄 쳐둔 문서를 읽는 것과 비슷합니다.
- Visual Studio Code(윈도우, 맥 모두 지원, 무료): 현재 전 세계에서 가장 많이 쓰는 에디터입니다. 마이크로소프트가 만들어 꾸준히 관리되고 있고, 태그를 잘못 지우면 빨간 줄로 알려줘서 초보자의 실수를 막아줍니다. 무료 중에서는 이것 하나면 충분합니다.
- EditPlus(윈도우, 유료): 국내 웹 에이전시에서 20년 넘게 써온 프로그램입니다. FTP 기능이 안에 들어 있어서, 파일을 열어 고치고 저장만 하면 서버에 바로 반영됩니다. 프로그램 두 개를 오가는 게 번거롭다면 좋은 선택입니다. 한 달간 무료로 써본 뒤 구매할 수 있습니다.
- Notepad++(윈도우, 무료): 메모장처럼 가볍고 빠르게 켜집니다. 글자 몇 개만 고치는 간단한 작업이 대부분이라면 이 정도로도 충분합니다.
무엇을 골라야 할지 모르겠다면
무료로 시작하고 싶다면 파일질라와 Visual Studio Code 조합이면 충분합니다. 파일 수정과 서버 반영을 한 프로그램에서 끝내고 싶다면 EditPlus를 쓰는 방법도 있습니다. 어느 쪽이든 현업에서 오래 검증된 프로그램이라, 익숙해진 뒤에 다른 프로그램으로 바꿔도 사용법이 크게 다르지 않습니다.
두 프로그램을 실제로 같이 쓰는 순서
홈페이지 메인 배너 이미지를 새 것으로 바꾸는 상황을 예로 들어보겠습니다.
- 파일질라를 켜서 새 배너 이미지(banner_v2.jpg)를 서버의 이미지 폴더에 끌어다 놓습니다.
- 서버에 있는 메인 화면 파일(index.html)을 내 컴퓨터로 끌어다 내려받습니다.
- 내려받은 파일을 코드 에디터로 열어, 예전 이미지 파일명이 적힌 부분을 찾아 새 파일명으로 바꿉니다. 에디터의 찾기 기능(Ctrl+F)으로 예전 파일명을 검색하면 바로 찾을 수 있습니다.
- 저장한 뒤, 파일질라로 그 파일을 다시 서버의 원래 위치에 끌어다 올립니다.
글로 보면 복잡해 보이지만, 실제로는 끌어다 놓기와 글자 바꾸기의 반복입니다. 한두 번 해보면 10분도 안 걸리는 작업이 됩니다. 단, 수정 전 원본 파일을 복사해 따로 보관해두는 습관만은 꼭 지키시기 바랍니다. 잘못 고쳤을 때 원본만 있으면 언제든 되돌릴 수 있습니다.
이런 프로그램도 있다는 것만 알아두세요
검색하다 보면 SSH, 데이터베이스 같은 단어도 만나게 됩니다. 회사 홈페이지나 쇼핑몰을 관리하는 담당자가 직접 쓸 일은 거의 없지만, 어떤 용도인지만 간단히 알아두면 필요할 때 당황하지 않습니다.
서버에 명령어로 접속하는 프로그램
화면 없이 검은 창에 명령어를 입력해 서버를 조작하는 방식입니다. 영화에서 해커가 검은 화면에 글자를 입력하는 장면을 떠올리면 비슷합니다. 서버 프로그램을 설치하거나 설정을 바꾸는 전문 작업에 쓰이며, 윈도우에서는 PuTTY(무료)를, 맥에서는 기본 내장된 터미널을 씁니다. 임대형 홈페이지나 카페24 같은 플랫폼을 쓴다면 접할 일이 없는 영역입니다.
데이터베이스를 들여다보는 프로그램
회원 정보, 게시판 글, 주문 내역 같은 데이터는 파일이 아니라 데이터베이스라는 별도의 저장소에 담겨 있습니다. 이 안을 표 형태로 열어 보여주는 프로그램이 DBeaver(윈도우, 맥 모두 지원, 무료)나 HeidiSQL(윈도우, 무료)입니다. 다만 여기 있는 값 하나를 잘못 고치면 사이트 전체에 문제가 생길 수 있어, 이 영역은 개발자에게 맡기는 것이 안전합니다.
정리하며
처음 시작한다면 파일질라와 Visual Studio Code, 이 두 가지 무료 프로그램만 설치하면 됩니다. 파일을 나르는 일은 파일질라가, 내용을 고치는 일은 에디터가 맡는다는 역할 구분만 기억하면 대부분의 수정 작업을 직접 해볼 수 있습니다. SSH나 데이터베이스처럼 전문 영역의 프로그램은 용도만 알아두고, 실제 작업이 필요해지면 그때 개발자와 상의해도 늦지 않습니다.
