나만의 포트폴리오 블로그 만들기(feat. 티스토리 스킨)
나만의 포트폴리오 블로그 만들기(feat. 티스토리 스킨)
수강정보
(5개의 수강평)
451명의 수강생
스킬태그 #블로그, #HTML/CSS
무료
지식공유자 : 정상우
15회 수업 · 총 1시간 55분 수업
기간 : 평생 무제한 시청
수료증 : 발급 강의
수강 난이도 : 초급

이 강의는

티스토리 스킨 개발방법을 익히고 필자가 만든 티스토리 스킨 개발 전용 프레임워크인 티도리에서 제공하는 빌드, 배포 자동화, 코드 분할과 같은 내용을 배웁니다.

나만의 포트폴리오 블로그 만들기(feat. 티스토리 스킨)

블로그는 누군가에게 있어 수입의 수단이 되기도 하고, 또는 포트폴리오로써 역할을 하기도 합니다. 많은 사람들이 네이버 블로그를 사용하지만, 디자인의 한계로 개발자나 디자이너, 기획자 등 자신의 포트폴리오로 사용하기에는 부족한 경우도 있습니다. 세상에는 네이버, 미디움, 워드프레스 등 수 많은 플랫폼이 있지만, 우리는 티스토리에 대해 다루어봅니다.

Why 티스토리?

네이버 블로그가 아닌 티스토리가 좋을까요? 아마 아래와 같은 장점이 있을 것입니다. 물론, 단점도 있겠지만, 네이버 블로그는 사용자 편의성에 중점을 둔 서비스이므로 티스토리보다는 자유도가 떨어질 수 밖에 없습니다.

  • 네이버 블로그가 가지는 디자인적 한계를 극복
  • 다양한 자바스크립트 프레임워크를 사용할 수 있고 기존 프론트엔드 개발환경과 동일하게 구성 가능
  • 카카오 애드핏, 구글 애드센스를 이용한 광고 수익 우위
  • 포트폴리오나, 홍보, 렌딩 페이지로써 활용 용이
  • 코딩을 전혀 모르더라도 이미 만들어진 다양한 스킨 템플릿과 사용자 제작 스킨으로 디자인을 얼마든지 변경가능
  • 카카오에서 운영하고 있고, 사용자 편의성은 깃허브 페이지나, 워드프레스보다 우위

따라서 정리해보면 다음과 같습니다.

  • 사용자 편의성: 네이버(소스 코드 수정 불가) > 티스토리 > 워드프레스 >>>> 깃허브
  • 검색: 네이버(in 네이버) > 티스토리 >= 워드프레스 >= 깃허브
  • 디자인 자유도: 워드프레스 > 티스토리 >= 깃허브 >>>> 네이버(소스 코드 수정 불가)
  • 범용성: 워드프레스 > 티스토리 > 네이버  >>>> 깃허브(대부분 개발 블로그로 운용) 
  • 광고수익 : 티스토리 > 네이버 > 워드프레스 >= 깃허브

아직도?

티스토리는 기본적으로 제공하는 스킨을 써도 되지만, 보다 다채롭게 사용하기 위해서는 스킨을 직접 개발할 필요가 있습니다. 허나, 지금까지의 티스토리 스킨 개발방식은 너무 진부하고 클래식한 방법이었습니다. 하나의 파일(skin.html)에 스킨이 가진 모든 기능을 몰아넣고 HTML/CSS 를 사용하여 쌩으로 코딩해서 제출하는 방식이었습니다. 하지만, 지금은 시대가 너무나도 변하였습니다.

Pug, Stylus, Typescript 등 다양한 확장 언어가 나왔음에도 이것을 사용할 수 없고 한다해도 직접 컴파일해서 사용해야 하기 때문에 이는 개발자에게 불편함을 초래했으며, npm 을 사용할 수 없고, CDN 방식이나 과거처럼 직접 다운 받아서 포함시켜야 했으니 이는 최근 기술과는 동떨어졌었습니다.

티스토리 스킨만을 위한 프레임워크

거듭 고민을 한 결과, 티스토리 스킨 개발만을 위한 프레임워크를 제작하게 되었습니다. 이는 일반적인 자바스크립트 프레임워크가 아니며, 프로젝트 템플릿과, CLI 도구 등을 포함하고 있기에 프레임워크라고 지칭하였습니다. 이름은 티도리 프레임워크이고, 웹팩을 사용하여 Pug, Stylus, Typescript 와 같은 확장언어를 사용하도록 설정할 수 있습니다. 티도리에서는 기본적으로 HTML 확장언어Pug 를 기본 템플릿으로 삼습니다.

티도리 프레임워크

프레임워크는 기존의 문제점들을 해결하고 생상성을 향상하기 위해 태어납니다. 기존 티스토리 스킨 개발 상에 문제가 있었던 부분들을 티도리 프레임워크에서는 다음과 같이 해결하도록 설계하였습니다.

https://tidory.com/

티도리 프레임워크로 만든 스킨은 무엇이 있나요?

티도리로 만든 스킨은 대표적으로 hELLO. 가 있습니다. hELLO. 스킨은 제가 만든 스킨으로 티도리 프레임워크로 제작 되었고, 다크 모드를 포함하는 등, 티스토리 스킨의 모범 사례로 볼 수 있습니다.

https://pronist.tistory.com/5

디자인과 코드 작성

1. 다양한 기능을 제공하는 확장 HTML, CSS 템플릿 엔진은 수동으로 컴파일해서 사용해야 하며, skin.html, style.css 에 티스토리 스킨에서 사용할 모든 기능(Header, Content, Sidebar, Footer 등)을 모두 몰아넣어 작성해야합니다.

SFT(Single File Template)형태로 구성합니다. 하나의 템플릿 파일에 template, script, style 이 모두 포함되며 빌드시 용도에 맞게 분리됩니다. vue 템플릿 처럼요! 그러나, 이는 하나의 관심사(Header, Content 등)에 사용하는 것을 의미하며 템플릿 자체는 관심사에 맞게 분리할 수 있습니다. 기존의 방법에는 관심사에 관계없이 모두 몰아 넣었습니다.

템플릿과 코드 분할
https://tidory.com/docs/template/

2. SPA(Single Page Application) 프레임워크와 npm 사용에 제약이 많습니다.

웹팩을 사용하므로 npm 레지스트리에 있는 다양한 패키지를 자유자재로 이용할 수 있으며, 리액트를 사용할 수 있도록 구성하였으므로 자신의 프론트엔트 기술을 마음것 뽐낼 수 있습니다.

프레임워크 - 뷰 & 리액트
https://tidory.com/docs/framework/

3. 템플릿과 컴포넌트를 따로 분리하여 필요할 때 재활용하거나 다른 사람이 작성한 코드를 포함시키기 어렵습니다.

우리가 템플릿을 구성하는 이유는 재활용을 하기 위함입니다. 패키지를 구성하여 과거에 작성했던 템플릿을 npm 을 통해 설치하고 티도리 프레임워크에 포함시킬 수 있습니다.

패키지 - 템플릿과 컴포넌트 재활용
https://tidory.com/docs/package/

테스트

1. 적용된 스킨의 모습을 확인하려면 스킨편집에 들어가서 코드를 복사 붙여넣기 하고, 정적 리소스 파일(.js, .png 등)을 업로드 해야합니다. 소스코드에 변경사항이 있을 경우에는 파일을 다시 업로드 해야합니다.

기존의 티스토리 스킨을 테스트하려면 상당히 번거로운 일을 거쳐야 했습니다. 스킨 편집에 진입하여 코드를 업로드하고 이를 티스토리 플랫폼상에서 확인해야하는 과정을 거쳐야했죠. 하지만, 이제는 그럴 필요가 없습니다. 개발 서버와 프리뷰 서버가 있기 떄문이죠! 스킨이 해석된 모습을 미리보고, 스킨 옵션을 테스트하고, 스킨 커버를 미리 시뮬레이션 할 수 있습니다.

시작하기 - 개발 서버와 프리뷰 서버
https://tidory.com/docs/get-started

빌드 및 배포

1. 스킨을 적용하려면 스킨편집에 직접 들어가서 코드를 복사 붙여넣기하고 파일을 업로드해야하거나 스킨저장소에 수동으로 업로드해야 합니다.

빌드 및 배포는 티스토리 스킨의 마지막 단계입니다. 티스토리 스킨의 경우 배포 과정 또한 역시 번거로웠습니다. 그러나, 이를 자동화하여 명령 한 번으로도 티스토리 스킨을 적용하고, 저장소에 업로드할 수 있도록 구성할 수 있습니다.

빌드 및 배포 - 자동화
https://tidory.com/docs/distribute/

★, 개발자에게 큰 힘이 되어줍니다! - https://github.com/tidory

이런 걸 배워요

  • 티스토리 스킨 개발
  • 티도리 프레임워크

도움 되는 분들

  • 자신만의 블로그를 만들고 싶으신분
  • 티스토리 스킨을 제작해보고 싶으신 분
  • 티스토리 스킨에 프레임워크를 써보고 싶으신 분

선수 지식

  • HTML5/Pug Template
  • NPM
  • Javascript

공개 일자

2019년 4월 08일 (마지막 업데이트 일자 : 2019년 11월 20일)
4.6
5개의 수강평
default_profile.png
yoon 6달 전
나만의 스킨을 만들고 싶었는데, 이 강의로 엄청난 자신감이 생겼습니다. 물론 아직 초보라서 강의를 몇차례 반복하면서 손에 익혀야 할 것 같아요. 훌륭한 프레임워크와 상세한 강의 정말 감사드립니다! :)
default_profile.png
이성민 1달 전
티도리 프레임워크 공식 문서를 영상으로 본다는 느낌이었네요 강사님 말투가 정말_____많이_____끊기는거_____말고는_____나쁘지_____않았어요. 리액트나 Vue 프레임워크를 사용하는 방법, assets 폴더의 app.js를 사용하는 방법, style.css 파일을 직접 다루는 방법(.style @import "./style.css"로 하니까 비슷하게나마 되더라구요)등에 대해 더 자세히 다뤄주셨으면 좋겠네요. 영상이 말_____끊기는거_____빼고는 괜찮았는데, 티도리 공식 문서가 더 자세히 나와있어서 큰 메리트는 없는 것 같아요. 그것과는 별개로 좋은 툴 감사합니다! 정말 잘 쓰고 있어요🙇‍♂️🙇‍♂️
정상우

정상우 1달 전
ㅋㅋ 재치있는 수강평이시군요. 아무래도 강의제작일로부터 1년이 넘었고, 티도리 프레임워크는 지속적으로 발전, 성장시키려고 하다보니 강의가 못 따라가고 있는 부분도 있는 것 같습니다. 말이 끊기는 건 아마, 제가 일부러 말을 천천히 해서 그럴지도 ~? 강의 내용도 보강을 슬슬 해주어야겠네요.

2715-bpfull.jpg
최윤범 2019.11.20
더 이상 스킨을 찾아 헤메지 않아도 된다!!
정상우

정상우 2019.11.20
수강평을 남겨주셔서 감사합니다 :) 소중한 한 줄은 개발자에게 큰 힘이 되어줄 수 있습니다!

교육과정

모두 펼치기 15 강의 1시간 55분
섹션 0. 티스토리 스킨 기본
2 강의 17 : 07
섹션 1. 티도리 프레임워크 (튜토리얼)
6 강의 44 : 06
시작하기
08 : 00
디렉토리
05 : 18
템플릿과 코드 분할
07 : 17
티스토리 예제
05 : 56
환경설정
08 : 25
빌드 및 배포
09 : 10
섹션 2. 티도리 프레임워크 (스케일링 업)
2 강의 21 : 14
자바스크립트 프레임워크
10 : 30
패키지
10 : 44
섹션 3. 티스토리 스킨 개발
5 강의 32 : 44
프로젝트 준비
07 : 13
스킨 구조와 사이드바
06 : 13
사이드바
04 : 40
글과 페이징
07 : 50
빌드 및 배포
06 : 48
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스