28번 스킨 만들 때쯤~지금까지도 많이 들은 노래라서 첨부
가사는 우울하던데 난 이 노래 들을 때 우울하지 않았어서.. 꽤나 기분 좋게 들었다
이번 스킨은 3개월만의 새 스킨이고 6개월만의 새 유료 스킨이더라. 28번 스킨이 있기는 한데 내 다른 스킨에 비해 딱 잘라 "스킨이다" 라고 할 만큼의 기능이 있는 건 아니어서 그냥 아카이브용으로 빼두고 실질적인 작업물(?)로도 안 칠 생각이다. 번호는 부여하긴 했지만?
사실 여태껏 스킨을 안 만든 건 시간이 없어서 못 만든 것도 있지만 여러모로 일이 많아서 귀찮기도 했고(.....) 아이디어도 딱히 없었다. 내가 오로지 하고 싶었던 건 컨테이너 영역과 배경이 서로 구분이 되는 스킨이었는데 어째 만드는 것마다 다 배경과 컨테이너의 명확한 구분이 없는 디자인이 만들어져서 이것도 나름 삽질을 많이 했다.
내 스킨 제작 기록을 어느 정도 읽다 보면 알겠지만 나는 삽질을 욘나리 많이 한답...
이번에도 피그마에서 육천시간 쏟았다.
근데 이번에는 코드 공부 좀 더 해야지 싶은 마음만 왕창 들었다.. 디자인 감각은 어느 정도 타고나야 된다고 생각하는 편이라 그런 면에서 난 이미 탈락했으니 기술적인 면을 더 발전해야겠단 생각뿐,,,
하지만 난 굴하지 않으니까
화이팅~
이 디자인은 27~28번 스킨을 만들 때쯤 나왔다. 29번째 스킨도 영 아이디어가 안 떠오르길래 예전에 만들어둔 피그마 프레임들 많이 끌올했다. 이땐 웰컴 문구를 써놓는 거에 꽂혀 있어서(대시보드st의 영향이긴 하다) 여기에도 해당 문구가 들어가 있다.
수정 옵션 구성은 이렇게 돼 있어서 웰컴 문구로 쓰기 싫다면 플레이스홀더인 [name]을 없애고 마음대로 사용할 수 있기는 하다. 29번에도 이걸 살릴지 말지 고민을 꽤 했었다.
그 다음에는 이런 식으로 뚱뚱한 사이드바를 만들었었는데 너무 단조로울 것 같아서 일단 뒤로 미뤘다. 그리고 이때부터 프로필 사진을 사진 속 형태로 만드는 데에 꽂혔다. 이걸 blob 형태라고 한다
번외로 노선을 이리고 틀기도 했는데 이건 지금 말고 다음에 해봐도 될 만큼 특색이 강한 디자인이 아니었다. 비슷한 걸 이미 만들어서 굳이 또...? 느낌이었음
최종적으로 나온 피그마 파일은 요런 식이었다. 이땐 2단 레이아웃으로 디자인을 짰었는데 좀 심심하기도 하고 사이드바에 넣고 싶었던 게 하나 있는데 그렇게 되면 사이드바가 불필요하게 길어지는 것 같아서 3단으로 바꿨다. 근데 사이드바에 넣을 아이템이 2단으로 하기에는 많고 3단으로 하기에는 적어서 뭘 넣어야 할지 고민 죽게 했다 푸하하..
결국 21번 스킨에서 했던 거 그대로 가져왔는데 이 글을 쓰고 있는 시점이 아직 29번 스킨을 만들고 있을 때라서 다른 것들도 좀 넣어볼까 싶다.
3단 레이아웃은 이번이 세 번째인데 해도 해도 어렵다.. 근데 꽉찬 느낌이 좋아서 스불재를 놓지 못하는 듯. 근데 사실 1단 레이아웃에 모든 걸 욱여넣는 것도 만만치 않게 힘들다
그리고 가끔 내 감성이 좋다고 말씀해주시는 분들이 계시는데 나는 내 감성이 뭔지 잘 모르겄다... 하지만 정말 감사해
뭔지 모르겠지만 일단 감사하고 보는 편 😅
그리고 내 스킨은 언제나 그렇듯.. 2단/3단 옵션을 제공한다
2단으로 바꿔도 사이드바 아이템들은 하나도 빠짐 없이 100% 다 사용이 가능하다.
사실 지금의 디자인이 있기 전에 이게 먼저 있었다. 오른쪽에 있는 사진을 내리면 프로필이라던지 기타 컨텐츠들이 나오는 형식으로 만들었었는데 느낌이 안 왔음. 자고 일어나서 다시 생각해봤는데 좀 아리까리해서 엎었다.
섹시해보이지 않았음
참고로 검색창은 이런 모양이다. 이건 언젠간 살리지 않을까 싶음
28번 스킨처럼 그래프를 넣었다. 외부 라이브러리 사용했고 저작권 표시에 상업적 이용도 가능하다길래 냉큼 썼다. 지금은 색상 수정을 스킨 수정 옵션에서 하도록 만들어놨는데(그래서 8개까지밖에 출력이 안 됨) 이건 방법을 바꿔볼까 싶다.
커버 아이템을 사용해도 되긴 하지만 그래도 색상코드를 텍스트로써 입력하는 것보다 색상 팔레트에 입력하는 게 더 낫지 않나 라는 생각을 해서 이런 방식으로 코드를 짰는데 사실 그게 그렇게 크게 차이가 날 것 같지도 않아서... 아무튼 이건 바꿀까 한다.
방법을 바꾸면 8개 이상도 쓸 수 있게 돼서 좀 더 유연하게 만들어볼 수 있을 것 같다.
--- 바꿈!
더불어 사이드바에는 이 그래프도 제공한다. 위에서 사이드바에 넣고 싶었다고 말했던 아이템이 이거였다. 원형 그래프랑 같은 라이브러리 사용했음. 다크모드도 지원한다
커버 아이템인데 이번에는 아이템 컨테이너도 채팅창처럼 디자인해봤다. 디자인 요소일 뿐이라서 저 아래에 있는 가짜 입력창과 가짜 버튼들은 아무런 기능을 안 한다ㅎㅎ.. 그리고 이번에는 이미지 출력이 됨!! 대신 프로필 이미지는 하나로 고정되고 스킨 수정 옵션에서 바꿔야 하지만 그 정도는 불편함은 어느 정도 봐줄 수 있다고 생각해서(???) 유연하게 쓸 수 있도록 코드를 짰다.
19번 스킨에서는 초기뿐만 아니라 한번 해당 영역을 벗어난 후에 다시 스크롤할 때마다 메시지가 서서히 드러나는 효과가 적용이 됐지만 개인적으로는 그게 좀 더 어지럽길래 초기에만 효과를 입혀놨다. 이건 안 바꿀 생각이다.
사이드바에도 미니 버전으로 하나 넣어뒀다. 여기에도 말풍선이 서서히 뜨는 효과를 줄까 싶었지만.. 글로벌 스코프에서만 호출해둔 함수 보고 기함해서 막판에 코드 다이어트를 조금 했었다.
정리하기 전이긴 하지만 이게 글로벌 스코프에서만 호출되는 함수의 양이다.... 다른 조건부 함수에서 호출되는 또다른 함수도 왕왕 있다
이번에는 커버 아이템에 힘 좀 써봤는데 전에 어떤 분이 이 기능이 마음에 드는데 19번에만 있는 게 아쉽다고 방명록 남겨주셔서 이번 스킨에도 한번 넣어봤다. 19번 스킨이랑 똑같이 작동됩니다
개인적으로도 마음에 드는 기능이지만 사실 이번 스킨 디자인과는 살짝 따로 노는 느낌이 없잖아 있는데(적어도 내 생각엔) 사용자 입장에서 이 로직이 좋을지, 아래에 만든 형식의 로직이 더 좋을지 알 수 없어서 두 개 다 넣어봤다
이것저것 많이 넣은 스킨이라 로딩 속도가 좀 더딘 것 같아서 홀로 즙짬..
그 다른 로직은 슬라이드형이다. 요번에는 슬라이더 형태의 플레이리스트도 제공한다.
슬라이드 로직 짤 때 잠깐 렉걸려서 머리에 쥐났었음..
그래서 이 짓을 했다
수학 별로 안 싫어했는데 점점 갈수록 수학 문제 풀 때마다 빡대가리가 돼 가는 느낌이 들기 시작함
슬라이더 아이템에 글이 있으면 좌측 하단 버튼이 생성되고 그 버튼을 클릭하면 글이 팝업창으로 뜬다. 내용이 없으면 버튼도 덩달아 숨김 처리된다.
신경 좀 써봤어요
티는 안 나지만 댓글/방명록 영역에도 신경 많이 썼다. 일단 기존에 돌려막기했던 코드를 싹 다 지우고 새로 쌓았다 주석으로 메모도 해가면서..,
23번 스킨에서 프로필 정보가 나와있는 헤더는 코드로 집어넣는 방식을 썼는데 이번에는 댓글창 안에 있는 요소를 사용해서 앱솔루트 포지셔닝으로 짰다. 이 방식이 더 정확하고 불필요한 스크립트 코드가 안 들어가서 마음에 든다. 그땐 왜 이 생각을 못했는지 싶다.
약간 그거 같긴 함 복잡한 것만 생각하다보니 쉽게 가는 길은 생각조차 안 하거나 못하게 된 어쩌구
플레이리스트 피드백에 이어서 이번에 적용한 피드백은 추가로 요렇게 있다
첫번째 캡쳐에서 말하는 기능은 lazy loading인데 사실 티스토리 스킨으로 lazy loading을 100% 구현할 방법은 없다. 이미지를 웹에 첨부하기 전에 미리 조건에 맞도록 코드를 구성해놔야 하는데 스킨으로는 그럴 수 없기 때문이다. 근데 비슷하게나마 구현해볼 수는 있고 나도 이 부분은 늘 생각해오던 거라 아싸리 하고 적용했다. 이건 옵션으로 제공하진 않고 디폴트로 들어간다.
두번째는 사실... 나름의 매력이 있다고는 생각하는데 난 별로 안 좋아한다(^^;) 근데 생각해보니 필요한 사람이 더 있을 수도 있을 것 같아서 한번 넣어봤다. 이건 스킨 수정 옵션에서 쉽게 온오프 할 수 있게 준비해놨다.
근데 스킨 만들면서 자꾸 보니까 점점 스며듦
매력 꽤나 있는 것 같어
그래서 이 블로그에는 적용해놨다
하핫,,
28번 스킨에서 처음 적용해본 알림창 기능을 이번 스킨에도 적용했다. 이미지가 들어가는지의 여부에 따라 HTML 코드가 달라져서 이건 자바스크립트로 처리했다. 근데 생각해보니까 그냥 티스토리 기능 사용해도 될 것 같고?? 코드 뜯어서 한번 수정해봐야겠다.
예외 처리가 복잡해져서 안 될 것 같당
이번에는 아이콘 옵션도 있다. 사실 이건 안 해도 되는 부분인데 괜히 한번 넣어봤다. 모든 아이콘 옵션에 들어가는 건 아니고 내가 생각했을 때 자유롭게 쓰면 좋을 것 같은 부분에만 선택적으로 들어간다.
<!-- Font Awesome -->
<i class="--입력받은 값--"></i>
<!-- Iconsax -->
<i class="iconsax" type="bold" icon="--입력받은 값--"></i>
<!-- Solar Icon -->
<i class="solar-icon" icon="--입력받은 값"></i>
근데 이 로직은 대충 위의 코드 세 줄을 HTML에 동시에 넣고 CSS로 디스플레이 처리를 해줘야 했어서 한쪽에는 인식되는 값이 다른 쪽에서는 존재하지 않는 값이라며 에러를 던지기 때문에 마냥 좋은 코드는 아니다.
(에러를 던지긴 해도 스킨은 정상적으로 쓸 수 있다...)
-
이 얘긴 저번에도 한 것 같지만 내 스킨은 수정 옵션이 정말 많이 들어가는 편인데 그럴수록 코드를 안 보고 커스텀이 가능해지기 때문이다. 물론 무조건 많다고 좋은 게 아니란 건 안다... 왜냐하면 너무 많으면 정확히 뭐가 있는지 한눈에 파악하기 힘들기 때문에 일장일단이 있긴 하다. 근데 수정 옵션이 다양해서 코드를 몰라도 수정할 수 있다는 말을 몇 번 들었어서(내가 너무 좋아하는 말이다ㅎ) 마냥 줄이기도 참 애매하다 이 중간 지점을 찾는 게 힘든 것 같음
그리고 옵션이 많아지면 많아질수록 index.xml 파일 수정하고 특히 에러 찾는 게 극악이 됨... 그걸 이번에 두 번이나 겪었다. 별로 좋지 못한 경험이었어요......
그도 그럴 게 내 인덱스 파일조차도 코드가 2000줄이 넘어가기 때무네..
그래서 지금 인덱스 버그를 못 고치고 있다... 스킨을 적용하면 토글 옵션이 다 꺼진 채로 적용되는 버그인데 정확히 어디서 문제가 되고 있는 건지 파악조차 안 됨
-- 찾았다
<variable>
<name>profile_default</name>
<label><![CDATA[ 티스토리 프로필로 적용 ]]></label>
<type>BOOL</type>
<default>TRUE</default>
</variable>
여기서 불리언 타입 디폴트를(<default>TRUE</default> 이 부분) 소문자로 써줘야 했는데 난 대문자로 써서 그랬던 거였다
최근에 티스토리가 이것저것 손보면서 인덱스 파일 검사를 엄격히 하는 것 같더라. 그래서 원래 되던 것도 갑자기 안 되고 그랬나봄?
하 진짜 쓸데없는 것만 바꾸시네
이봐 형씨;
이것도 추가했다
나는 서치리스트도 스크립트 코드로 설정하는데 가끔 이 문구를 바꾸고 싶어하는 분들이 계셔서 이것저것 추가하는 김에 문구도 커스텀 가능하게 옵션을 넣었다. 스크립트를 손봐도 되긴 하는데 번거롭기도 하고 HTML이나 CSS보단 좀 어렵게 느껴질 것 같아서 최대한 스크립트 수정은 최대한 안 하는 쪽으로 안내를 드리고 있다
스크립트는 적용되기까지 시간도 걸리고(그래봤자 5분 내외라고 하긴 해도) 무엇보다 스크립트 코드는 따로 편집창을 지원해주지 않기 때문에 수정하고자 하는 사람이 메모장으로 열어서 코드를 고치거나 따로 코드 에디터를 써야 하는데 그게 너무너무 귀찮은 것 같음
여기까지 쓰고 수정 옵션이 몇 갠지 러프하게 계산해보니까 이번 스킨에는 263개나 들어가더라. 음... 너무 많단 생각이 드네 정말 미안합니다..
많은 시간 쏟은 작업물이긴 합니다. 버그는 다른 거긴 한데.. 암튼 이번 스킨 때문에 이것도 함(↓)
Solar Icon 리뉴얼 기록
스킨 리뉴얼은 아니지만 이것도 리뉴얼은 리뉴얼이니까 호기롭게 만든 아이콘 사이트로딩이 느리다. 거짓말 안 하고 67개 아이콘 불러오는데 거진 10초가 걸린다 리소스 페이지에 써
ghoststories.tistory.com
그냥 그 안에서 최대한 행복해주세요..... 그럼 저는 이만 에콩 ^^;