업데이트 일지

친효스킨의 두 번째 버전인 친효스킨 : 아트북 반응형 스킨이 드디어 완성되었습니다. 만들어야지 생각만 하고 있다가 어느 순간 이거 계속 미뤘다가는 골로 가겠다는 느낌이 들어서 바로 작업에 착수했고 겨우 제작할 수 있었습니다. 친효스킨을 만들어본 경험이 확실히 제게는 큰 자산이 되었습니다. 티스토리의 치환자 시스템부터 인덱스 페이지의 원리까지 다 깨우친 상태라 두번째 스킨 제작은 시간 단축이 어마무시하게 되었습니다. 이 부분은 스스로에게 칭찬을 아끼지 않고 싶군요. 대견스럽습니다. 친효스킨 : 아트북 소개 기존 친효스킨의 뼈대를 어느 정도 사용은 하되 최대한 다른 테마를 제공하고 싶었습니다. 개인적으로 그림을 그리는 취미를 가지고 있습니다. 안타깝게도 현재 티스토리 스킨중에서는 그림을 그리시는 분들을 위한..

블로그/친효스킨2 2023. 3. 23. 00:09

친효스킨 : 아트북 베타 테스터 모집 안내

안녕하세요. 친절한효자손입니다. 드디어 친효스킨의 두번째 버전인 「친효스킨 : 아트북」 반응형 스킨이 완성되었습니다. 친효스킨2라고 하기에는 너무 밋밋해서 요즘 트랜드에 어울리기도 하고 부제목 지어주는걸 좋아해서 저도 어설프게 흉내좀 내봤습니다. 친효스킨 아트북 스킨은 아래의 테스트 티스토리에 적용시켜 두었으니 직접 육안으로 확인해 보시기 바랍니다. 친효스킨 : 아트북 미리보기 친효스킨 - 아트북 개발 페이지 스킨 개발용 티스토리입니다! gearbestkorea.tistory.com 스마트폰에서 보셔도 되는데 넓은 모니터 환경에서 보시는게 한 눈에 쏙 들어오니 쉽게 파악하실 수 있으실 겁니다. 스킨 테마 설명 친효스킨 : 아트북은 전체적으로 아트북, 즉 엘범의 느낌이 풍기도록 레이아웃을 구성해 보았습니다..

블로그/친효스킨2 2023. 3. 11. 00:06

티스토리 스킨 만들기! 친효스킨2 (아트북) 개발 일지 - 커버 기능 추가

안녕하십니까! 친절한효자손입니다. 2월까지 끝내려고했던 친효스킨 : 아트북 반응형 스킨의 제작은 또 한달 딜레이 되고 말았습니다. 의외로 잘 모르시는 분들이 계신데 제 성격이 굉장히 게으릅니다. 그래서 이런 결과가 나오는 것입니다. 솔직히 부지런하면 진작에 완성시켰을 스킨입니다. 이미 뼈대는 세팅이 끝났고 친효스킨을 만들어본 경험이 있으니 어디가 어떤 위치인지 파악도 끝났기에 바로 실천만 하면 되는데 이놈의 실천이 문제입니다. 겁나 게을러서... 자꾸 미뤄요. 특히 집에서는 더 안하죠. 그래서 대전에서 HTML 관련 모임도 만들어 운영하고 있습니다. 오늘은 저의 팬(?)분을 만났습니다. 사실 이분도 티스토리 스킨을 제작하고 계셔서 처음에 엄청 반가웠었죠. 그분께서 만드신 스킨이 하나 있는데 너무 마음에 ..

블로그/친효스킨2 2023. 3. 10. 00:03

티스토리 스킨 만들기! 친효스킨2 (아트북) 개발 일지 - 푸터 영역 완성

안녕하세요. 친절한효자손입니다. 친효스킨의 두번째 버전인 아트북의 완성이 코 앞 입니다. 이제 푸터 영역까지 만들었습니다. 나머지는 페이지 표현 부분과 커버 기능만 추가하면 끝입니다. 이후에는 좀 더 디테일한 스타일 수정만 진행하면 될 것 같습니다. 미리보기 푸터 영역은 위의 이미지와 같이 생겼습니다. 색상 및 글씨 크기, 스타일은 이후에도 바뀔 수 있는 점 미리 밝힙니다. 하지만 기본적인 레이아웃은 이대로 쭈욱 진행할 생각입니다. 푸터 영역 또한 당연히 반응형으로 대응하게 됩니다. 프로필 모듈을 푸터 영역으로 옮겼습니다. 원래는 왼쪽의 사이드바에 들어가 있었는데 굳이 프로필 내역을 사이드바에 넣어둘 필요는 없을 것 같았습니다. 이 스킨의 테마는 아트북이므로 뭔가 아티스트의 정보를 푸터 영역의 한 곳에 ..

블로그/친효스킨2 2023. 2. 18. 00:07

티스토리 스킨 만들기! 친효스킨2 (아트북) 개발 일지 - 댓글 + 방명록 완성

안녕하세요! 친절한효자손입니다. 점점 스킨의 윤곽이 잡혀가고 있습니다. 친효스킨 아트북 반응형 스킨의 댓글과 방명록에 대한 스타일 세팅이 완료되었습니다. 이제 진짜 얼마 남지 않았습니다. 커버 기능 하나만 남았군요. 완성이 코 앞입니다. 어서 완성하여 배포할 날을 학수고대하고 있습니다. 미리보기 먼저 댓글 리스트입니다. 기존 친효스킨의 말풍선 스타일이 너무 마음에 들기에 스타일을 대체로 유지하되 답글에 대한 스타일만 변경했습니다. 답글은 좀 더 직관적으로 보이게 하고 싶어서 답글 프로필의 왼쪽 상단에 뱃지를 달았습니다. 반응형으로 동작합니다. 모바일같은 가로가 좁은 화면에서는 안쪽 여백이 줄어들고 프로필 사진도 작아집니다. 폰트 크기는 변하지 않습니다. 방명록 스타일은 댓글 스타일과 동일합니다. 굳이 다..

블로그/친효스킨2 2023. 2. 8. 00:07

티스토리 스킨 만들기! 친효스킨2 (아트북) 개발 일지 - 본문 공유하기 + 관련글 완성

안녕하세요. 친절한효자손입니다. 친효스킨2(아트북) 반응형 스킨의 본문 하단 부분을 꾸미는 중입니다. 본문 하단은 기존 친효스킨과 같은 구조입니다. CSS 부분만 편집해서 스타일을 바꾸는 중입니다. 초반에도 말씀드렸듯 스킨에 사용되는 소스를 왕창 줄여버리려고 공유하기 버튼에 사용되었던 아이콘 이미지도 아예 사용하지 않고 모두 텍스트로 처리했습니다. 미리보기 공유하기와 관련글 영역도 모두 반응형으로 대응합니다. flex 정렬을 사용했기 때문에 각 버튼이 브라우저의 가로 사이즈에 즉각 대응해 이쁘게 배치가 되고있는 모습입니다. 마우스를 올렸을 때 발행하는 이벤트도 역시 빼놓지 않고 적용시켰습니다. 이것만큼은 절대 빠뜨릴 수 없죠. 사실 이거 구현하려고 스킨을 만드는 것이라고 해도 과언이 아닐 정도거든요. (..

블로그/친효스킨2 2023. 2. 3. 00:04

티스토리 스킨 만들기! 친효스킨2 (아트북) 개발 일지 - 본문 + 공지글 완성

티스토리 HTML 구조는 공지글과 본문의 태그가 각각 독립적으로 존재합니다. 하지만 대다수의 티스토리 스킨 스타일을 보면 공지글과 본문 글의 레이아웃이며 디자인이 똑같습니다. 친효스킨도 그렇습니다. 굳이 따로 레이아웃을 구성할 필요는 없지요. "글"이니까요. 공지글이나 본문글이나 같은 글입니다. 그래서 친효스킨 아트북에서도 스타일을 똑같이 구성했습니다. 미리보기 인덱스 페이지는 지난 시간에 완성했죠? 클릭하면 본문으로 바로 들어갑니다. 아트북 컨샙에 맞게 본문 레이아웃을 엘범의 사진첩 느낌이 나도록 만들어봤는데 의도되로 잘 표현되었는지는 모르겠습니다. 깔끔하고 심플한걸 좋아하기에 최대한 기본 스타일을 이용해서 구성했습니다. 친효스킨 아트북 본문도 당연히 반응형으로 대응합니다. 사이드바의 공지모듈에 있는 ..

블로그/친효스킨2 2023. 1. 18. 00:08

티스토리 스킨 만들기! 친효스킨2 개발 일지 - 인덱스 페이지 완성

안녕하세요. 친절한효자손입니다. 메인화면의 한 축을 담당하는 인덱스 페이지 완성했습니다. 인덱스 페이지는 검색 결과 페이지의 리스트 형태이기도 합니다. 티스토리 커버 기능 이전에 가장 기본이 되었던 메인 화면이지요. 따라서 기본 of 기본이기에 반드시 스타일을 만들어야만 하는 과정입니다. 친효스킨을 완성해본 경험이 확실히 엄청나게 도움이 되고 있습니다. 처음에는 HTML의 구조 파악부터 난관의 연속이었으나 지금은 구조는 파악했으니 스타일만 만들면 됩니다. 그렇기에 시간이 그리 오래 걸리지는 않습니다. 경험의 유무는 정말이지 엄청납니다. 이래서 경력자 우대라는 말이 나오는 것 같습니다. 미리보기 움짤로 친효스킨 아트북의 인덱스 페이지를 살펴봅시다. 인덱스 페이지는 당연히 반응형으로 동작합니다. 친효스킨과 ..

블로그/친효스킨2 2022. 12. 25. 00:09

티스토리 스킨 만들기! 친효스킨2 개발 일지 - 헤더 완성

안녕하세요! 친절한효자손입니다. 발등에 불이 떨어져서 겨우 움직이기 시작한 요즘입니다. 사이드바는 거의 완성되었고 그 다음으로는 HTML 문서의 시작이라고 할 수 있는 영역을 만들었습니다. 이번 「친효스킨:아트북」의 컨셉은 사이드바의 책갈피 느낌을 살리고 본문 콘텐츠를 부각시키는 것을 목표로 하고 있습니다. 때문에 나머지 영역인 헤더나 푸터는 크게 눈에 띄지 않도록 만들 생각입니다. 미리보기 빨간색 점선 윗 부분이 헤더 영역입니다. 아래는 본문이 들어갈 공간이구요. 보시는 것처럼 완전 초 단순하게 만들었습니다. 모든 영역은 당연히 반응형으로 제작됩니다. 모바일에서 사이드바는 본문 아래로 배치됩니다. HTML 구조 뼈대라 할 수 있는 HTML 태그를 살펴봅니다. 홈 전체글 방명록 글쓰기 관리자 친효스킨1에..

블로그/친효스킨2 2022. 12. 23. 00:04

티스토리 스킨 만들기! 친효스킨2 개발 일지 - 사이드바 완성

안녕하세요. 친절한효자손입니다. 올해 안으로 친효스킨 두번째 버전을 완성시키기로 올 초에 다짐했는데 12월이 된 지금에서야 슬슬 움직이기 시작했습니다. 예열하는데 무려 11개월이나 걸리다니... 게으름의 극치입니다. 그래도 올해를 넘기지 않은게 어딘가 싶은 마음에 조금은 위안이 됩니다. 이번 친효스킨 - 아트북은 최대한 기본 기능을 활용해서 제작할 예정입니다. 폰트어썸같은 외부 폰트를 최대한 사용하지 않을 생각입니다. 그야말로 티스토리의 기본 기능들을 적극 사용해서 로딩 시간을 최대한으로 단축시킬 생각입니다. 아이콘들은 특수문자로 대체합니다. 아무튼 궁극의 속도를 자랑하는 녀석으로 만들어 보겠습니다. 우선은 사이드바부터 작업을 완료했습니다. 가장 먼저 만들고 싶었던 영역이기도 하고 괜찮은 디자인이 생각났..

블로그/친효스킨2 2022. 12. 9. 00:03

친절한효자손 취미생활