시작 전 코딩을 위한 준비물

작가 pressfoto 출처 Freepik

먼저 코딩을 하기 전에 내가 작성한 코드가 실제 웹 화면을 통해 결과물을 보면서 코딩을 할 프로그램이 필요할 것 입니다.

코딩을 한 결과물을 웹에서 보기 위해선 다양한 에디터 프로그램을 통하여 소스를 편집하고, 서버 접속 프로그램을 통하여 내가 만든 소스의 결과물을 서버에 업로드 함으로서 웹사이트의 화면이 보여지게 됩니다.

 

코딩을 하여 웹 화면에 결과물을 보여 주기 위해 준비물은 크게 3가지 정도가 있습니다.

 

1.호스팅 서버 :

가비아, 카페24, 닷홈 등 다양한 국내 호스팅 사이트에서 쉽게 서버를 구매하실 수 있습니다.

 

2.ftp 접속 프로그램 :

파일질라(FileZilla) https://filezilla-project.org/

알드라이브 https://altools.co.kr/product/ALDRIVE

알드라이브 | 공식 다운로드

등이 있으며, 각자 편한 프로그램을 활용하면 됩니다.

 

3.에디터 프로그램

서브라임 텍스트(sublime text) http://www.sublimetext.com/

Sublime Text - the sophisticated text editor for code, markup and prose

에디트 플러스(Editplus) https://www.editplus.com/kr/

에디트플러스 - 윈도우용 문서 편집기, HTML 편집기, PHP 편집기, Java 편집기

VSCode (Visual Studio Code) https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

이 대표적으로 사용되며,

 

이외에도 
 - 노트패드(Notepad++)
 - 울트라 에디트(UltraEdit)
 - 브라켓(Brackets)
 - 아톰(Atom)

 

등 다양한 에디터 프로그램이 있습니다.

---

하지만 우리는 디자인한 화면을 보며 서버없이 로컬환경에서 실시간으로 결과물을 보며 웹 퍼블리싱을 연습하기에는 

Brackets https://brackets.io/

A modern, open source code editor that understands web design

이라는 좋은 프로그램을 추천합니다.

어도비에서 제작한 텍스트 에디터며 cc(creative cloud)에는 등록되지 않고, Github를 통해 오픈소스로 올려져 있습니다.

 

왜 Brackets로 연습을 하는가?

라이브 프리뷰라는 특징이 있는 에디터 프로그램입니다.

웹 디자이너 그리고 프론트 엔드 개발자에게는 아주 강력한 기능으로, 소스 편집 후 새로고침 없이 크롬 브라우저를 통해 실시간으로 반영 시켜줍니다.

 

하지만 고도한 개발을 해야하는 개발자들에게 추천하는 프로그램은 아닙니다.

 

코딩 화면

실시간 라이브 프리뷰 기능을 통해 아래와 같은 실시간 화면을 볼 수 있습니다.

라이브 화면

앞으로 위 프로그램을 통하여 html 부터 차근차근 연습해보며 추후 직접 디자인한 화면가지 구현해 보도록 하겠습니다.