버블버블 만들기

모든 것은 이 그라데이션부터 시작이었다.

이 그라데이션 하나에서 영감 받아서 시작함. 그때가 12월이었다...

원래는 컨테이너 박스 배경 색도 없었고 테두리도 없었고 아무것도 없었다

 

약간 이런 느낌?

 

그런데 이제 내부가 이렇게 메세지 형식인.... 남은 스샷이 없어서 그냥 느낌만 재현해봤다

그러다가 만들면서도 너무 단조로운 느낌이라 컨테이너에 별의별 효과를 다 줬었다.

테두리 효과도 넣고 아예 입체 느낌으로 컨테이너도 여러개 쌓아봤다.

 

아이템 죄다 꺼내져 있는 거 보면 알겠지만 저때 방황 상태였다. 혼자 치앙마이 가서 스킨 만들겠다고 나댔지만,,, 이너님한테 2월 안에 스킨 완성하는 게 목표라고 떠들어댔지만 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ ;; 그냥 치앙마이 가서 요양하고 온 사람 된,,, 이건 뭐 따로 포스팅하겠음

 

그래서 나온 초기 디자인은 이런 느낌이다. 생각보다 갤러리형이나 기타 다른 아이템과 어울리는 느낌이 없어서 대화 형식인 거 많이 뺐다. 버블 베리에이션 이름을 갖게 된 것도..... 이러한 과정이 있었다 지금은 그냥 거품 됐음ㅋㅋ

 

어피치랑 네오가 프사는 아니고,, 나 혼자 보는 테스트 블로그라 문대 넣어놨는데 이런 누추한 포스팅에 올릴 수는 없었다,,

 

높이가 고정되는 스킨이 되었고 이게 가독성 때문에 호불호가 갈리는 요소다 보니..... 스킨 높이에 px 단위로 고정값을 입력하도록 하지는 않았다

 

예를 들어 uhd(3840x2160) 해상도를 가진 모니터에서 최대한 길게 보겠다고 세로 길이를 1200px로 설정했다면 위 사진처럼 (1920x1080) 해상도를 가진 모니터에서는 HTML 전체 영역과 컨테이너에 각각 스크롤이 생기는 문제가 발생한다

고정값을 사용하고 max-height을 설정할 수도 있겠지만 이것도 모니터별로 느낌이 달라서 결국 세로 길이를 백분율로 설정하고 컨테이너가 지나치게 작아지지 않도록만 조정했다 .

 

보통 이런 스킨 너비를 길게 사용하는 경우는 거의 없어서 가로는 고정값을 넣었다

 

 

글 인포

원노트에 생각나는 대로 휘갈겼던 흔적

안 까먹으려고 하는 게 제일 크고 나중에 최종본이랑 비교하는 것도 재미있다

 

인포가 항상 글 위에 있어야 하나 싶어서 아래로 빼버렸지만 호불호 갈릴 요소라서 상단 버전도 추가했다.

상단에 있을 땐 제목 + 날짜/카테고리 + 포스트버튼/페이지네이션 이게 모두 드러나도 크게 답답한 느낌은 없는데 하단에 있으면 인포의 면적이 커지면서 너무 인포 쪽에만 시선이 쏠리는 감이 있다. 그래서 마우스 오버할 때만 포스트 버튼이 노출되게 했다. 걍 효과를 넣고 싶기도 했음

 

 

가로 스크롤 / 디데이 커버

 

제일 애먹었던 건 저 가로 스크롤이었다. 뭔가 기능을 넣을 때마다 계속 사이드 이펙트가 생겨서 어디서부터 문제가 있는지 점검만 수백 번 했다. 가로 스크롤 라이브러리를 찾아보면 되겠지만 시간이 부족한 것도 아니고 아직 나에겐 라이브러리 없이 코드를 짜고 성공하는 게 더 짜릿하다,,,,,,,

 

디데이 컨테이너가 뷰포트 내에 들어오면 프로그레스바가 움직인다. 만약 디데이가 스크롤 상단에 있고 커버 메인을 사용할 때는,, 이미 뷰포트 내에 있다고 감지된 상태여서 메인을 닫을 때는 이미 100%로 도달해 있다.

결국 container 값까지 감지해서 커버 메인 사용 중에는 메인이 닫혔을 때 + 뷰포트 감지된 상태일 때만 프로그레스 바가 움직이도록 변경했다 

 

<button type="button" 
		class="control-btn log-check-btn" 
		data-title-login="login" 
		data-title-logout="logout">
    <svg class="control-icon" 
		 viewBox="0 0 24 24" 
		 data-icon-login="#ri-login-circle-line" 
		 data-icon-logout="#ri-logout-circle-line">
        <use href="#ri-login-circle-line" />
    </svg>
</button>

 

기존

 

로직도 많이 바꿨다.

정답은 딱히 없지만 가능한 부분들은 전부 dataset 속성으로 통일했다

 

또 베이스가 되는 코드들은 티스토리 업데이트에 대응하기 쉽도록 모듈화 했고 이미지 지연 로딩에 grid도 미리 사이즈를 계산해서 스크롤에 영향을 주지 않도록 업데이트 했다

기존 스킨 업데이트 할 때 다 바꿔야지...

 

색 조합과 테마에 따라서 느낌이 많이 달라진다

사실 테마를 많이 넣는 건 업데이트에 대응하려면 확인해야하는 부분이 많이 늘어나기 때문에,,, 지양하려고 하는데 자꾸 더 많이!가 되어버린다 머 어쩌겠음,,

 

 

 

사진 작가: FlyD, Unsplash

사진 작가: FlyD, Unsplash

사진 작가: Sunder Muthukumaran, Unsplash

사진 작가: Pawel Czerwinski, Unsplash

 

포타 글 양식도 바꿔봤다. 뭔가 내용은 많은데 구별이 명확하지 않으니 가독성이 떨어지는 듯 하여 아예 구역마다 구분선을 넣고 폰트 크기도 달리해서 가독성을 챙겨봄

 

 

스킨을 만드는 건 재미있고 실제 내가 원하는 대로 만들어졌을 때의 만족감은 높지만 어느 순간부터 스트레스가 차지하는 비중도 커졌다. 그럼에도 아직은 만들고 싶은 스킨이 많다. 그걸 구현하는 게 문제지만

 

완성한 후에도 코드를 다듬는다는 핑계로 배포를 미뤘는데 그 이유인즉슨 너무 떨렸기 때문이다; 리뉴얼을 아무리 하고 스킨을 오래전부터 배포해 왔어도 두근거리는 건 어쩔 수 없나 보다,,, 한 100번 넘게 하면 나아질까? 

 

스킨 가격에 대해서 많이 고민했다. 커스텀 옵션이 많기도 했고,, 네,, 3천 원이 탐났던 걸로,,

원래 포타 최소 충전 금액이 5천 원이어서 불필요한 충전은 방지하기 위해 모든 스킨 금액을 5천원 단위로 통일했었다. 부랴부랴 천원 충전 기능을 넣은 포타 덕분에 다른 3종 스킨보다 3천 원 더 높게 설정했다.

 

뭔가 무료 스킨도 배포하고 싶은데 자꾸 맥시멀리스트가 되어서 보상심리가 생기는 거 같음....

ㅋㅋㅋㅋㅋ 걍 ㄹㅈㄷ 인성..;; ㅜㅜ

그런 의미에서 스킨 좋아해주시는 분들 감사합니다,,