1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
|
---
title: 기본 소프트웨어 설치하기
slug: Learn/Getting_started_with_the_web/Installing_basic_software
tags:
- Beginner
- Browser
- Learn
- Setup
- Tools
- WebMechanics
- l10n:priority
translation_of: Learn/Getting_started_with_the_web/Installing_basic_software
original_slug: Learn/Getting_started_with_the_web/기본_소프트웨어_설치하기
---
<div>{{LearnSidebar}}</div>
<div>{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}</div>
<div class="summary">
<p>기본 소프트웨어 설치하기에서는 간단한 웹 개발을 하기 위해 어떤 도구가 필요하고, 어떻게 설치할 수 있는지 보여드립니다.</p>
</div>
<h2 id="전문가들이_사용하는_도구는_뭔가요">전문가들이 사용하는 도구는 뭔가요?</h2>
<ul>
<li><strong>컴퓨터</strong>. 당연한 얘기로 들리겠지만, 여러분 중 누군가는 이 글을 휴대폰이나 도서관의 컴퓨터로 읽고 계실겁니다. 진지한 웹 개발을 위해서는 데스크탑 컴퓨터(윈도우, 맥, 또는 리눅스)에 투자하는것이 좋습니다.</li>
<li>코드 작성을 위한 <strong>텍스트 편집기</strong>. 순수 텍스트 편집기(<a href="https://www.sublimetext.com/">Sublime</a>, <a href="http://brackets.io/">Brackets</a>, <a href="https://atom.io/">Atom</a>, <a href="https://code.visualstudio.com/">Visual Studio Code</a> 등) 또는 하이브리드 편집기(<a href="https://www.adobe.com/products/dreamweaver.html">Dreamweaver</a>, <a href="https://www.jetbrains.com/webstorm/">WebStorm</a> 등)를 사용하시면 됩니다. 사무용 문서 편집기는 웹 브라우저의 렌더링 엔진을 방해하는 숨겨진 요소를 사용하기 때문에 코드 작성 용도로는 적합하지 않습니다.</li>
<li>코드를 테스트하기 위한 <strong>웹 브라우저</strong>. 현재 가장 널리 사용되는 브라우저로는 <a href="https://www.mozilla.org/ko/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>, <a href="https://www.apple.com/kr/safari/">Safari</a>, <a href="https://support.microsoft.com/ko-kr/help/17621/internet-explorer-downloads">Internet Explorer</a>, 그리고 <a href="https://www.microsoft.com/ko-kr/windows/microsoft-edge">Microsoft Edge</a>가 있습니다. 또, 여러분의 웹 사이트가 휴대용 장치와 오래된 브라우저(IE 8~10 등)에서는 어떻게 동작하는지도 시험해보셔야 합니다.</li>
<li>웹 페이지를 위한 이미지를 만들 수 있는 <strong>이미지 편집기.</strong> <a href="http://www.gimp.org/">GIMP</a>, <a href="http://www.getpaint.net/">Paint.NET</a>, <a href="https://www.adobe.com/kr/products/photoshop.html">Photoshop</a> 등이 있습니다.</li>
<li>서버 파일 관리, 프로젝트 협업, 코드와 자원 공유, 수정 충돌 방지를 위한 <strong>버전 관리 시스템</strong>. 지금은 <a href="http://git-scm.com/">Git</a>이 제일 대중적인 버전 관리 시스템이며 Git 기반의 코드 공유 서비스인 <a href="https://github.com/">GitHub</a>도 매우 유명합니다.</li>
<li>오래 된 웹 호스팅 계정에 파일을 올리기 위한 <strong>FTP 프로그램</strong>. 지금은 점점 Git이 FTP를 대체하고 있습니다. (S)FTP 프로그램은 <a href="https://cyberduck.io/">Cyberduck</a>, <a href="https://fetchsoftworks.com/">Fetch</a>, <a href="https://filezilla-project.org/">FileZilla</a> 외에도 무수히 많습니다.</li>
<li>코드 압축과 테스트 등 반복 작업을 자동으로 수행하기 위한 <strong>자동화 시스템</strong>. <a href="http://gruntjs.com/">Grunt</a>나 <a href="http://gulpjs.com/">Gulp</a> 등이 있습니다.</li>
<li>흔히 쓰이는 기능의 코드 작성 속도를 높히기 위한 템플릿, 라이브러리, 프레임워크, 기타 등등.</li>
<li>이 밖에도 더 많은 도구들을 써요!</li>
</ul>
<h2 id="지금_당장_필요한_도구는_뭔가요">지금 당장 필요한 도구는 뭔가요?</h2>
<p>전문가가 사용하는 리스트가 두렵게 다가올지도 모르지만, 다행히도 여러분은 저런 대부분의 것들을 모르더라도 웹 개발을 시작하실 수 있습니다. 이 글을 통해 여러분이 최소한의 도구(텍스트 편집기와 최신 웹 브라우저 같은)를 마련할 수 있도록 할 것입니다.</p>
<h3 id="텍스트_편집기_설치하기">텍스트 편집기 설치하기</h3>
<p>지금도 기본적인 텍스트 편집기는 아마 갖고 계실겁니다. Windows는 기본으로 <a href="https://ko.wikipedia.org/wiki/%EB%A9%94%EB%AA%A8%EC%9E%A5_(%EC%86%8C%ED%94%84%ED%8A%B8%EC%9B%A8%EC%96%B4)">메모장</a>을, macOS는 <a href="https://en.wikipedia.org/wiki/TextEdit">TextEdit</a>을 포함하고 있습니다. Linux는 배포판마다 다르지만, Ubuntu는 <a href="https://ko.wikipedia.org/wiki/Gedit">gedit</a>을 가지고 있습니다.</p>
<p>웹 개발을 위해서라면 메모장이나 TextEdit보다는 좋은걸 써야 할겁니다. <a href="http://brackets.io/">Brackets</a>를 추천드립니다. 무려 무료인데다가(쫭쫭) 실시간 미리보기와 코드 힌트도 제공하기 때문이에요!</p>
<h3 id="최신_웹_브라우저_설치하기">최신 웹 브라우저 설치하기</h3>
<p>이제, 코드를 테스트할 데스크탑 웹 브라우저를 몇 가지 설치할겁니다. 다음 목록에서 여러분의 운영체제를 고른 후 원하시는 브라우저의 링크로 들어가 설치하세요.</p>
<ul>
<li>Linux: <a href="https://www.mozilla.org/ko/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>.</li>
<li>Windows: <a href="https://www.mozilla.org/ko/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>, <a href="https://support.microsoft.com/ko-kr/help/17621/internet-explorer-downloads">Internet Explorer</a>, <a href="https://www.microsoft.com/ko-kr/windows/microsoft-edge">Microsoft Edge</a> (Window 10은 Edge를 탑재하고 있습니다. Windows 7 이상에선 Internet Explorer 11을 설치할 수 있습니다. 이외에는 다른 브라우저를 설치해야 합니다)</li>
<li>Mac: <a href="https://www.mozilla.org/ko/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>, <a href="https://www.apple.com/kr/safari/">Safari</a> (Safari는 iOS와 macOS에 탑재되어 있습니다)</li>
</ul>
<p>다음으로 진행하기 전에, 테스트를 위해 최소 두 개 이상의 브라우저를 설치해야 합니다.</p>
<h3 id="로컬_웹_서버_설치하기">로컬 웹 서버 설치하기</h3>
<p>어떤 예제는 제대로 작동하려면 웹 서버가 필요합니다. <a href="https://developer.mozilla.org/ko/docs/Learn/Common_questions/set_up_a_local_testing_server">로컬 테스트 서버 설치하기</a>에서 설치하는 방법을 알아보세요!</p>
<p>{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}</p>
<h2 id="이번_과정에서는">이번 과정에서는</h2>
<ul>
<li id="Installing_basic_software"><a href="/ko/docs/Learn/Getting_started_with_the_web/%EA%B8%B0%EB%B3%B8_%EC%86%8C%ED%94%84%ED%8A%B8%EC%9B%A8%EC%96%B4_%EC%84%A4%EC%B9%98%ED%95%98%EA%B8%B0">기본 소프트웨어 설치하기</a></li>
<li id="What_will_your_website_look_like"><a href="/ko/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">What will your website look like?</a></li>
<li id="Dealing_with_files"><a href="/ko/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a></li>
<li id="HTML_basics"><a href="/ko/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML basics</a></li>
<li id="CSS_basics"><a href="/ko/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS basics</a></li>
<li id="JavaScript_basics"><a href="/ko/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript basics</a></li>
<li id="Publishing_your_website"><a href="/ko/docs/Learn/Getting_started_with_the_web/Publishing_your_website">Publishing your website</a></li>
<li id="How_the_web_works"><a href="/ko/docs/Learn/Getting_started_with_the_web/How_the_Web_works">How the web works</a></li>
</ul>
|
