커미션 정리하는 이야기

거의 4~5년 만에 진행한 커미션... 너무 오랜만인데, 의뢰주신 내용도 감사하고 또 재미있을 것 같았다. 뒤늦게 정리한다...ㅎㅎ

 

| 기획

 

주로 사진/그림 백업을 하셨고, 포함되어야 하는 기능은 커버 - 링크, 디데이 & 트위터 위젯이었고 프로필 및 배경(헤더) 등 꾸밈 기능이 계속 상단에 노출되기를 원하셨다. 그림에서 사용하시는 색이 주로 초록색이셔서 나도 스킨을 만들 때 사진이나 포인트 색상에 초록색을 넣어가며 디자인을 잡아갔다.

 

짤막한 기획 스케치..

그냥 내 스타일로 만들어달라고 하시면서 예전부터 내 스킨을 잘 이용하셨다고 하셔서 이 스킨을 만들면서 나 다운게 몰까?(ㅋㅋ) 계속 고민했던 거 같다.

 

 

| 실제 구현

 

블로그 첫 (tistory.com) 접속 시 뜨는 메인 화면, Enter를 누르면 스킨 홈 커버가 나타난다. 이외 화면에서는 안 뜸

다른 캡쳐에는 누락 됐지만... 검색 버튼 옆 구독 버튼이 존재한다.

- 스킨 요소 

 

1. 스킨은 가로, 세로가 고정되어 특정 컨테이너 안에서 스크롤 하는 방식인데, 이 세로값을 길게 주어 (94vh) 답답함을 느끼지 않도록 했다.
2. 배경 사진은 항상 열려있는 게 기본값이고 닫히는 건 잼있으라고 넣어봤다. 잼있는게 있어야.. 잼있잖아
3. 메뉴바 밑의 블로그 이름을 누르면 카테고리 링크(블로그주소.tistory.com/category)로 넘어가고, 화살표를 누르면 카테고리가 토글된다. 블로그 이름 자체가 전체 카테고리 역할을 하는 셈이라서 토글되는 카테고리에선 전체 카테고리 보기가 없다.
4. 7시~18시까지는 ☀️ 아이콘, 이후부터는 🌙 아이콘이 출력되고 당일 날짜가 영어로 출력된다.
5. 블로그 주인의 프로필 사진에 마우스를 갖다대면 이름이 나오고, 클릭하면 블로그 메인 주소로 연결된다. 마우스 오버 효과도 사진만 넣기엔 심심해서 잼있는 요소로 들어갔다.
6. 아래에 위치한 메뉴바는 홈/공지사항/방명록/로그인 버튼이다. 태그 기능을 사용하지 않으셔서 넣지 않았고 커버 태그 클라우드 사용 시 더보기를 누르면 태그 클라우드로 이동할 수 있다. 머 html에서 메뉴바에 링크를 추가해도 되긴 함. 로그인 버튼의 사진은 블로그 주인의 프로필 사진이 아닌 방문자의 프로필 사진이 출력된다. 비로그인자만 블로그 주인 프사가 출력된다.

 

- 커버 요소

 

1. 커버마다 카드 형태로 디자인을 잡았고, 배경 색상을 지정할 수 있게 했다.
2. 트위터 위젯은 계속 모든 페이지에 노출될 필요는 없다고 생각해서 스킨 커버에 두었다.
3. 원래도 공지&링크&디데이 외에 커버는 사용하지 않으셨지만 이왕 제작하는 거 많은 옵션을 넣어드렸다. 캡쳐에는 없지만 웹진/피드 커버도 있다. 
4. 그림러이신 만큼 언젠가 갤러리 커버를 사용하시지 않을까 해서 조금 더 색다르게 만들어 보고 싶었다. 양 사이드의 썸네일을 클릭하면 좌/우로 넘어가고, 가운데 썸네일을 클릭하면 해당글 본문으로 이동한다. 코드는 별 거 없고 클릭된 아이템의 인덱스와 해당 아이템을 인수로 받고 → (현재 인덱스(currentIndex)와 클릭된 인덱스가 같으면 navigateToItem 함수 호출 → 해당 아이템의 링크로 이동, 다르면 updateGalleryPosition 함수 호출 → 갤러리 컨테이너의 위치를 업데이트) 하는 방식이다.. 다른 스킨에 넣을 지는 모르겠다. 일단 컨셉이 맞아야 들어가니..
5. 디데이는 처음엔 헤더에만 존재했는데 커버에도 추가해드렸다. 날짜가 연동되지는 않고 다른 기념일을 챙길 수 있도록 분리했다.
6. 링크 커버는 메인화면의 링크랑 분리되지 않고 연동된다. 링크에서 이모지를 넣지는 않았고 아이콘 세트를 넣어봤다. 리믹스 아이콘에서 지원하는 브랜드 많은 거 아주 굿임,,
7. 인용(메세지) 커버를 만들어봤다. 보통은 홈페이지의 Q&A 혹은 자기소개 용도로 사용하는데 나는 그림 커미션의 개장 여부나 드림 용도로 사용하실 수 있도록 했다.

 

function handleItemClick(clickedIndex, item) {
    if (clickedIndex === currentIndex) {
        navigateToItem(item);
    } else {
        updateGalleryPosition(clickedIndex);
    }
}

function navigateToItem(item) {
    window.location.href = item.getAttribute("href");
}

function updateGalleryPosition(newIndex) {
    currentIndex = newIndex;
    galleryContainer.style.transform = `translateX(calc(-${100 * newIndex}% - ${galleryGapNum * newIndex}px))`;
}

 

공지사항

(1)(2) 대표 썸네일이 있는 본문, (3) 썸네일이 없는 본문

역시 그림러이신 만큼 썸네일이 있는 글들이 대부분인데, 본문에도 대표 썸네일이 출력되도록 만들어봤다.

 

본문 요소

카테고리 화면 - 갤러리(1), (2)

카테고리 목록 스타일 - 갤러리(2)의 작동 방식은 커버 갤러리와 동일하다. 원래는 갤러리(2)의 썸네일 세로 비율이 더 길었는데... 조금 납작해졌다. 이유는 내가 변태 비율(3:2)의 노트북(서피스 프로)과 uhd해상도의 모니터를 메인으로 사용 중인데 fhd 해상도인 1920x1080에서 보면 썸네일 세로 비율이 뷰포트보다 길어져서 불필요한 스크롤이 발생했기 때문이다. 캡쳐도 서피스로 해서 스킨의 세로 길이가 살짝 길게 보인다

 

카테고리 화면 - 웹진, 메모, 리스트

댓글 & 방명록

캡쳐엔 없지만 리플 아이템마다 마우스 오버를 하면 작성 시간과 답글 버튼이 나타난다. 닉네임/작성시간 둘 다 보이는 건 살짝 번잡한 부분이 있어서 작성시간을 가려놨다.

 

다른 포인트 색상

 

 

 

다른 것보다도 의뢰하신 선생님께서 너무 친절하셔서 더 열심히 작업에 매진했다. 사실 커미션 스킨을 만들면서 새 스킨도 같이 만들고 싶었는데 컨디션의 영향도 있었고 점점 바빠지고 있어서 커미션 스킨만을 완성해야 했다. 그래도 1달 마다 스킨을 생성해내는 것에 의의를 두고 싶다... 어쨌든 너무 만족해주셔서 뿌듯하고 좋은 경험이었다 🫠 스킨 기능에 대해 pdf로 간략하게 정리해서 드리긴 했지만.. 블로그에도 정리하고 싶었다 👏