나만의 무료 홈페이지 제작 1부-기초작업(Feat. Quarto)
오늘은 손쉽게 나만의 무료 홈페이지 제작 방법을 알려드리겠습니다. 관련 내용이 많다 보니 여러 차례에 나눠서 진행하도록 하겠습니다. 혹시나 R과 RStudio를 설치하지 않으신 분은 아래 포스트를 보고 오시면 될 것 같습니다.
R, RStudio 설치하기 – 윈도우 기준
이번 포스트에서는 R 프로그래밍을 위한 필수품! R과 RStudio 설치하는 방법에…
웹에서 좀 논다?고 하는 분들은 한번쯤 네이버 블로그는 만들어 보셨을 겁니다. 그런데 R로 웹사이트 만들 수 있다구요?? R도, 웹사이트 제작도 다 생소한데 제가 할 수 있을까요?
네. 할 수 있습니다! ‘Quarto와 함께‘라면. ‘테리‘와 함께라면. 속는 셈 치고 한번 믿고 따라 와 보시죠! 하나하나 따라하다 보면 ‘와~ 정말 되네!’ 하는 생각을 하시게 될 겁니다. 그럼 시작해보시죠!
1. 홈페이지 제작 시작 – New Project 만들기
먼저, RStudio를 실행하시죠. 그리고 아래 그림처럼 메뉴 중에 File-New Project-New Directory 순으로 클릭 클릭 클릭 합니다.
참! Quarto에 대해서 말씀을 안드렸군요. 아래에서 Quarto 메인 화면에 있는 글을 가져와봤습니다. 직접 확인하시려면 여기를 클릭하세요~! Quarto는 오픈 소스로 과학 및 기술 쪽에 특화된 퍼블리싱 시스템이라고 소개하고 있네요.
About Quarto
Welcome to Quarto®
An open-source scientific and technical publishing system
Author using Jupyter notebooks or with plain text markdown in your favorite editor.
Create dynamic content with Python, R, Julia, and Observable.
Publish reproducible, production quality articles, presentations, dashboards, websites, blogs, and books in HTML, PDF, MS Word, ePub, and more.
Share knowledge and insights organization-wide by publishing to Posit Connect, Confluence, or other publishing systems.
Write using Pandoc markdown, including equations, citations, crossrefs, figure panels, callouts, advanced layout, and more.
Analyze. Share. Reproduce. You have a story to tell with data—tell it with Quarto.
콰토에 오신 것을 환영합니다.
오픈 소스 과학 및 기술 퍼블리싱 시스템
Jupyter 노트북을 사용하거나
즐겨 사용하는 편집기에서 일반 텍스트 마크다운을 사용하여 작성하세요.
Python , R , Julia 및 Observable을 사용하여 동적 콘텐츠를 만들 수 있어요.
HTML, PDF, MS Word, ePub 등으로 재현 가능한 품질있는 기사, 프리젠테이션, 대시보드, 웹 사이트, 블로그, 책을 게시할 수 있어요.
Posit Connect , Confluence 또는 기타 출판 시스템에 게시하여 조직 전체에 지식과 통찰력을 공유하세요.
방정식, 인용, 상호 참조, 그림 패널, 콜아웃, 고급 레이아웃 등을 포함하여
Pandoc 마크다운을 사용하여 작성하세요 .
분석하시고, 공유하시고, 재생산하세요. 데이터로 전할 이야기가 있으시면 Quarto와 함께 하세요.
2. Quarto Website Project 만들기
Project Type 창에서 Quarto Website를 클릭, Directory name과 Folder를 지정해준 뒤 Create Project를 클릭해줍니다. 폴더 지정은 Browser 버튼을 눌러서 하시면 됩니다. 아직까지는 어려운거 없으시죠?
3. Markdown Package 설치하기
어~ ‘크리에이트 프로젝트’ 하고 나니 노란색 띠로 경고가 뜨는데요? 제가 뭘 잘못 했나요? 우리의 작업에 markdown 패키지가 필요한데 그게 설치되어 있지 않아서 RStudio가 친절하게 알려주는 겁니다. 노란색 띠의 install을 클릭해서 해당 package를 설치 합니다.
우측 하단(점선 박스) Files 창에 보면 index.qmd 파일부터 해서 5개의 파일이 생성이 되었네요. 오잉! 난 클릭클릭클릭… 한거 밖에 없는데. 신기방기합니다! 자, 이제 굵은 화살표가 가리키는 Render(단축키 Ctrl + Shift + K 혹은 B)를 클릭합니다.
4. Render Quarto
렌더를 실행하고 조금 기다리니 이게 뭔가요! 드뎌 나만의 홈페이지가 뜨네요~ 와 이게 되네~! ‘About’을 누르면 그 쪽 섹션으로 이동하고, 다시 ‘Home’을 누르면 그 쪽으로 이동되구요. ‘quarto-website’를 클릭하니 ‘Home’과 같은 화면으로 이동합니다. 주소창의 localhost로 시작하는 주소가 보이네요.
localhost(로컬호스트)는 컴퓨터 네트워크에서 사용하는 루프백 주소로, 자신의 컴퓨터를 의미한다. 즉, 컴퓨터의 네트워크 기능을 시험하기 위해 ‘가상으로 인터넷망에 연결되어 있는 것처럼 할당하는 인터넷 주소’이다. -출처: 위키피디아
조금 전에 About, Home, quarto-website 등 클릭하면서 이동하고 다녔죠? RStudio는 이런 상황들을 다 알고 있습니다.(좌측 하단의 ‘Background Jobs’ 탭을 눌러보면 웹사이트 동작 상황을 명시하고 있습니다. 이런걸 리스닝(Listening)이라고 했던거 같습니다. 서버가 다보고 듣고 있다는거죠~) 우측 하단 Files 창을 보면 ‘크리에이트 웹사이트’하고 난 뒤 안보이던 _site 폴더가 보이고 그 폴더 안을 따라 들어가면 다수의 파일이 생긴 걸 볼 수 있습니다.
정리하기
정리하자면, 파일 > 뉴 프로젝트 > 뉴디렉토리 > 콰토웹사이트 > 크리에잇 > 마크다운 팩 설치 > 렌더 대략 6단계만에 우리만의 기본 웹사이트가 만들어졌습니다! 와우! 머리가 지끈지끈 하신가요? 잠시 쉬어 가도록 하겠습니다. 다음편에서 뵙도록 하겠습니다.
인생 부캐 만들기, LIFE2.0: IT Playground, 테리였습니다!
감사합니다.
(아래 정보는 ChatGPT에게 물어보고 받은 답변을 정리한 내용입니다.)
Render 의미
RStudio와 Quarto를 이용하여 웹사이트를 만드는 과정에서 ‘렌더링(Rendering)’은 일반적으로 Markdown 또는 RMarkdown과 같은 마크업 언어로 작성된 소스 문서를 HTML, PDF 또는 Word와 같은 형식으로 변환하는 프로세싱 과정을 의미합니다.
RStudio에서 Quarto 작업시 분석이나 시각화를 위한 코드 청크(code chunk)와 함께 Markdown 또는 RMarkdown 파일로 콘텐츠를 작성합니다. 콘텐츠 작성 및 최종 출력 준비가 끝나면 quarto::render() 함수를 사용하여 렌더링을 실행합니다.
이 기능은 소스 파일을 읽고, 모든 코드 청크를 평가하고, 결과를 ‘텍스트 및 형식 지정 지침’과 결합하여 최종적으로 결과물을 생성합니다. 지정한 옵션에 따라 웹 게시용 HTML 파일, PDF 또는 기타 다른 형식을 만들 수 있습니다.
요약하자면 RStudio와 Quarto을 이용하여 소스코드를 ‘렌더링’하면 HTML, PDF 등 유저가 원하는 형태로 결과물을 얻을 수가 있습니다.
‘secondlife.lol’의 모든 콘텐츠는 저작권법의 보호를 받습니다. 무단 전재와 복사, 배포 등을 금합니다.
