2. 오픈소스 활용하기

이번엔 오픈소스를 활용해서 홈페이지의 구조를 잡아볼 거예요.

 

오픈소스란?

오픈 소스(Open Source)는 소스 코드가 공개되어 있어 누구나 자유롭게 사용, 수정, 배포할 수 있는 소프트웨어를 말합니다. 이 용어는 소프트웨어의 개발과 배포가 이루어지는 방식에 대한 철학이나 접근 방식을 나타내기도 합니다. 오픈 소스 소프트웨어는 사용자와 개발자가 소프트웨어의 코드를 열람하고, 필요에 따라 수정하거나 개선할 수 있도록 합니다. 이는 사용자가 소프트웨어를 자신의 필요에 맞게 조정할 수 있게 하며, 개발자 커뮤니티가 함께 협력하여 보다 안정적이고 효율적인 소프트웨어를 개발할 수 있는 환경을 조성합니다.

 

쉽게 말하면 어떤 개발자가 홈페이지를 개발하고 개발한 해당코드를 다른 사람들도 수정해서 사용할 수 있도록 개발한 소스코드를 공개한다는 겁니다.

 

 

홈페이지를 하나 소개해드릴까 하는데,

 

이 홈페이지는 홈페이지 오픈소스들을 모아놓은 사이트입니다. 유료인 것들도 있지만 대부분 무료로 되어있고 디자인의 퀄리티도 나쁘지 않고 디자인의 종류도 다양합니다.

 

https://themewagon.com/

Home

 

사이트에 접속하셔서 'Top Freebies' 라는 탭을 클릭하시면 무료로 제공하는 홈페이지들의 디자인을 인기순으로 볼 수 있습니다.

 

 

마음에 드는 디자인에 마우스를 올리고 'Live preview' 버튼을 클릭하면 홈페이지를 미리 확인할 수 있습니다.

 

마음에 드는 디자인이 있다면 해당 디자인의 상세페이지로 이동해서 'Download' 버튼을 클릭하 소스코드를 다운로드 받아줍니다.

 

 

제가 선택한 디자인은 

https://themewagon.com/themes/fruitables-free/

Fruitables - Free Bootstrap 5 eCommerce Website Template

요겁니다. 과일이 있고 뭔가 상큼한게 좋아서 선택했어요 ㅎㅎ;;

 

다운로드가 완료되면 파일의 압축을 해제합니다.

 

 

위 사진처럼 확장자(.html)이 보이지 않는다면, 상단의 탭에서 '보기 > 표시' 에서 '파일 확장명'을 체크해주세요.

 

압축을 해제하고 폴더를 열어보면 위 사진처럼 나올겁니다. 다만, 선택한 디자인에 따라서 파일이름이나 폴더이름 등이 다를 수 있습니다.

 

여기서 'index.html' 이라는 파일을 확인할 수 있는데 이 파일은 다른 디자인에도 공통적으로 존재하는 파일입니다. html 파일 하나당 페이지가 하나씩 있다고 보시면 됩니다. 'index.html' 하나만 존재한다면 단일페이지의 홈페이지 이고 위 사진처럼 여러개 존재한다면 페이지가 여러개인 홈페이지 입니다.

 

'index.html' 파일은 웹 사이트의 홈 페이지나 메인 페이지를 구성하는 기본적인 HTML(HyperText Markup Language) 문서입니다. 웹 서버에 요청이 들어올 때, 특별한 지정이 없으면 서버는 보통 index.html 파일을 찾아서 브라우저로 전송합니다. 이 파일은 웹 페이지의 구조, 내용, 그리고 스타일을 정의하는데 사용되며, HTML 태그를 이용하여 문서를 구조화합니다.

 

쉽게 설명을 해드리면 메인페이지(홈화면) 이라고 보시면 됩니다. 예를들어 www.cocoder.com이라는 URL 주소가 있다고 해봅시다. 주소창에 이 URL을 치고 들어가면 제일먼저 호출되는 페이지가 'index.html' 파일입니다.

 

'index.html' 파일을 한번 실행시켜 보면 로컬 환경에서 홈페이지가 동작하는 걸 확인하실 수 있을겁니다. 로컬환경이라는 거는 일반적으로 사용자의 개인 컴퓨터나 작업 공간을 가리키는 데 사용됩니다. 즉 나만 볼 수 있다는 겁니다. 하지만 홈페이지를 만들어서 나만 볼 수 있다면 아무의미가 없겠죠?

 

앞으로는 로컬환경에서 홈페이지를 수정하고 수정한 홈페이지를 서버에 올려서 다른 사람도 볼 수 있는 홈페이지를 만드는 방법을 알려드리도록 하겠습니다.