[아티클 03] 웹사이트를 만들려면 꼭 알아야 하는 3가지 : HTML, CSS, 자바스크립트
여러분이 웹 브라우저로 접속해서 보는 모든 화면은 HTML, CSS, 자바스크립트로 구성되어 있습니다. 요즘은 다양한 웹 개발 도구를 활용해 웹사이트를 만들지만, 그 어떤 도구를 쓰더라도 결국 바탕에는 이 세 가지 기술이 자리하고 있습니다. 그래서 여러분이 웹사이트를 만들고 싶다면 이 세 가지 기술에 대한 기본적인 이해가 필요합니다. AI가 코드를 대신 짜주더라도, 어떤 부분을 수정하거나 추가해야 할지 알려주려면 이 세 가지가 웹사이트에서 각각 어떤 역할을 하는지 알고 있어야 하죠. 여기서는 HTML, CSS, 자바스크립트를 우리 몸에 비유해 쉽게 설명해보겠습니다.
웹사이트의 뼈대를 담당하는 HTML
웹사이트에 포함되어 있는 텍스트, 이미지, 영상 등과 같은 정보성 데이터는 모두 HTML이 담당합니다. HTML은 요소라는 것을 이용해서 텍스트나 이미지에 의미를 부여하여 표현하는데요. 이렇게 정보에 의미를 추가로 부여하는 이유는 정보 검색에 편의를 더하기 위함입니다. 예를 들어 h1이라는 요소로 감싼 텍스트는 '이 문서의 가장 중요한 제목이다'라는 의미를 가집니다. h2는 그다음 수준의 제목이 되겠죠.
이처럼 정보에 의미를 부여하면 구글이나 네이버와 같은 검색 엔진이 문서 내에서 중요한 데이터를 우선 탐색할 수 있게 됩니다. 이를 통해 검색 엔진 결과에 더 빠르고 정확하게 노출되는 생태계가 구성될 수 있으므로, 이러한 HTML 요소의 의미를 파악하는 것은 꽤나 중요합니다. 그리고 이렇게 검색 엔진이 중요한 정보를 우선 인식하여 검색 결과에 먼저 노출되도록 하는 과정을 검색 엔진 최적화(SEO, Search Engine Optimization)라고 합니다. 이렇게 HTML은 웹 문서의 뼈대와 살을 담당하고 있으므로 굉장히 중요한 기술이라고 할 수 있겠네요.
웹사이트를 아름답게 해주는 CSS
이제 CSS라는 기술에 대해 이야기하겠습니다. HTML이 사이트의 뼈대를 담당한다면 CSS는 웹사이트를 아름답게 해주는 역할을 합니다. 예를 들어 다음과 같이 HTML만으로 구성한 사이트는 텍스트와 이미지가 단순히 나열된 형태로, 필요한 정보는 모두 담고 있지만 눈으로 보기에 좋지 않습니다.
왼쪽이 HTML만으로 구성한 사이트이고 오른쪽이 CSS를 더한 사이트입니다. 같은 데이터를 이야기하고 있지만 다르게 보이죠.
이렇게 같은 구조의 사이트라고 하더라도 CSS를 끼얹으면 사이트는 완전히 다르게 보입니다. 그 이유는 웹사이트를 사용하는 주체가 사람이며 CSS는 바로 그런 사용자의 경험을 고려해 시각적으로 꾸미기 위해 만들어진 기술이기 때문입니다.
웹사이트에 기능을 추가해주는 자바스크립트
자바스크립트는 그럼 무엇일까요? 자바스크립트는 평범한 웹사이트에 기능을 추가하는 역할을 합니다. 요즘은 그 이상도 할 수 있죠. 예를 들어 [다크 모드/라이트 모드] 버튼을 누르면 다르게 보이게 하는 것은 어떨까요? 또는 좋아하는 사이트에 마우스를 오버하면 해당 주소가 보이게 하는 기능은요? 다음은 앞에서 본 사이트에 [다크 모드/라이트 모드] 버튼을 추가해서 실제로 동작하게 만든 것입니다.
이처럼 사용자와의 상호작용으로 사이트가 어떤 기능을 하게 하려면 자바스크립트가 필요합니다. 지금 여러분이 접속하는 대부분의 사이트는 이렇게 HTML, CSS, 자바스크립트의 조합으로 만든 것들이 상당히 많습니다. 웹 개발에 관심이 있다면 들어봤을 리액트라는 기술도 자바스크립트를 기반으로 만든 기술이죠. 이렇게 웹을 지탱하는 핵심인 세 가지 기술을 느낄 수 있도록 깃허브 코파일럿과 함께 코딩을 해봅시다.
바이브 코딩으로 자기소개 페이지 만들기
여러분의 커리어를 사이트에 잘 정리해두었다가 자기소개서를 제출해야 할 상황이 생겼다면, 이 자기소개 페이지가 굉장히 유용할 것입니다. 단순히 자기소개서만 제출하는 것이 아니라 여러분이 직접 관리한 사이트라는 점으로 서류를 검토하는 사람에게 신선한 인상을 줄 수 있으니까요.
01 그럼 자기소개 페이지를 좀 더 쉽게 만들기 위해 깃허브 코파일럿의 #컨텍스트를 이용하여 텍스트 형식으로 정리되어 있는 자기소개서를 깃허브 코파일럿에게 주어 작업시키도록 하겠습니다. 먼저 실습용 자기소개서 텍스트 파일을 다운로드하거나 직접 파일을 준비하세요. 파일은 깃허브 코파일럿이 읽기 좋도록 텍스트 파일로 준비하는 것이 가장 좋습니다. 줄바꿈이나 형식이 엉망이어도 상관없으니 Ctrl+A, Ctrl+C로 복사하고 붙여넣기하여 만드세요. 자기소개서 사진은 추후 작업하여 넣겠습니다. 일단 텍스트 위주로 작업하면 됩니다.
02 깃허브 코파일럿으로 빈 폴더를 열고 폴더에 자기소개서 파일을 두세요. EXPLORER COPILOTSTUDY 자기소개서실습용.txt 폴더에 자기소개서 파일을 저장하세요
03 그런 다음 깃허브 코파일럿 채팅창을 열고 #컨텍스트를 이용해서 이렇게 이야기해봅니다.
<프롬프트>
현재 폴더에 있는 #자기소개서실습용.txt 파일의 내용을 파악하고, 이 내용을 바탕으로 자기소개 페이지를 만들고 싶어, HTML, CSS, 자바스크립트 기술로만 자기소개 페이지를 만들어줄래?
04 깃허브 코파일럿의 설명을 보면 index.html 파일을 열면 자기소개 페이지가 나타날 거라고 하네요. 파일을 웹 브라우저로 열어서 확인해봅니다.
결과를 보면 썩 마음에 들지는 않지만 잘 정리해준 것 같습니다. 하지만 깃허브 코파일럿의 능력치는 이 정도가 아닙니다. 이 상태에서 조금 더 부탁해서 형태를 다듬어보겠습니다.
05 다른 웹사이트에서 찾은 페이지 중 하나를 참고하여 자기소개 페이지 형식으로 꾸며달라고 하겠습니다. 깃허브 코파일럿은 링크를 참조할 때 https로 시작하는 주소를 모두 입력하면 밑줄로 표시해줍니다. 밑줄로 표시된 주소와 함께 요청해보세요. 이때 처음 주소 참조를 요청하면 [Allow]가 나옵니다. [V]를 눌러서 [Always Allow]를 눌러 항상 주소를 참조할 수 있도록 설정하세요.
자기소개 참고 홈페이지: https://brittanychiang.com
<프롬프트>
https://brittanychiang.com과 같은 스타일로 최대한 비슷하게 해서 자기소개 페이지가 매력적으로 보이도록 꾸며줘.
그러면 깃허브 코파일럿은 사이트의 내용을 파악하고 디자인을 개선하기 시작합니다. 이렇게 여러분이 하기 어려운 일들은 #컨텍스트를 이용해서 참조 자료를 추가하는 방식으로 개선할 수 있습니다.
06 파일을 다시 열어보면 비슷한 스타일로 자기소개 페이지가 만들어졌네요.
앞에서 본 자기소개 페이지와 내용은 같지만 느낌이 완전히 달라졌습니다. 이렇게 페이지를 만들어 제공하면 서류 검토를 하는 사람에게 깊은 인상을 주기 좋을 것입니다.
07 마지막으로 프로필 사진을 적절한 위치에 넣어달라고 하겠습니다. 파일을 하나 준비해서 깃허브 코파일럿으로 연 폴더에 넣은 다음 #컨텍스트로 파일을 가리키며 적당한 위치에 잘 보이도록 넣어달라고 요청하겠습니다.
<프롬프트>
#p.png 파일은 자기소개 페이지에 넣을 내 프로필 사진이야. 적당한 위치에 이 사진을 배치시켜줘. 어우러지게 디자인도 다듬어주고.
결과를 보면 프로필 이미지도 잘 추가가 되었네요. 제대로 자기소개 페이지가 만들어졌음을 알 수 있습니다. 이 실습을 통해 기술의 개념을 이해하고, 추가 자료만 잘 제공하면 깃허브 코파일럿으로 얼마든지 그럴싸한 웹페이지를 만들 수 있다는 것을 알았기 바랍니다.