개요

디자인을 뜯어고쳤다.

이렇게 바꿨다. 왜 이렇게 바꿨는지, 어떻게 구성되는지 설명하겠다.

  • 이전 디자인

바꾼점

1. 테마색

테마색을 하나 골라줬다.

이전 버전은 테마색 없이 오로지 #FFFFFF#3A3A3A만을 사용했는데, 몇몇 부분에 강조 효과를 두고자, 그리고 다크모드를 고려해서 테마색으로 #8F83D8을 넣어줬다.

왜 넣었는지는 아래서 자세히 설명하겠다.

살짝 진한 회색

좌 : 구버전, 우 : 신버전

sns공유 아이콘등에 들어가는 그 색이다.

#3A3A3A에서 #585858으로 바꿨다.

전버전에선 너무 튀는 감이 있는데다 중요한 부분에 넣을 테마색(#8F83D8)을 넣었으므로 얘는 비교적 눈에 덜 띄어야 겠다는 생각에 확 연하게 바꿔줬다.

2. 컨테이너

디스플레이에 따라서 배경색과 구분이 잘 안될수도 있다.

배경을 아주 연한 회색으로 하고 흰색 박스가 올라가는 식으로 재구성했다.

이렇게 배경을 사짝 어두운 색으로 해주면 그림자 없이 입체감을 느낄 수 있게 해준다.

또한 이런 👇


디바이더 없이 구성 요소를 쉽게 분리할 수 있다.

3. 공감/공유 버튼

이건 없앤게 아니다. 전버전에선 위 이미지 기준 첫번째 세로 형태로 글 옆에 배치했었는데, 그걸 글 아래에도 배치했을 뿐이다.

단, 한 화면에서 똑같은 버튼이 이쪽에도 있고 저쪽에도 있는건 별로이므로 내가 가진 모든 JS/CSS 애니메이션 기술을 활용하여 글 하단으로 스크롤하는 순간 좌측의 공감/공유 버튼을 치울 수 있게 디자인하려한다.

4. 목차 및 구독 버튼

전에 있었던 우측 목차 보기를 컨테이너 안에 넣고, 넣을 공간이 없어 헤매던 "구독하기"버튼도 이쪽에 배치했다.

또한 목차를 컨테이너 안에 넣으면서 좌우 여백이 똑같게 정렬했다.

5. 다크모드!!

라이트버전 이미지와 다르게 예시 본문이 없는건 배경이 투명한 본문을 따로 만들기 귀찮았을 뿐이다.

컨테이너테마색을 적용하면서 쉽게 다크모드를 만들 수 있었다.

다크모드 적용은 구글의 Material Design을 참조하고 있다.

Material Design
Build beautiful, usable products faster. Material Design is an adaptable system-backed by open-source code-that helps teams build high quality digital experiences.
https://material.io/design/color/dark-theme.html

아직 공부중이고, 생각보다 드크모드라는게 심오해서 좀 더 알아보고 조금씩 뭘리티를 늘려갈 생각이다.

다크모드 토글 버튼

구글링하다 발견한 Expo Dark Mode Switch의 디자인을 갖다 붙였다.

EvanBacon/expo-dark-mode-switch
Based on a component from the home screen of twizzle by @thekitze. Converted to Expo for use in iOS, Android, and Web apps. yarn add expo-dark-mode-switch && expo install react-native-svg npm install --save expo-dark-mode-switch && expo install react-native-svg Contributions, issues and feature requests are welcome!Feel free to check issues page.
https://github.com/EvanBacon/expo-dark-mode-switch

찾은 다크모들 토글 디자인 중에 가장 심플하면서 FLAT 하고 적당한 애니메이션 장난질을 할 수 있어서 골랐다.

실제 제작시에는 해당 컴포넌트를 사용해보려 한다.

그리고 그러면 결국 ReactJS를 써야하고, 티도리 프레임워크에 의존해야한다.

버린 디자인들

테마색

테마색 고른다고 고민을 많이 했다.

나무위키 그린어두운 초록색

<여기에 배경(라이트/다크) 위에 테마색 올린 형태의 이미지>

진짜 너무 모 유명 위키 사이트 꺼무위키 느낌이 나서 기각

하늘색

블로그색의 왕도라 함은 당연 푸른색 계열일 것이다. 그래서 너무 뻔한 느낌이라 고르지 않았다.

옅은 빨간색

얘는 최종 후보로 보라색과 경쟁하다가 너무 빨간 버튼이 많으면 오히려 부담스러울 것 같아서 포기했다. 여전히 다시 돌아갈까 고민하는 색이기도 하다.

계획

글 하단부 디자인만 보여주는건 아마 이쯤되면 감이 오겠지만... 윗부분은 아직 디자인하지 않았다...ㅋ...ㅋㅋ

짬짬이 시간 내서 빠르게 디자인하고 있는데 올해 안에는 블로그에 적용하고 싶다.

다음엔 문제의 글 상단부 디자인을 마무리하고 다른 페이지들 설계에도 들어갈 것이다.

  1. Marshall K 2020.10.25 09:32 신고

    보라 테마색 채도도 낮고 다크 테마에도 괜찮아 보이네요. 😁
    빨간색은 너무 !경고!같은 느낌이 나지 않을까요?

    + 공감 버튼 디자인 정말 별로지만, 티스토리 약관상 신고 버튼이 반드시 보여야 합니다. 올리신 디자인에 신고 버튼이 없어 괜히 불안하네요. 😅
    ++ '왜 넣었는지는 아래서 자세히 설명하겠다.' 에서 '아래'에 링크가 이상하게 걸려있습니다!

    • 감사합니다!
      말씀하신대로 붉은색은 너무 경고 느낌이 나서 그만뒀어요.
      신고버튼은 계속 둘 자리를 찾고 있습니다!
      링크는 빨리 수정해야겠네요😅


개요

거의 막바지 단계이던 Notion2Tistory 앱을 배포하느라 2달 뒤에야 이 프로젝트를 다시 잡았다.

디자인

중간에 예시 본문으로 넣은건 Notion 캡처본이다. 나중에 폰트부터 싹 다 뜯어고칠 예정이다.

Figma를 이용해 이런 느낌으로 디자인을 해봤다.

햄버거는 죽었다!!

전편에서 언급하지 않았던 이번 웹 디자인 프로젝트의 목표 중 하나는 햄버거를 쓰지 않는 것이다.

이유는 몇가지가 있는데, 내가 "햄버거 아이콘은 이젠 한물 갔다"라는 얘기에 낚인 것도 그중 하나다.

Why the Hamburger Navigation Icon is Dead | Creative MMS
The hamberger navigation menu helps visitors to your site find your pages, products or services but is this the right navigation for your mobile website?
https://creativemms.com/blog/why-the-hamburger-navigation-icon-is-dead/

당장 저 이미지 하나 구해오려고 구글링을 해도 이런 글이 나온다.

솔직히 죽었다! 라고까지 생각하진 않는데 웹디자인에 햄버거 메뉴 아이콘이 있으면 지루해보이는 것은 사실이다.

웹 디자인이 깔끔해지고, 어딜 가야 할지 모르겠는 것들을 전부 때려박을 수 있다는 장점이 있지만 그런건 처음부터 UI/UX 디자인을 잘한다면 해결될 문제 같다.

그래서 내 블로그 스킨에 햄버거 메뉴는 쓰지 않을 것이다.

글의 어디쯤인지 알 수 있게 하자.

나는 글을 좀 길게 쓰는 편이다.

나도 자각이 있을 정도로 무심코 글을 길게 써버리곤 한다.

그래서 나도 내 블로그를 보면서 대체 이 글의 끝이 어디인지, 이 페이지의 스크롤바 길이는 지금 읽고있는 이 글만 해당되는건지 아니면 아래 글이 더 있는건지 모르겠는 경우가 종종 있다.

그러므로 새로 디자인하는 블로그에서는

  1. 글은 한 페이지에 하나씩만 표시할것
  1. 목차를 옆에 표시하여 사용자가 볼 수 있게 할것

이 두가지 조건을 지키려 한다.

공감/공유 버튼을 최대한 노출하자.

Velog 블로그를 보고 느낀점이다.

글에 공감(❤️)하고 외부로 공유하는 행위는 최대한 많이 일어나는 것이 좋다.

그러니까 이 두 버튼은 글 아래에 고정하는 것보단 글 왼편의 남는 공간에 배치하기로 결정했다.

계획

다크모드...?

음... 이 느낌이 아닌 것 같은데...

다크모드 테마는 Notion에 맞춰보려 했는데 따로 찾아보는게 나으려나.. 헤더에 맞는 색을 찾기가 너무 어렵다. 일단 배경색과 같은 색으로 했는데 이것도 조금 아닌 것 같다.

다크모드는 아무래도 우선 화이트모드나 먼저 만들어보고 생각하는 것이 나을 것 같다.

색 고르는 재능이 없으니 좀 하다 보면 괜찮은게 보이지 않을까...?

  1. Marshall K 2020.10.25 12:32 신고

    이런저런 웹사이트 둘러보다 보면 '***는 죽었다'란 글이 굉장히 많이 보이는데, 햄버거는 처음 봐서 흥미롭네요. 덕분에 재밌는 글 읽었습니다.

    저는 제 개인적인 경험도 UI/UX 디자인에 많이 녹이는 편인데, 개인적으로 최근 댓글이 안 뜨면 답글 확인하기 정말 힘들어 꼭 넣어야지 싶은데 그걸 넣는 덴 드로어만한 게 없더라고요.
    저도 한번 PC에선 지워버리고 모바일에서만 표시하려 시도해봤으나, 자주 쓰진 않지만, 꼭 있어야 하는 기능들 넣느라 결국 실패했습니다. 😢
    나사 빠진 공돌이 님은 꼭 성공하시길...!

    • 감사합니다! 😁
      가능한 햄버거 없이 간단한 디자인으로 해보려 하고 있는데 이게 잘 될련지 모르겠네요. ㅎㅎ

Tistory 스킨 제작기 1편

글에 이미지가 너무 적어서 넣은 이미지 나름 테마 대표 이미지이다.

잡설

전에 뭔가 엄청 길게 Notion2Tistory 작업하다가 !important가 난무하는 기본 스킨에 빡돌았다는 글을 썼던 것 같은데 지저분해서 다 지워버렸다

티스토리 스킨을 만들어보자!

만드는 이유

이유를 가볍게 정리해보자면

  1. 기본 티스토리 스킨은 예쁘지 않다.
  1. 티스토리에 3단, 4단 카테고리 기능이 없다.

    (이것의 구현에 관한 프로젝트는 다른 프로젝트로 분리할 생각이다)

  1. 대부분의 티스토리 스킨에 있는 망할 사이드바가 보기 싫다. (나는 header파다)
  1. 나만의 스킨을 만들어보고 싶다. (순수 HTML/CSS/JS 위주의 개발(?)을 해보고 싶다)

계획

사용할 것들

프론트엔드 웹개발에는 자주 ReactJS를 써왔지만 동아리 홍보 홈페이지학교 홈페이지를 개발해보니 아직 React 같은 프레임워크가 나에게 잘 맞지 않는다는 걸 느꼈다.

그래서 이번 프로젝트에서는 티스토리 스킨 개발을 도와주는 Tidory 프레임워크만 사용한다.

티도리 프레임워크

티스토리 스킨 프레임워크, 티도리(TIDORY)
티도리 프레임워크는 티스토리 스킨을 제작하기 위한 전용 프레임워크입니다. 티스토리 스킨을 개발하기 위해 프레임워크까지 배워야 할까요? 우리가 기본적으로 티스토리 스킨을 개발할 때는 개발단계, 테스트 단계, 스킨적용 및 배포 단계 의 3단계를 거치게됩니다. 프레임워크는 각 단계에서 발생하는 여러가지 불편사항을 해결하기 위해 개발됩니다. 단계별로 발생하는 문제와 프레임워크에서의 해결 방법을 알아보겠습니다.
https://tidory.com/

티도리 프레임워크는 티스토리 스킨 제작을 도와주는 프레임워크이다.

티스토리의 "스킨 편집" 페이지를 사용하지 않고서 개발할 수 있으며,

tidory preview 명령어를 통해 스킨 적용 미리보기까지 할 수 있다. (심지어 실시간 리로드도 된다)

언어 : JavaScript + PUG + CSS

TypeScript와 SCSS도 고려를...해봤지만 어차피 프레임워크이고 잘 쓰지도 못하는걸 쓰느니 그냥 익숙한걸로 해보기로 했다.

출처 : https://www.youtube.com/watch?v=aNJqQZibrH0 정말 괜찮은 영상인데 조회수가 많이 낮다.

노마드 코더의 "초보 개발자 입니다. 중급단계로 넘어가도 되나요?"라는 영상에서 들었던 내가 아는 지식을 100% 활용하는 사이드프로젝트 해보기로서 이번 블로그 스킨을 제작해볼 것이다.

이거 하나를 만들고 나면 앞으로 JS 대신 TS를, CSS 대신 SCSS를 쓸 생각이다. (너무 편한 언어들...)

구현할 기능들

  • JS를 활용한 3중, 4중 카테고리

    (위에서 언급했지만, 이 스킨과 따로 분리된 프로젝트로 진행하는 것도 고려중이다. 다른 스킨에도 적용할 수 있을 것 같아서...)

  • 사이드바가 없는 디자인

    (나는 사이드바가 싫다. 헤더와 오버레이만으로 메뉴를 구성할 것이다)

  • 다크모드

    (솔직히 2020년대 사이트가 다크모드가 없으면...)

  • 티스토리 기능은 있지만 티스토리 블로그식 스타일이 없는 디자인

    좋아요나 공유등의 버튼들을 내 마음대로 커스텀하고 싶다.

개발시작!

...현 계획은 이걸로 끝이다.

  1. Marshall K 2020.10.19 16:32 신고

    예쁜 스킨 만드시길 응원합니다!
    이상하게 들어가야 하는 치환자가 꽤 있어 PUG 사용이 쉬울진 모르겠네요. 😭

+ Recent posts