웹 개발은 Visual Studio Code, Notepad++, Textmate, Coda 및 Node.js 등 웹 편집기를 사용해서 소스 작업을 진행합니다. 개발에 앞서 작업할 웹 브라우저와 웹 편집기를 선택해야 합니다. 오늘 글에서는 브라우저와 웹 편집기의 종류와 기능들을 비교해 보겠습니다.
웹 브라우저의 종류
웹 브라우저는 웹 개발자가 제작한 웹 사이트 및 웹의 자료에 접근을 지원하여 보여주는 프로그램을 말합니다. 대표적으로 아래 3가지가 있습니다.
크롬 (Chrome)
구글에서 지원하는 웹 브라우저로 세계적으로 가장 많이 사용되는 웹 브라우저 중 하나입니다. 또한 상황에 따라 필요한 확장 프로그램을 추가하여 작업의 효율성을 올릴 수 있고 구글 관련 서비스를 쉽게 연동할 수 있습니다.
엣지 (Edge)
마이크로소프트에서 지원하는 웹 브라우저이며, 윈도우 설치 시 같이 제공됩니다. 엣지 브라우저는 크롬 브라우저와 같은 엔진을 사용하여 기능 면에서는 크롬과 비슷합니다.
파이어폭스 (Firefox)
모질라에서 지원하는 웹 브라우저로, 보안성과 앞의 두 브라우저 보다 더 다양한 개인 설정이 가능하고 개발 도구와 관련된 부가 기능이 많아 개발자들이 많이 사용하는 브라우저입니다.
웹 편집기의 종류 및 기능
코드 편집기 또는 웹 편집기는 HTML 태그를 포함한 CSS 또는 JavaScript 소스를 입력하여 웹 문서를 제작할 때 사용되는 소프트웨어 프로그램입니다. 웹 기반 편집기는 웹 개발에 필수적으로 사용되며 개발자가 코드를 보다 효율적으로 작성하고 편집할 수 있도록 해줍니다. 사용하고자 하는 환경에 따라 다양한 웹 편집기와 기능을 활용할 수 있습니다. 일반적으로 웹 편집기에서는 코드를 더 쉽게 볼 수 있도록 태그나 속성 같은 텍스트를 색상으로 구분화 하여 표시해 줍니다. 또한 자동 완성 기능이 포함되어 있어 전체를 다 입력하지 않아도 태그나 속성을 빠르게 입력할 수 있어 오타를 줄일 수 있습니다.
운영체제(OS) 별 사용되는 편집기
- 윈도우 : Visual Studio Code, Notepad++, edit plus
- Mac: Textmate, Coda, Visual Studio Code
팁: 처음 사용하신다면 윈도우와 Mac에서 모두 사용 가능하고 무료인 Visual Studio Code를 추천 드립니다. 또한 파이썬 및 Node.js 등 프로그래밍 언어를 지원합니다.
웹 기반 편집기
PC기반 웹 편집기 외에도 사용자가 웹 브라우저에서 직접 코드를 작성하고 결과를 바로 확인 가능한 웹 기반 편집기도 있습니다. 사용자가 코드를 입력하는 동안 브라우저 화면에서 실시간으로 출력을 하여 확인할 수 있습니다. 또한 웹 기반 편집기를 사용하면 다른 사람과 코드를 쉽게 공유할 수 있어 초보자가 코딩을 연습하고 동료와 같이 작업할 시에도 편리합니다.
웹 기반 편집기 종류
- Codepen
- JSFiddle
- Liveweave
- Plunker
Conclusion
이렇게 웹 브라우저 종류와 웹 개발을 위한 웹 편집기들을 알아봤습니다. 처음 웹 개발을 시작하신다면 무료인 Visual Studio Code를 먼저 사용하시고 점차 이해도와 활용 능력이 넓어지신다면 그때 유료 버전을 사용해 보시는 걸 추천드립니다.
관련 글