요즘은 누구나 자신만의 웹페이지를 만들어 볼 수 있는 시대입니다. 하지만 막상 시작하려고 하면 무엇이 필요한지 막막할 수 있습니다. 그래서 웹페이지 준비물을 알아야 하고 합니다. 먼저 웹페이지를 만들기 위해서 필요한 것은 컴퓨터와 같은 하드웨어를 제외하면 만드는 것 자체는 ‘무료’입니다. 그래서 컴퓨터만 소유하고 있다면 준비물을 구성하는 것은 어느 정도의 시간만 활용해서 분류하고 숙지만 하면 됩니다. 물론, 웹페이를 만들어 놓고 웹에 업로드 하기 위해서는 약간의 비용이 소요되기는 합니다. 이 글에서는 제가 웹페이지를 만드는 데 필요하다고 생각하는 기본적인 도구들과 환경을 간단히 소개하고자 합니다.
웹페이지를 만들기 위해 가장 먼저 필요한 것은 당연히 컴퓨터입니다. 데스크톱도 훌륭한 선택이지만, 저는 노트북이 더 유용하다고 생각합니다. 언제 어디서든지 작업할 수 있고, 이동 중에도 아이디어가 떠오르면 바로 실행에 옮길 수 있기 때문입니다. 특히 카페나 도서관 등 다양한 장소에서 작업하기를 좋아하는 사람에게는 노트북이 필수적인 도구입니다.
그리고 노트북은 특별히 고사양일 필요가 없습니다. 그래서 정확한 사양을 언급하기도 애매합니다. 그래도 예를 들어 보자면 요즘 최신 PC 중에서 비싸면서 고사양 노트북들은 웹페이지를 만드는데 있어서 오버스펙입니다. 그리고 게임용 노트북도 오버스펙입니다. 왜냐하면 웹페이지를 만드는데 있어서 특별히 고사양이 요구되지 않기 때문입니다. 물론, 이미지를 포토샵이나 일러스트로 디자인을 하거나 편집하는 경우는 중급은 되어야할 것입니다.
결론적으로 웹페이지를 만드는 컴퓨터는 사양이 높지 않아도 되니 저사양으로 시작을 해보고 웹페이지를 더욱 전문적이고 집약적으로 만들어야 하는 상황이 되었을 때 정확한 사양을 분석하거나 컴퓨터 사양을 올려서 구매하는 것도 전혀 문제가 되지 않습니다. 그래서 현재 보유하고 사용하고 있는 노트북으로 시작해도 무리가 없을 것입니다.
HTML 코딩 도구 - 메모장도 좋지만, Visual Studio Code 추천
웹페이지는 기본적으로 HTML, CSS, JavaScript 같은 언어로 만들어집니다. 이 코드들은 단순한 메모장으로도 작성할 수 있지만, 훨씬 더 편리한 도구가 있습니다. 대표적인 것이 바로 Visual Studio Code입니다. 이 프로그램은 일종의 SDK(Software Development Kit)의 한 종류로써 코드 자동 완성, 오류 표시, 확장 기능 등 다양한 편의 기능을 제공해 코딩 작업을 훨씬 효율적으로 도와줍니다. 아래 링크를 클릭하면 Visual Studio Code를 무료로 다운로드 할 수 있는 웹페이지로 이동할 수 있습니다.
Visual Studio Code 다운로드
- 클릭하시면 Visual Studio Code 다운로드 페이지로 이동합니다.Opens in a new tab
브라우저 - 결과를 확인하는 창
코드를 작성했다면, 이제 그 결과를 확인할 브라우저가 필요합니다. 대표적으로는 크롬(Chrome), 엣지(Edge) 등이 있습니다. 같은 웹페이지라도 브라우저마다 표시되는 방식이 조금씩 다르기 때문에, 다양한 브라우저로 테스트해보는 것이 좋습니다.
경험적으로 보았을때, Chrome 브라우저는 호환성이 가장 좋다고 알려져 있습니다. 그리고 세계적으로 검색은 구글에서 진행하기 때문에 웹브라우저를 만들고 게시한 이후에 Google에 페이지나 글의 색인을 요청하는 것과 구글 애널리틱스와 같은 웹페이지는 모두 Google이 운영하므로 Chrome을 비교적 추천합니다. 그리고 Edge 브라우저는 메모리를 비교적 가볍게 차지하는 특성이 있습니다. 소개한 두 가지 브라우저 모두 훌륭하고 좋은 웹브라우저 라고 생각되고 추천합니다. 아래 링크를 클릭하면 각각의 브라우저를 다운로드 받을 수 있는 페이지로 이동할 수 있습니다.
브라우저 다운로드 링크
- 클릭하여 Google Chrome(크롬) 브라우저 다운로드 페이지로 이동하기Opens in a new tab
- 클릭하여 Microsoft Edge(엣지) 브라우저 다운로드 페이지로 이동하기Opens in a new tab
아이디어 정리 - 노션과 깃허브
웹페이지를 만들다 보면 수많은 아이디어, 할 일 목록, 기획안 등을 정리해야 할 필요가 생깁니다. 이때 활용하기 좋은 도구로는 노션(Notion)과 깃허브(GitHub)가 있습니다.
노션(Notion)은 아이디어 메모, 체크리스트, 프로젝트 기획 등을 시각적으로 정리할 수 있어서 비개발자에게도 매우 유용합니다.
깃허브(GitHub)는 원래 개발자들이 사용하는 버전 관리 도구지만, 나만의 코드 저장소로 활용할 수 있고, 협업 시에도 필수적인 플랫폼입니다.
이 두 가지는 웹페이지를 만들 때 필수적으로 필요한 것은 아니지만, 사용하면 큰 도움이 되기에 추천을 합니다. 물론, 이 두가지는 처음 사용하려고 할 때 약간의 어려움과 경험이 필요할 수도 있습니다. 즉, 사용 방법을 숙지해야 합니다. 하지만 모두 문서 작성이나 인터넷을 조금만 해보신 분이라면 전혀 문제 없이 사용하실 수 있습니다.
개인적으로 보았을 때 너무 유용한 서비스이자 툴이기 때문에 적극 추천드립니다. 아래 링크를 클릭하시면 노션과 깃허브 페이지로 이동할 수 있습니다.
노션(Notion)과 깃허브(GitHub) 다운로드 링크
- 클릭하여 Notion(노션)으로 이동하기Opens in a new tab
- 클릭하여 GitHub(깃허브)으로 이동하기Opens in a new tab
웹호스팅과 도메인
코드를 완성했다면, 이제 그것을 공개할 차례입니다. 이를 위해서는 웹호스팅 서비스가 필요합니다. 웹호스팅은 내 웹페이지를 인터넷상에 올릴 수 있게 도와주는 공간입니다. 웹호스팅은 웹상에서 단순하게 저장 공간만을 의미하고 저장 공간으로써의 역할을 하는 곳이 아닙니다. 웹페이지를 만들면 index.html이라고 하는 파일을 만들어야 하는데, 웹호스팅에서는 index.html이라는 파일을 웹페이지의 첫 페이지라고 인식하고 index.html파일의 코드를 실행해 주는 소프트웨어적인 역할을 합니다. 물론, index.html 파일 외에 다른 페이지들의 .html 파일과 .css 파일 .js 파일등의 확장자를 가진 파일들도 읽고 해당 프로그램 코드에 맞게 실행하여 우리가 웹페이지를 이용할 수 있도록 해줍니다.
그리고 사람들에게 보다 쉽게 접근시키려면 도메인(예: www.pangyimush.com)을 등록하는 것이 좋습니다. 본래 모든 사이트는 IP(Internet Protocol)로 구성되어 있고 숫자 등으로 혼합되어 있습니다. 이것을 사람이 알아보고 이해하기 쉽게 영문으로 제공되는 서비스가 DNS(Domain Name Service)라고 하며 우리가 도메인(Domain)이라고 하는 것입니다.
웹호스팅과 도메인은 자신의 웹페이지를 공개할 때 사용되는 것이므로 이러한 것이 어떤 형태로 존재하고 사용되어지는 것에 대해서만 이 글에서 이와 같이 설명하고 다른 글에서 본 내용에 대해서 더욱 섬세하게 설명하고 묘사될 것입니다.
검색 최적화(SEO)와 구글 정책의 이해
마지막으로, 웹페이지를 단순히 만드는 것을 넘어서 많은 사람들이 방문하게 하려면, SEO(Search Engine Optimization, 검색 엔진 최적화)에 대한 공부가 필요합니다. 구글 검색에 잘 노출되기 위해서는 어떤 단어를 사용해야 하는지, 어떤 구조로 페이지를 구성해야 하는지 등을 이해해야 합니다. 또한 구글의 정책과 가이드라인을 준수하는 것도 중요합니다. 이는 광고 수익이나 웹페이지의 신뢰도와도 직결되는 부분입니다. 아래 링크를 클릭하시면 구글 검색센터에서 공시하고 제안하는 내용을 확인해 보실 수 있습니다.
물론 해당 내용이 복잡하게 느껴지실 수도 있습니다. 하지만 상식적인 내용을 자세하게 설명한 것 뿐이라고 이해해시면 됩니다. 한 마디로 쉽게 말해서 ‘양질의 컨텐츠를 사용자들이 쉽게 접근하고 이용할 수 있게 만들어야 한다.’ 정도로 지금 시점에서는 이해하시는 것을 추천 드립니다.
구글의 SEO(검색 엔진 최적화) 정책 및 가이드라인 확인해보기
- 클릭하시면 페이지를 보실 수 있습니다.Opens in a new tab
웹페이지 만들기 누구나 할 수 있다!
웹페이지를 만든다는 건 단순한 코딩 작업을 넘어서 하나의 작은 서비스를 만드는 일입니다. 컴퓨터 한 대와 브라우저, 코딩 툴만 있다면 누구든지 시작할 수 있지만, 노션이나 깃허브처럼 작업을 도와주는 도구들, 그리고 웹호스팅, 도메인, SEO까지 고려하면 훨씬 더 완성도 있는 결과물을 만들 수 있습니다.
지금 이 글을 읽고 있는 당신도, 오늘 바로 첫 웹페이지 제작을 시작해보는 건 어떨까요? 팽이머쉬에서도 지속적으로 웹페이지 제작에 관한 글을 업로드하여 많은 분들이 영감을 갖고 노력하실 수 있도록 안내하는 페이지에 가이드 글을 많이 수록할 수 있도록 노력하겠습니다. 웹페이지 만들기 누구나 할 수 있습니다.
