웹세계에 오신 것을 환영합니다.

현대의 우리들은 하루의 절반을 웹세계에서 보내고 있습니다.
SNS, 메일쓰기, 일정관리, 게임하기, 뉴스보기, 공부하기, 숙제제출, 연구하기, 영화보기.. 인터넷과 연관되지 않는 삶을 생각할 수 조차 없습니다.
그리고 그 가운데 웹(Web) 이 있어서 전세계의 모든 컴퓨터와 스마트폰을 서로 연결해 주고 있습니다.

초등학교에 가면 가장 먼저 국어를 배웁니다.
3-4살 만 되어도 말은 할 수 있지만 학교에 가면 쓰는 법을 배우듯, 웹언어도 쓰는 문법이 있습니다.
Html 이라고 부르는 것이 바로 웹언어 문법입니다.
줄 바꾸기, 문단 나누기, 중요한 단어 강조하기.. 같은 것으로 국어 문법 보다 훨씬 쉽습니다.

그런데 공부를 하려면 준비물이 필요한데 바로 공책입니다.
선생님이 불러 준 내용을 받아 쓸 공책도 여러가지가 있습니다. 원고지 노트, 줄노트, 연습장..
마찬가지로 웹공부를 할 때 꼭 필요한 공책이 바로 '에디터(Editor)' 라는 프로그램입니다.
이번 장을 읽어 보고 나에게 잘 맞는 에디터를 골라 봅시다.

그리고 앞으로 수업에서 경어는 사용하지 않는 점 깊은 양해를 바랍니다.
학교에서 배웠듯이, 또 친구가 옆에서 알려 주는 느낌으로 설명하고 싶었기 때문입니다.
시작해 볼까요?

▶ VS Code

정식 명칭은 '비주얼스튜디오 코드 (Visual Studio Code)' 야.
마이크로소프트에서 나온 제품 답게 에디터에서 최고의 제품이라고 할 수 있어. 그리고 무료!
에디터 중에서는 늦은 2016년에 첫 버전이 나왔는데 이게 나오자 에디터 순위가 싹 바뀔 만큼 엄청난 기능과 인터페이스를 갖추고 있어.
HTML, PHP를 비롯한 거의 모든 언어를 지원하고 그밖에 수많은 확장기능을 갖추고 있어.
추천 1위인 만큼 우선 이것 부터 설치해서 사용해 보기를 권해.
초보자도 이것을 쓰고 있으면 남이 뒤에서 보면 엄청난 고수가 작업하는 것 같이 보여..ㅎ

     https://code.visualstudio.com/

다운받은 뒤 설치 방법은 여기서 설명할 필요없이 간단하지만, 메뉴를 한글로 바꾸기 위해서는 확장 프로그램을 설치해야 하는데 이것은 다른 분이 친절하게 설명한 블로그를 링크할께.
(영어 메뉴가 더 편하게 느끼는 분이라면 한글메뉴 확장 프로그램 설치 안해도 돼.)
아래 블로그 외에도 네이버, 구글에서 'VS CODE 설치' 같은 검색어로 검색하면 수많은 설치방법을 찾을 수 있어.

     https://foxcg.com/816
     https://blog.naver.com/yori_jori_/222415898370

▶ NotePad++ (윈도우용)

VS Code 가 나오지 않았다면 아마 가장 먼저 소개했을 에디터야.
VS Code 못지 않은 기능과 확장 프로그램을 가지고 속도는 VS Code 보다 훨씬 빨라.
또 한글 메뉴도 확장설치 필요없이 설정에 가서 한글만 선택해 주면 되고.
그리고 무료야.
컴퓨터 사양이 좀 딸려서 VS Code가 무겁고 느린것 같으면 이것을 사용하면 훨씬 빠르게 작동할거야.

     https://notepad-plus-plus.org/

▶ 메모장2 (윈도우 전용)

VS Code 의 단점이라면 MS 제품답게 덩치가 너무 크고 느려.
(물론 느리다는 것은 컴퓨터 사양에 따라 다르겠지만)
사실 에디터 작업의 99%는 코드 작성인데 부가기능이 너무 많다는 것도 단점이 되기도 하거든.
'메모장2' 는 아주 작고 빠른 에디터이면서 구문강조 같은 기본기능은 아주 충실해.
그래서 VS Code 같은 프로그램을 사용하면서도, 윈도우 탐색기에서 파일 1개 간단히 보거나 수정할 때는 이 '메모장2'를 사용하는게 더 편리할 때가 많아.
또 이렇게 에디터가 두 개를 사용하면 두개를 띠워 놓고 내용을 비교할 때도 좋고.

원래 영문 프리웨어인데 소스까지 공개되어 메뉴를 한글화 한 버전들도 많이 있어.
구글에서 '메모장2 다운로드' 를 검색하면 쉽게 찾을 수 있어.
버전도 여러가지 인데 여기에는 내가 좋아하는 한글화 버전의 설치방법을 간단히 소개할께.
아래 링크에 가서 최신버전을 다운 받도록 해.

     https://teus.me/category/IT/Notepad2

여기는 NotePad2의 한글화 버전만 열심히 만들고 있는 BLUEnLIVE 님의 블로그인데, 가장 최신 버전의 한글화 버전을 열심히 만들어 올려 주는 정말 고마운 분이셔..ㅎ
설치방법은 일단 바탕화면이나 임시 폴더에 압축파일을 해제하고..

1. 컴퓨터가 64Bit 이면 Release_X64 폴더만 남기고, 32Bit 컴은 Release_X86 만 남기고 나머지 폴더 삭제
   (3개 폴더가 생기는데 내 컴퓨터 사양에 맞는 하나만 있으면 돼..)
2. 남긴 폴더에 들어가 모든 파일을 복사해서 C: 드라이브의 적당한 폴더에 이동 또는 복사.
   (예를들어 C:\Notepad2 폴더에 넣었다고 가정하고 설명)
3. 탐색기로 폴더에 들어가 NotePad2.exe 를 선택하고 [마우스 우클릭 > 보내기 > 바탕화면에 바로가기만들기] 선택.
4. 다시 탐색기에서 마우스 우클릭, [관리자 권한으로 실행]
5. [설정] 메뉴에서 [고급설정 > 시스템통합] 선택
6. [문맥메뉴에 편집항목 추가] , [메모장 대신 사용]
7. 끝내기

이렇게 해두면 (6번) 설정에 의해 윈도우의 기본 메모장을 완전 대신 사용하게 돼.
주의할 점은 설정 할 때 (4번) 에서 반드시 [관리자 권한으로 실행]으로 시작해야 (6)번 기능이 체크돼.
한 번 사용하기 시작하면 아마 다시는 윈도우 기본 메모장은 쓰지 않게 될거야...ㅎ

▶ EditPlus (유료)

'에디트플러스(EditPlus)' 는 한국인이 만든 프로그램 중 가장 유명한 프로그램이 아닌가? 싶은 에디터야.
그만큼 국내 뿐 아니라 전세계에서 가장 인기있는 에디터 중 하나야. (그것도 유료인데도..)
VS Code 가 나오면서 좀 줄기는 했겠지만 전문 프로그래머 중에서 EditPlus 모르는 사람은 거의 없을거야.
크기도 작으면서 엄청난 속도와 편리함 때문에 지금도 많은 사랑을 받고 있는 프로그램이야.
EditPlus 가 특히 인기있는 이유 중 하나는 이 에디터 안에서 원격 서버에 있는 파일을 직접 편집할 수 있다는 점이야.
(VS Code 등도 확장 프로그램을 설치하면 가능하지만 EditPlus는 기본기능인데다 속도도 빨라서.)

위 VS Code 와 메모장2 를 사용하다 뭔가 좀 다른 것도 테스트해 보고 싶다면 꼭 추천하는 프로그램이야.
3만원도 안되는 가격에 한번 구매하면 평생 사용할 수 있으니 가격도 부담되지는 않을것 같아.
구매하기 전에 1달 동안 작동하는 평가판을 사용해 볼 수도 있어. 다운로드는. .

     https://www.editplus.com/kr/

참고로 나는 위에서 설명한 VS Code, NotePad++, 메모장2와 심지어 에디트플러스도 모두 사용하고 있어.
그때 그때 편리한 점들이 각각 달라서..
여러분도 하다 보면 에디터는 몇 개 씩 사용하게 될거야.

▶ 코딩용 글꼴 (D2Coding)

에디터로 코드를 작성하다 보면 글꼴 폰트에 관심이 생기게 될거야.
(VSCode 를 사용하는 분을 잘 모르겠지만 다른 에디터를 사용할 때.. 왜냐하면 VSCode 는 한국에 지사도 있는 MS에서 만든 만큼 이런 디테일까지 고려하기 때문인지 눈치 채지 못하는 사용자들이 많기는 하지...ㅎ)
맑은고딕, 굴림, 고딕 같은 글꼴을 사용하면 코드에 입력한 숫자1과 영문l, 숫자0 과 영문O 같은 글자들과 따옴표, 쌍따옴표 등이 명확히 구분되지 않아 실수를 할 때가 많이 생기고, 글자 사이의 간격도 일정한게 작업이 편해.

그래서 윈도우에 기본으로 있는 consols, CourierNew, monospace 같은 글꼴을 많이 사용하는데 이와는 별도로 프로그램 코딩을 위한 전용 글꼴들도 많이 개발되어 있어.
이들 중 내가 좋아하는 글꼴은 네이버에서 개발한 'D2Coding' 이라는 이름의 글꼴이야.
특히 한글과 영문의 글꼴 크기 비율이 적당해서 좋아 하는 글꼴이야.

이 글꼴을 다운 받아 설치하고 나면 위에서 설명한 모든 에디터에서 이 글꼴을 편집할 때의 기본 글꼴로 설정해 두고 사용할 수 있어.
지금 사용하는 글꼴이 마음에 들지 않는 분이라면 한 번 바꿔 보라고 다운로드 링크를 알려 둘게.

     https://github.com/naver/d2codingfont

자, 이제 학습할 준비는 모두 끝났으니 본격적으로 웹세계에 들어가 볼까?



다음 학습 : Html 과 CSS