Naruter 나루터 - 매뉴얼

안녕하세요! 나루터를 개발한 로토리라고 합니다.

나루(naru.pub)라는 가벼운 갠홈 플랫폼에서 사용할 수 있는 홈페이지 템플릿을 만들어보았습니다.

개발 초점은 ‘나루’ 서비스에서 이용한다는 전제에 맞춰져있지만, Naru가 아닌 개인 호스팅에서 작은 페이지를 만들 때에도 나루터를 이용하셔도 괜찮습니다.

나루터는 개인/상업 모든 환경에서 무료로 사용할 수 있으며 깃허브를 통해 코드가 공개되는 오픈소스입니다.

나루터로 만든 2개의 샘플페이지를 구경해보세요!

구성 : 단일페이지 + 전체화면 + 왼쪽메뉴

샘플 페이지 A 바로가기 >

구성 : 다중페이지 + 제한화면 + 상단메뉴

샘플 페이지 B 바로가기 >

그러니까… 이런 사람에게 나루터를 추천합니다.

- 호스팅?FTP? 개인 홈페이지를 만들고 싶지만.. 초기 세팅할 때의 개념들이 너무 어려웠던 사람!

- 최소한의 기능만 있는 오타쿠 홈이었으면 좋겠지만.. 직접 하드코딩으로 만들기 귀찮은 사람

나루터는 그런 사람들을 위해 만들어졌습니다.

배포 파일을 다운 받고, 자신의 나루에 업로드하면 홈페이지 완성!

나루터와 함께 홈페이지를 만들어보세요.

# 특징

- 가볍습니다! 이미지를 제외한 골조 코드가 통틀어 50KB가 채 되지 않습니다.

- html 의 태그 구조를 이해할 필요가 없습니다. html 파일에서 기존 구조를 복사/붙여넣기 하여 바로 사용하세요.

- 2개의 페이지 유형을 제공합니다. (단일/다중)

- 2개의 본문 유형을 제공합니다. (전체/제한)

- 3개의 메뉴바 구조를 제공합니다. (상단/왼쪽/오른쪽)

단, 왼쪽 및 오른쪽 메뉴바를 사용하더라도 모바일에서는 상단바 구조로 변경됩니다.

- 유튜브 재생목록을 홈페이지 배경음악으로 설정할 수 있습니다.

- 자신의 배너를 게시하고, 퍼가기 쉽도록 복사기능을 구현했습니다.

# 사용 방법

포스타입이나 글리프 모두 사용방법을 한번에 내리적다보니 내용이 너무 많다고 느껴질 수 있기에 추후 깃허브 위키에 항목별로 동일한 내용을 정리해두겠습니다.

작성하는 내용은 html 초심자를 위해 조금 더 세세히 적은 것이며, 어느정도 코드를 작성하실 수 있는 분들이라면 대충 흐름만 봐도 알잘딱으로 바로 사용하실 수 있을 정도의 난이도입니다.

1. 나루터 원본 파일 다운로드

위의 주소에 접속해주세요.

릴리즈 버전에 Latest 뱃지가 있는 게시글에서 이미지와 같이 표시한 zip 파일을 클릭하여 내려받습니다.

압축을 해제하면 이와 같은 파일 목록이 나오는데, 두 개 폴더만 남기고 지워주시면 됩니다.

2. 홈페이지 구조 결정

- 페이지 형식 결정

페이지 구조는 2개가 제공됩니다. 압축해제한 singlePage, multiPages 두 폴더로 구분됩니다. 이 부분은 홈페이지를 업로드하기 전에 정해야하며 중간에 변경하기는 어렵습니다. (직접 개조가 가능하다면야…)

각 페이지 구조는 아래의 본문 유형 및 메뉴 유형을 모두 지원하고 있습니다. 마음에 드는 구조를 선택하여 해당 폴더의 파일들을 나루에 업로드해주세요. 폴더 째 업로드하는 것이 아니라 폴더 내의 모든 요소를 index.html이 있는 위치에 모두 올려주시면 됩니다.

만약 multiPages(다중 페이지) 구조를 사용하기로 결정했다면, 자신의 나루 홈페이지에서 다음과 같이 파일을 업로드해주시면 됩니다. 폴더의 경우 ‘새 폴더’ 버튼으로 폴더를 만든 뒤, 해당 폴더에 진입하여 동일한 경로에 있는 파일들을 업로드해주세요.

- 보기 형식 결정

보기 형식은 전체 페이지 형식이냐, 제한적인 크기의 페이지를 사용할 것이냐를 결정합니다. 기본적으로 제한된 크기로 제공됩니다.

만약, 전체화면 보기를 사용하실 경우 css 파일에서 다음의 코드를 삭제해주세요. 단일 페이지(singlePage) 및 다중 페이지(multiPages) 모두 동일한 경로로 접근해주세요. 해당 파일에서 ‘뷰 스타일’ 로 검색해보세요.

skin > css > style.css

/*로 시작하여 */로 끝나는 구간이 하나의 덩어리입니다.

위 부분에서 다음과 같이 가운데에 작게 ~ 부분 부터 */ 이 끝나는 지점을 삭제해주시면 됩니다.

- 메뉴 유형 지정

메뉴바 (네비게이션 바)의 위치를 결정합니다. 이 역시 css 파일에서 설정합니다. 단일 페이지 및 다중 페이지 모두 동일한 경로의 css 파일을 수정해주시면 됩니다. 기본적으로 ‘상단바’ 스타일을 제공하고 있습니다. 해당 파일에서 ‘네비게이션’ 으로 검색해보세요.

skin > css > style.css

위 부분이 네비게이션 구조를 결정합니다.

만약, 메뉴 바 위치를 ‘오른쪽’으로 지정하려면, 다음과 같이 세번 째 블럭을 삭제해주시면 됩니다.

혹은, ‘왼쪽’으로 지정하려면 다음과 같이 기본 주석만 남겨놓고 삭제하세요.

추후 메뉴 위치를 변경하고 싶다면 위에서 삭제한 코드들을 해당 위치에 다시 넣어주면 됩니다.

3. 모듈 사용 방법

나루터는 자체적으로 규격을 만든 ‘모듈’을 제공합니다. 단일 페이지에서는 index.html 파일에 모듈 구조를 넣으면 되고, 다중 페이지에서는 원하는 페이지의 html 파일에 넣으면 됩니다. 단, 배너 모듈은 links.html 파일에서 사용하실 것을 권장드립니다. 각 모듈의 생김새는 샘플 페이지들을 참고해주세요.

모듈은 나루터 내에서 규격화 된 코드 블럭이므로, 여러 모듈을 넣으려면 해당 구조를 필요한 만큼 복사하여 넣어주시면 됩니다.

- 텍스트 모듈

텍스트 모듈은 글을 적는 기본적인 모듈입니다. <div> 로 시작하여 </div>로 끝나는 블럭까지가 하나의 모듈입니다. 글을 적으려면 위와 같이 <p></p> 태그 사이에 본문을 입력해주세요. 개행을 하려면 줄을 바꾸려는 위치에 <br>태그를 넣거나, 새로 <p> 태그를 작성합니다.

- 비쥬얼 모듈

비쥬얼 모듈은 텍스트 없이 이미지만 크게 삽입할 때 사용합니다. 위와 같이 이미지 태그를 불러오는 구조입니다. 여기서 이미지 주소는 http:// 나 https:// 로 시작하는 웹 이미지 주소여도 괜찮고, 자신의 나루(혹은 ftp)에 있는 파일을 가져와도 됩니다. 예제는 자신의 나루에 업로드 된 파일을 끌어오는 코드입니다.

data 폴더 내의 visual1.png 이라는 파일이 있다면 해당 비쥬얼 모듈에 이미지가 나타납니다. 어떠한 파일이던 이름만 같으면 되므로 이미지를 편집하여 data 폴더 내에 넣어주세요.

만약 data 폴더 내의 다른 이미지를 사용하려면 위의 모듈 코드에서 해당 이미지의 이름을 visual1.png이 아닌 이미지 파일의 이름으로 변경해주시면 됩니다. (ex: visual1.png -> myimg.png … )

반드시 경로와 이름, 확장자가 같아야 정상출력됩니다. 만약 이미지가 나타나지 않는다면 경로와 확장자가 올바른지 다시 한 번 확인해주세요.

- 페어 모듈

캐릭터 2명에 대한 이야기를 업로드하는 모듈입니다. 다른 모듈보다 코드가 길어서 복잡할 것 같지만 단순한 구조입니다.

기본적으로 필요한 정보는 두 캐릭터의 이미지, 설명, 배경에 깔아둘 이미지 뿐입니다.

코드 중에 이러한 부분이 있습니다. data 폴더에 있는 첫번째 캐릭터의 이미지를 끌어옵니다. 마찬가지로 pair1-2.png 파일은 두번째 페어의 이미지로 끌어와지게 됩니다.

같은 원리로, 이 부분은 해당 페어만의 고유 배경 이미지를 끌어오는 부분입니다. data 폴더 내에 pair1-bg.png 파일이 존재해야합니다.

여러 페어를 등록하고 싶다면 페어모듈을 복사하고, 모듈 내 이미지들의 이름을 data 폴더에 새로 업로드한 페어 이미지들로 변경해주세요. (ex: pair2-1.png, pair2-2.png, pair2-bg.png)

- 다이어리 모듈

이미지 1장과 날짜, 텍스트를 넣을 때 사용할 수 있도록 만든 다이어리 모듈입니다. 다이어리모듈 역시 기본적으로는 data 폴더 내의 이미지를 가져옵니다. 모듈 끄트머리에 있는 <span></span> 코드 사이에 입력한 내용은 모듈 오른쪽 상단에 나타나게 됩니다만, 반드시 날짜를 넣을 필요는 없습니다. 어디까지나 템플릿을 제공한것이니 자유롭게 입력하세요!

- 임베드 모듈

외부 콘텐츠를 불러올 때 사용하는 모듈입니다. iframe 태그 내 src 옆 따옴표 내에 불러오실 콘텐츠의 주소를 넣어보세요. 샘플 페이지에서는 임베드 페이지가 따로 마련된 오이카페와 타이포블루를 샘플로 사용하였습니다.

만약, 모듈 박스 내에 임베드 구조가 들어가있어서 모듈 크기가 답답하다면, 다음과 같이 div 태그의 class 속성에 full을 추가해보세요. 좌우 너비가 꽉 차도록 임베드 콘텐츠가 나타나게 됩니다.

4. 스킨 꾸미는 방법

대망의 스킨 꾸미기입니다. 기본적으로 style.css 파일만으로도 전체 컬러테마를 수정할 수 있습니다. 단일 페이지 및 다중 페이지 모두 동일한 경로의 style.css 파일을 확인해주세요.

skin > css > style.css

해당 파일 상단에 있는 내용입니다. 어떤 요소가 어떤 부분에 영향을 끼치는지 모두 주석으로 작성해두었습니다.

이런식으로 수정할 수 있는 영역이 style.css 상단에 있습니다. 즉 이부분만 입맛대로 바꾸면 홈페이지 디자인이 변경됩니다!

- 디자인 색상 변경

색상은 ‘전체 색상 설정’ 영역에 있는 항목들을 수정하면 됩니다. #fff와 같이 HEX코드를 사용하여도 되고 예약어 (aliceblue, white)와 같은 값 모두 사용 가능합니다.

만약, 자신이 원하는 색의 컬러 코드를 모르겠다면 구글에 ‘colorpicker’ 를 검색해보세요!

- 배경 이미지 혹은 패턴 깔기

샘플 페이지는 전체화면/크기제한 페이지에 따라 사용되는 배경요소가 다릅니다. 공통적으로 style.css 파일에서 수정을 하게 되며 해당하는 영역은 다음과 같습니다.

이 중, bg, nav, limit 의 3개 종류가 있습니다.

전체화면 페이지의 경우, bg 요소와 nav 요소를 사용합니다. 보시는바와 같이 limit 관련 배경은 나타나지 않습니다.

크기제한 스타일의 경우 limit, bg, nav 모두 사용하게 됩니다. bg보다 바깥에 있는 영역이 limit 영역이기 때문입니다.

이미지나 패턴 없이 단색으로만 사용할 경우 예제 코드와 같이 따옴표 내에 아무것도 없는 채로 저장하면 되고, 만약 이미지나 패턴을 사용하고 싶다면 limit-img 에서 지정된 것 처럼 따옴표 내에 이미지의 경로를 지정해주시면 됩니다. 외부 이미지의 주소를 넣어도 되고, skin 폴더 내에 이미지를 업로드하여 이름을 작성해주시면 됩니다.

- 홈페이지 글꼴 변경 : 웹 폰트 삽입하기

나루터의 전체적인 글꼴을 변경하려면 웹 폰트 방식을 권장드립니다. 마찬가지로 style.css 에서 수정합니다.

skin > css > style.css

해당 파일 가장 위쪽에 웹폰트 영역을 표기해두었습니다.

예시를 위해 Pretendard 라는 웹 폰트를 호출해두었고, 웹폰트를 변경하시려면 이 위치에 더 넣어주시면 됩니다. 여러 웹 폰트를 넣으려는 경우, 다음과 같이 작성하시면 됩니다. 구글폰트에서 나눔펜 스크립트 글꼴을, 눈누에서 어그로 글꼴을 가져와보았습니다.

위에서 폰트를 호출하였다면, 해당 폰트를 이 곳에서 쓰겠다고 선언해줘야합니다. 웹 폰트를 제공하는 페이지마다 어떤 문구로 폰트를 불러와야하는지 지정이 되어 있습니다. prentendard 폰트는 ‘Prentendard-Regular’라고 호출 및 선언되어 있기 때문에 --font 영역의 따옴표 내에서 그대로 사용해줍니다.

위에서 추가한 폰트를 메인 폰트로 한 번 더 예제를 보여드리겠습니다. 어그로 글꼴을 사용한다면 다음과 같이 작성하면 됩니다.

마음에 드는 폰트를 찾아 스킨을 꾸며보세요. 웹 폰트를 찾아볼 땐 다음과 같은 사이트들을 추천드립니다.

눈누(https://noonnu.cc/) / 구글 폰트(https://fonts.google.com/)

5. 배경음악 설정

유튜브 재생목록을 이용하여 홈페이지에 배경음악을 깔아줄 수 있습니다. 그러므로 유튜브 재생목록을 준비해주세요.

배경음악은 js 파일에서 수정합니다. 단일 페이지 및 다중 페이지 형식 모두 동일한 경로의 js 파일을 열어주세요. 해당 파일 내에서 ‘bgm’을 찾아주시면 됩니다.

skin > js > script.js

해당 코드 중, playlistId 옆 따옴표 내에 자신의 재생목록 고유 id만 입력하면 됩니다. 예시는 나루터 샘플 페이지의 배경음악으로 사용한 재생목록의 고유아이디입니다.

단, ‘비공개’ 재생목록은 불가능하며 ‘공개’ 혹은 ‘일부 공개’ 상태의 재생목록만 사용할 수 있습니다.

모바일에서는 배경음악을 재생/정지 시키는 버튼들이 숨김처리 되는 점 참고부탁드립니다.

? 재생목록 고유 ID는 어떻게 찾나요?

자신의 유튜브 재생목록 페이지에 접속하여 주소창을 보시면 list= 이후 불규칙 문자들이 해당 재생목록의 고유 ID입니다. 이 부분을 모두 복사하여 위의 코드에 넣어주시면 됩니다.

6. 배너 관리 - 내 배너 등록하기 / 받은 배너 업로드하기

기본적으로 배너는 단일 페이지의 경우 index.html 의 배너 모듈(banner-module) 을 참조해주시고, 다중 페이지의 경우 pages > links.html 파일을 열어보시면 됩니다.

- 개인 배너 설정

자신의 배너는 우선 data 폴더 내에 등록하고 배너 모듈 중 ‘개인 배너 모듈’ 코드 내 다음의 부분에서 img 태그 내 src 부분에 이미지 경로를 등록해주면 됩니다.

id 속성은 삭제하거나 변경하지 마시고 img src 만 수정하실 것을 권장드립니다.

이렇게 등록된 개인 배너는 각 버튼을 통해 현재 사이트의 주소를 복사하거나 이미지 주소만 복사, 혹은 다른 사람이 퍼가기 쉽도록 배너 태그를 전체 복사할 수 있습니다.

- 가져온 배너 넣기

다른 사이트의 배너를 가져왔다면 배너 모듈에 예시와 같이 넣어주시면 됩니다. 태그 형식으로 전달받았다면 코드를 그대로 넣으면 되고, 만약 이미지 주소와 사이트 주소를 각각 지정하려면 a 태그에 # 대신 해당 링크를, img src에 배너 이미지 주소를 넣습니다.

7. 메뉴 관리하기

샘플의 메뉴 이외에 메뉴를 추가하거나 필요 없는 메뉴를 삭제하고 싶다면 각각 다음과 같이 메뉴를 관리해보세요.

- 단일 페이지 (singlePage)

메뉴에 링크로 이동하는 버튼을 추가하고, 해당 버튼을 클릭하면 특정 요소로 스크롤 되게 만들어야합니다.

index.html

이 부분이 메뉴바 안에 있는 메뉴버튼들입니다. 'test menu' 라는 메뉴를 만들어보겠습니다. 기존 메뉴 버튼에 대한 코드 1줄을 복사 및 붙여넣기하고 내용을 수정합니다.

마지막줄에 코드를 넣고 a 태그에서 href의 값을 #test라고 정했습니다. 이제 이 버튼을 클릭하면 해당 위치로 이동되도록 본문 영역에 닻을 넣어보겠습니다. 화면 아래쪽에 위치하면 알아보기 쉬울 것 같으므로 저작권 표시가 있는 footer 영역 위에서 개행을 하고 임의의 코드를 삽입합니다.

여기서 주의할 것은 div 태그 옆의 id="test" 부분입니다. id로 가리키는 값이 메뉴에서 새로추가한 버튼의 href 값과 동일해야합니다. 코드를 저장하고 메뉴바 부분에 새로운 버튼이 생겼는지, 해당 버튼을 클릭하면 어디로 이동하는지 확인해보시기 바랍니다.

이렇게 단일페이지 구조에서 메뉴를 추가하는 방법을 알아보았습니다.

- 다중 페이지 (multiPages)

다중 페이지 구조는 단일 페이지와 다릅니다. 말 그대로 페이지가 여럿으로 나뉘어져있어서 파일을 각각 수정해야합니다.

메뉴버튼 부터 만들어보겠습니다.

content.html

이 부분이 메뉴바 안에 있는 메뉴버튼들입니다. 'test menu' 라는 메뉴를 만들어보겠습니다. 기존 메뉴 버튼에 대한 코드 1줄을 복사 및 붙여넣기하고 내용을 수정합니다.

마지막줄에 태그를 넣고 a 태그에서 href의 값의 마지막을 test.html라고 정했습니다. 이제 동일한 위치에 파일을 생성해주어야 이 버튼을 클릭할 때 해당 파일이 불러와질 것입니다. 

파일생성은 다음의 위치에 해주시면 됩니다.

pages 폴더 > 새 파일 (test.html) 만들기

이곳에 메뉴 코드에 작성한 html 파일명과 동일한 test.html를 만들어주세요.

test.html 파일 내에는 다음과 같은 내용을 기본적으로 입력 되어야 기본적인 나루터의 모듈 시스템을 사용할 수 있게 됩니다. 

1, 2번 줄의 link 태그와 마지막 줄에 있는 iframe 태그 사이에 모듈을 끼워넣거나 원하는 태그를 작성하시면 됩니다. 각 파일의 코드를 저장하고 메뉴바 부분에 새로운 버튼이 생겼는지, 해당 버튼을 클릭하면 새 페이지가 잘 보이는지 확인해보시기 바랍니다.

이렇게 다중페이지 구조에서 메뉴를 추가하는 방법을 알아보았습니다.

8. custom.css 활용하기

이 외에 추가적으로 홈페이지를 꾸미려면 custom.css 파일을 활용해보세요. 해당 css 파일은 나루터의 기본 css 파일보다도 우선적으로 적용이 될 것입니다.

skin > css > custom.css

나루터를 마음껏 개조해서 자신만의 홈페이지를 만들어보세요!

# 안내 사항

- 방명록과 같이 페이지에서 접속자가 글을 작성하면 화면에 나타나는 글쓰기 기능은 개발되지 않았습니다.
(서버사이드 언어와 호스팅에 할당되는 데이터베이스를 사용 할 수 없어 제한적인 환경에서 정적 페이지로 개발하였습니다.)

- 별도의 관리자페이지가 없습니다.
(위와 같은 사유로 인해 어드민 페이지 개발이 불가능하여, 디자인 제어는 css의 root에서 var 함수 및 변수를 활용하는 방법으로 구현되었습니다.)

- 스크린 리더를 포함한 접근성이 고려되지 않고 설계 및 개발 되었습니다.

- iframe 중첩 구조로 인해 새로이 추가하시는 스크립트가 예상하는대로 동작하지 않을 수 있습니다.
(iframe 내의 노드를 수정하려면 대상 노드가 있는 파일에 js를 직접 작성하거나 임포트하여 사용해보세요.)

# QnA

- 수정사항이 바로 반영되지 않습니다.

브라우저 캐시로 인해 이전의 코드가 보이는 현상입니다. 브라우저의 캐시를 삭제하고 확인해보세요. (컨트롤/커맨드 + 쉬프트 + R 을 눌러보셔도 동일한 효과입니다.) 그러므로 크롬 시크릿창과 같은 페이지에서 확인해보는 것을 권장드립니다.

- 사용할 때 연락드려야하나요?

아니오! 별도의 연락은 주시지 않아도 됩니다. 자유롭게 마음껏 쓰세요!

- 구글 검색에 제 홈페이지가 안떴으면 좋겠습니다.

왠지 그런 분들이 많을 것 같아서 기본적으로 html 파일에 간단한 조치를 해 두었지만 완벽한 방어는 되지 않을 것입니다. 디테일하게 작업을 해보시려면 robots.txt 작성 방법과 SEO를 공부해보세요. robots.txt 를 작성하셨다면 나루의 index.html 파일이 있는 위치에 업로드하시면 됩니다.

- 방명록이 갖고싶어요..

저도 구현하고 싶었지만.. 현재로썬 꽤나 복잡해지네요. 그래도 게시판 기능을 만들고싶다면 스핀이나 패들렛.. 같은 익명 게시판 플랫폼을 임베드 해오시거나 파이어베이스를 이용해보세요. 이에 대한 별도 강의 작성은 …………. 언젠가의 누군가에게 맡깁니다 누군가는 강의를 써주지 않을까……?

- 템플릿 추가 계획이 있나요?

아니오 더이상의 업데이트는 없습니다. 버그수정만 할거지만 큰 패치도 없을 것 같습니다. 만약 패치가 업로드 되어도 개개인의 나루터에는 패치내역이 자동적으로 반영되지 않으니 그때그때 직접 패치해주시면 됩니다.

# 추천하는 외부 기능

나루터는 분명 가볍지만, 그런만큼 모든 기능을 갖고 있지 않습니다. 사용하시다보면 뭔가 부족한 부분이 생기겠죠. 그럴 땐 좀 더 홈페이지에 기능을 덧대볼 시점입니다. 개별마다 튜토리얼을 작성하기엔 무리가 있지만 간략하게나마 활용할 수 있는 기능들을 소개해봅니다.

- 트위터(엑스) 타임라인이나 포스트, 프로필 임베드하기 : https://publish.twitter.com/

- 현재 블루스카이는 포스트별로 개별 임베드가 가능합니다. : 해당 포스트에서 점 세개 > 게시물 임베드

- 파이어베이스를 사용하면 게시판/방명록 기능을 만들수 있습니다. : https://firebase.google.com/docs/database?hl=ko

- 사실 나루터와 같이 html 템플릿을 배포하는 사이트가 몇몇 있습니다. 다만 정말 많은 기능을 끌어다써서 어떤 부분이 무거워지는지, 불필요한지 스스로 판단해서 덜어내야합니다. : https://templatemo.com/

# 마치며

이용해주셔서 감사합니다.

오픈소스 리포지토리에 대한 Fork 및 PR을 환영합니다.

코드에 대한 문의나 기타 문의는 연락주세요.

단, 개인 커스텀 과정에 대한 문의는 받지 않습니다.

후기를 작성하였습니다!