Sublime Text 2
Sublime Text 2의 간단 사용법
나에게는 Notepad++가 동반자였다. Sublime Text라는 강력한 툴을 만나기 전까지는 말이다. 물론 Notepad++도 훌륭한 프로그램임에는 이견이 없으나, Sublime Text라는 툴을 간단한 설정만 해줘도 참 편하게 사용이 가능하단걸 깨닫았다. 그런데 검색을 해보면, 은근히 이 툴을 처음 사용하는 사람들이 참고할 만한 글은 없었다. 나 역시 그런 경우중 하나라서 고생아닌 고생을 하다가 이거 그냥 쓰지 말까라는 생각까지 했었는데, 이런 훌륭한 툴을 나와 같은 경우로 인해서 포기하게 되는 사람들이 생길까봐 A to Z로 간단한 설치 및 사용법을 올려본다.
1. Sublime Text 설치 및 글꼴 설정
Sublime Text는 2버전과 3버전이 있는데, 3버전은 아직 플러그인이라던지 그런 면들에 있어서 많이 나오지 않은 듯 싶다. 기능도 2버전이면 나는 충분한 듯 하다. 아래 링크로 들어가서 적절한 버전을 다운받는다.
뒤에 2가 붙은건 2버전을 받겠다는 뜻이고 3버전을 받고 싶으면 3을 치고 들어가면 된다..
설치하고 나서 프로그램을 켠 후 한글을 쳐보면 한글이 안나옴을 알 수 있다! 이 부분이 첫번째로 막히던 부분인데, 해결책은 간단했다. 한글폰트가 적용이 안된 것이다. 해결을 위해선 글꼴 설정을 해 주어야 한다. 영어로는 Preference라고 하는데, Sublime Text의 경우에는 이런 Preference가 json형식으로 되어있다. 이런 형식에 익숙치 않은 사람에게는 어려울 수도 있겠지만, 두줄이면 되니까 따라해보자.
Preference -> Settings - User로 들어가서,
위와 같은 형식으로 치면 된다. 복사 할 수 있게 아래에 코드를 다시 써보면
{ "font_face": "NanumGothic", "font_size": 12 }
여기서 font_face는 글꼴인데, 시스템에 나눔고딕이 없다면 Dotum으로 설정하면 된다. 돋움체가 Dotum이고 원하는 글꼴이 있다면 그것을 쓰면 된다. font_size는 글꼴 크기를 조정하기 위함인데 어차피 Ctrl 키와 -키 +키의 조합으로 확대 축소가 가능하니 크게 의미가 있지는 않다. NanumGothic 뒤에 ,가 있음에 주의하자. json은 A:B와 C:D가 있으면 그 사이에 ,가 필요하다.
2. SFTP 설정
위 설정만 하여도 당장에 사용은 가능한데, 나는 웹개발을 요즘 하고 있어서 FTP에 바로 올릴 수 있는 플러그인이 있으면 좋겠다고 생각을 했고, Sublime Text는 방대한 플러그인을 가지고 있기 때문에 나의 이런 욕구를 바로 충족시켜 주었다. 어렵지 않으니 따라해보자.
우선 Ctrl + `를 누르면 콘솔창이 뜬다. 여기서 아래 코드를 복사해서 붙여넣기 한다.
import urllib2,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read()); print 'Please restart Sublime Text to finish installation'
그런다음 Sublime Text를 다시 켠다. 그 후 Preference에 들어가보면, Package Control이라는 메뉴가 맨 하단에 생성되어 있다. 이를 누른 후, Install Package를 아래 그림과 같이 선택한다.
나는 이미 깔려 있어서 목록에 뜨지는 않는데, SFTP를 선택한 후 엔터키 치면 바로 설치가 시작된다. 그 후엔 폴더를 연동해야 한다. 우선 폴더를 하나 만든 후, 위에서 폰트를 연동한 것과 같은 방법으로 json형식의 설정파일을 수정해야 한다. 폴더를 Open한 뒤에 (File에 들어가면 있다) 그 폴더 위에서 우클릭을 하면,
위 사진 처럼 Map to Remote라는 메뉴가 있다. 이를 누르자. 그러면,
설정 파일이 뜬다. 여기서 코드를 수정해야 하는데, 일단 본인 계정의 ftp계정의 포트와 아이디 비밀번호, 접속 방식은 기본적으로 알고 있을것이라는 가정 하에서 설명한다.
{ // The tab key will cycle through the settings when first created // Visit http://wbond.net/sublime_packages/sftp/settings for help // sftp, ftp or ftps "type": "ftp", "save_before_upload": true, "upload_on_save": true, "sync_down_on_open": false, "sync_skip_deletes": false, "sync_same_age": true, "confirm_downloads": false, "confirm_sync": true, "confirm_overwrite_newer": false, "host": "readiz.com", "user": "readiz", "password": "abcd", //"port": "22", "remote_path": "/", "ignore_regexes": [ "\\.sublime-(project|workspace)", "sftp-config(-alt\\d?)?\\.json", "sftp-settings\\\\.json", "/venv/", "\\.svn", "\\.hg", "\\.git", "\\.bzr", "_darcs", "CVS", "\\.DS_Store", "Thumbs\\.db", "desktop\\.ini" ], //"file_permissions": "664", //"dir_permissions": "775", //"extra_list_connections": 0, "connect_timeout": 30, //"keepalive": 120, //"ftp_passive_mode": true, //"ssh_key_file": "~/.ssh/id_rsa", //"sftp_flags": ["-F", "/path/to/ssh_config"], //"preserve_modification_times": false, //"remote_time_offset_in_hours": 0, //"remote_encoding": "utf-8", //"remote_locale": "C", }
type 부분은 sftp와 ftp가 있는데, sftp면 sftp를, ftp면 ftp를 써주면 되고, upload_on_save는 로컬에서 파일을 수정해 저장을 하면 동시에 바로 서버에 업로드함을 듯한다. sync_down_on_open은 로컬에서 파일을 열면 서버에서 그 파일을 받아와 열어준다는 것이고, 중요한건 이것까지인 듯 싶다.
host는 접속 도메인, user는 user name, password는 비밀번호다. port도 기본포트가 아니라면 주석표시인 //를 지우고 입력해주면 된다.
로컬 폴더 전체를 서버와 동기화시키고 싶지 않다면 remote_path는 /가 아닐 것이다. 일단 잘 모르겠으면 /로 두어도 된다. /로 두면 ftp의 폴더 구조 전체가 pc로 들어오는 것이다. 나같은 경우에는 /로 둔 다음에, ignore_regexes를 수정하여 원하지 않는 폴더는 동기화에서 빼버렸다. 만약 /abc/라는 폴더의 동기화를 하고 싶지 않다면 /abc/를 추가하면 된다. 간단하다. 이렇게 설정이 잘 된후에 저장을 하면 아래 그림처럼 저장과 동시에 업로드가 된다. (위 설정 중 upload_on_save를 켜 두어야 한다. 그렇지 않으면 파일 저장 후 그 파일 이름을 우클릭해서 Sync Local->Remote를 눌러야 한다)
사용해보면 정말 편한 플로그인이 아닐 수 없다. 이렇게 Sublime Text의 설치부터 FTP 연결까지 A to Z의 강좌를 마친다. 궁금한 점 있으시면 댓글로 남겨주시길..
'Creation > Design' 카테고리의 다른 글
[CSS] CSS로만 만든 배경 / 그레디언트 들어간 배경 쓰기 (5) | 2014.02.24 |
---|---|
[폰트] 구글 Fonts이용, 영문 웹폰트 적용시키기 (9) | 2014.02.22 |
[CSS] 원형 이미지 마스크 & transform 속성으로 회전시키기 (2) | 2014.02.19 |
[CSS] 웹폰트 로딩중에도 본문 나오게 하기 (4) | 2014.01.13 |
플랫 디자인 색상 예제 / 색상코드(색상표) (3) | 2013.12.23 |
텍스트 편집기 Sublime Text 2의 기초 설정부터 FTP 연결까지 (16) | 2013.12.19 |
[CSS] 브라우저 캐시 때문에 CSS 수정이 반영이 안될 때 (2) | 2013.12.18 |
[CSS] CSS의 핵심 2편 - 속성(Attribute)값 알아보기 (0) | 2013.12.01 |
[CSS] 웹디자인, 페이지 구성, CSS 처음 배워도 할 수 있다. CSS의 핵심 1편 (0) | 2013.11.21 |
[JQueryMobile] Grid 사용방법 / Grid 개념 (0) | 2013.11.11 |
[JQuery] JQueryMobile을 이용한 Simple Index Page 초기화면 (0) | 2013.11.06 |
좋은 정보 감사합니다
설치 및 json 파일도 만들고 host정보 까지 입력하였는데
제일 중요한 접속은 어떻게 하는건지 가르쳐 주실 수 있겠습니까
에디트플러스만 사용하다보니 잘 모르겠습니다
접속이라는 개념이 따로 없습니다 ^^;
파일을 올릴 때 자동으로 접속되고, 파일이 다 올라가면 접속이 자동 종료됩니다.
위 글처럼 "upload_on_save": true 로 두시면, 저장 할 때 자동으로 서버로 올라가서 저장됩니다. 수동으로 업로드 시키려면 파일에서 오른쪽클릭을 통한 메뉴로 업로드 시키면 됩니다.
답변 감사드립니다
하지만 무지한 저에겐 오르지 못할 산처럼 느껴집니다
조금만더 도와주실수 있으시겠습니까
폴더 오른쪽키 -> 다운로드(업로드) 폴더 클릭하면은
경고창으로 이런 문구가 출력됩니다
Sublime SFTP
An encoding error encountered trying to read from the server.
Please adjust the "remote_encoding" setting in sftp-config.json
common encodings include :
"utf-8" : Default and most common encoding
"cp1252" or "iso-8859-15" : Danish, Dutch, English, French, German
등등등 이하 생략
그리고 밑에 하단에는
Connecting to FTP server "아이피" as "계정명??" failure (Encoding error)
라고 뜹니다.. 머 어떻하라는건지 모르겠네요
죄송하지만 한번만 더 답변을 부탁드립니다
설명만 보면, 일단 설정하는 json파일 하단부를 보세요.
//"remote_encoding": "utf-8" 라고 되어있는 부분이 있을 겁니다.
앞에 //가 주석이라는 뜻인데, 실제로 작동시키지 않는다는 뜻입니다.
//를 지우고, 사용하시는 FTP가 어떤 인코딩을 사용하는지 알아내신 다음에 그 설정을 넣으셔야합니다.
utf-8이 기본값이구요, 한국서버면 euc-kr등으로 바꿔서 해보시기 바랍니다. 해당 서버의 인코딩 설정을 모르기 때문에 어떤 인코딩으로 바꿔라 라고 제안해드리지 못하는 점은 양해해주시구요.. 서버 관리자한테 물어보는게 제일 빠릅니다. ftp인코딩 뭐로쓰고 있냐고.. 그걸로 설정해주시면 됩니다.
친절한 답변 감사드립니다
euc-kr로 하니깐 되는군요
사실 euc-kr로 저장한 후에 그 다음을 몰라서 계속 헤매다가
폴더 오른쪽키 클릭 SFTP/FTP 다음 Sync local -> Remote
를 클릭하니 서버에 있는 파일들을 내려받기 시작했습니다
근데 이게 서버에 있는거 다 내려받다가 한나절 걸리겠네요..
외국프로그램이라 확실히 좀 어려운듯 싶습니다
다시한번 친절한 답변 감사드립니다
ㅎㅎ 고생하셨어요. 그렇게 한 다음에 "upload_on_save": true 로 설정해두시면 파일 저장할 때마다 서버에 업로드 됩니다. 참 편하죠.
참고할만한 곳 : http://juhoi.tistory.com/51
- 전체 화면 : [f11]
- 한줄 주석/취소 : [Ctrl + /]
- 블럭 주석/취소 : [Ctrl + Shift + /]
- 현재라인 한라인 위로 : [Ctrl + Shift + up]
- 현재라인 한라인 아래로 : [Ctrl + Shift + down]
- 아래로 한라인 추가 : [Ctrl + Enter]
- 위로 한라인 추가 : [Ctrl + Shift + Enter]
- 현재라인 삭제 : [Ctrl + Shift + k]
- 현재라인 바로 아래 복사 : [Ctrl + Shift + d]
- 코드 펴기/접기 : [Ctrl + Shift + [, ]]
syntax 자동 완성 기능은 어떻게 하나요??
매일 에디트플러스만 썼었는데요.
하.. 처음엔 무슨 소리인가 이해도 안되고
이거 못하는 제 자신한테 너무 화가 났었는데
차근차근 읽어보니 이제야 대충 알겠네요.
큰 도움 얻었습니다. 에디트플러스보다 훨씬 뭔가 개발하기 좋은 환경이라고 느껴지네요ㅋㅋ
정말 감사합니다!
에디트플러스에 익숙해서 그런지 어렵네요.. ^^
배우고 갑니다 ^^
고마워요.
sublime 매우 재밌는 툴이네요.
왼쪽 사이드바에 전체 FTP 경로/파일이 다 browsing되게는 안되나요? 에디트 플러스 같이 바로 바로 불러오게 할려구요. 매번 ftp파일을 불러올때마다 browsing remote.. 또는 단축키로 하기가 불편하네요.
우와... 우와... 지금까지 서브라임 반쪽만 쓰고 있었네요.
우선 폴더를 하나 만든 후, 위에서 폰트를 연동한 것과 같은 방법으로 json형식의 설정파일을 수정해야 한다
이게 무슨 말이야 !!! 장난해?
"remote_path": "/", 이렇게 설정했는데
FTP does not use drive letters in path names 라는 에러창이 뜨며 안되네요
뭐가 문젠가요?
제가 닷홈의 도메인과 호스팅을 사용하고 있는데 무료 호스팅이라 sftp 연결은 지원하지 않고 ftp만 지원 가능하다고 합니다. 그래서 type은 ftp로 하고 나머지 정보를 입력 후 싱크 리무트 로컬을 했는데 타임아웃 오류가 뜹니다. 그전에 Sublime SFTP
An encoding error encountered trying to read from the server. 오류도 떠서 "remote_encoding": "euc-kr", 로도 바꿔봤는데 전혀 나아지질 않네요. 뭐가 문제인걸까요?