[나만의 개발 블로그 만들기] #2. 디자인하기 (feat. Figma).

Lyle·2023년 5월 8일
3
post-thumbnail

블로그를 디자인하기 전 고민해야 할 것들.

개발 블로그를 직접 만드는 가장 큰 이유는 사실 디자인 때문이라고 생각한다. 내가 원하는 테마가 없거나, 기능이나 요소가 없거나, 혹은 나만의 개성을 드러내기 힘들다거나 하는 이야기들도 모두 크게 보면 디자인의 문제이다. 그러므로 나만의 개발 블로그를 만드는 데 있어서 디자인을 하는 것은 정말 중요한 단계이다.

그러나 무턱대고 디자인을 시작하면 매우 막막해진다.

그래서 본격적으로 디자인 툴을 사용하여 진짜 화면을 그리기에 앞서 고려해야 할 것을 정리해 보았다.

1. 대략 어떤 세부 기능을 가진 블로그를 만들 것인가?

개발 블로그가 가진 아주 최소한의 요소는 아래와 같다.

  1. 본인을 소개하는 공간 (사진, 이름, 소개 글, 이메일, Github 주소 등)
  2. 게시글 목록 및 상세
  3. 댓글 기능

하지만 개발자들이 자주 이용하는 보편적인 개발 블로그가 가진 요소는 이런 것들이 있다.

  1. 게시글 검색 기능
  2. 태그 달기 (Tagging)
  3. 시리즈 형식의 게시물 혹은 카테고리
  4. 추천 글 혹은 이전, 다음 글 표시

여기에 본인이 원하는 기능이나 요소를 추가하면 10개를 넘어갈 것이다. 그러므로 대략 어느 정도의 세부적인 기능을 가진 블로그를 만들 것인지 정해야 한다. 1번부터 7번까지 필수적인 요소라고 생각하는 순으로 정리를 해놓았으니 몇 번까지 구현해볼지 고민해보는 것도 좋다. 만약 어느 정도로 고도화된 블로그를 만들 것인지 고민이 된다면 직접 만들어진 다른 개발 블로그를 참고해보는 것도 매우 좋은 방법이다. (하단에 내가 디자인하며 참고한 블로그 목록을 정리해 두었다.)

2. 반응형, 다크모드 등의 요소를 고려할 것인가?

반응형과 다크모드, 개발자라면 당연히 구현해야 하는 것 아닌가? 라고 생각할 당신에게 이 두 가지가 생각보다 공수가 크다는 점을 상기시켜주고 싶다. 두 가지 모두 적용하는 순간 디자인해야 하는 화면의 수와 구현 시간이 배로 증가한다. 물론 본인의 숙련도에 따라 다르겠지만 나와 같은 주니어 개발자라면 필히 공수가 더 들 것이다. 그럼에도 불구하고 이 글을 읽는 모든 개발자가 반응형과 다크모드를 포기하지 않을 것임을 알고 있기에 이만 줄인다.

3. 모든 것을 내가 다 구현할 것인가?

개발 블로그를 만드는 것의 최종적인 목적은 결국 내가 만든 개발 블로그에서 글을 쓰는 것이다. 다시 한번, 쓰는 것이다. 물론 만드는 과정이 의미 없다는 것은 아니지만 시작만 하고 끝을 내지 못하면 의미가 다소 퇴색되는 것은 분명할 것이다. 그런 의미에서 남들이 만들어놓은 좋은 서비스를 가져다 쓰는 것은 개발 기간을 상당히 아껴줄 수 있다. 따라서 디자인에 앞서 어떤 부분을 외부 서비스로 대체할지 생각해 두는 것이 좋다. 나는 댓글 기능을 직접 구현하는 대신 Giscus 라는 서비스를 사용하기로 했다. 아이콘이나 상태 바 같은 컴포넌트는 Material UI를 사용하여 구현하기로 했다. 특히 Material UI의 경우 Figma에서 플러그인을 통해 디자인 시 손쉽게 사용할 수 있어 공수를 줄이는 데 많은 도움이 된다고 판단했다. 게시글 작성은 많이 고민한 부분 중 하나인데 Next.js를 지원한다는 Contentlayer 라는 라이브러리를 사용하기로 했다. 마크다운 형식의 글을 관리하기 편하다고 해서 살펴보게 되었는데 그냥 이런 종류의 라이브러리는 구조가 어떻게 되어 있을까 궁금해서 선택하게 되었다.

4. 나만의 특별함은 어떻게 드러낼 것인가?

이건 진짜 고민하기 나름인 것 같다. 나 같은 경우는 이전에 포트폴리오 페이지를 만들려고 디자인해둔 것을 발전시켜서 이번에 활용했다. 내가 만들고 싶은 것들을 마음대로 만들어 볼 수 있다는 점이 개발 블로그를 직접 만드는 것의 가장 큰 장점이 아닐까 싶다.

내가 블로그를 디자인한 과정.

1. 컨셉 정하기

컨셉이라는 모호한 용어를 사용하기는 했지만 결국 어떤 느낌의 블로그를 만들고 싶은지를 고민해보는 단계였다. 기본적으로 심플하고 깔끔한 느낌을 원했고, 나만의 공간임을 명확하게 나타낼 수 있도록 하는 것을 목표로 했다.

2. 디자인 툴 정하기

제목에서도 알 수 있듯이 디자인 툴로는 Figma를 선택했다. 이전에는 Adobe XD를 사용하곤 했었는데 이번에는 Figma를 사용하기로 했고, 그 이유는 다음과 같다.

  1. Adobe XD와 달리 많은 부분을 무료로 사용할 수 있다.
  2. 최근 주변 디자이너분들께서 대부분 Figma를 사용하셔서 익혀두면 협업하는데 좋으리라 생각했다.
  3. 나도 이미 Figma로 간단한 작업을 많이 해와서 익숙하다.
  4. UI가 직관적이어서 사용하기가 편하다.

기존에 파워포인트나 머릿속 그림판을 많이 활용했었다면 이번 기회에 Figma를 배워보는 것도 나쁘지 않을 것 같다.

3. 레퍼런스 찾기

레퍼런스를 찾는 것은 남들이 이미 고민했던 흔적을 살펴봄으로써 내 시간을 아끼는 행위라고 생각한다. 다른 사람의 개발 블로그를 보면서 이런 기능이 들어가면 더 좋을 것 같다거나, 혹은 여기에는 이런 버튼이 있는 게 더 편할 것 같다는 등의 추가적인 고민도 할 수 있게 된다. 나 같은 경우는 반응형을 구현해 본 경험이 없어서 다른 개발 블로그들의 창을 띄워놓고 창 크기를 이리저리 조절해가며 어떻게 컴포넌트의 모양과 위치가 변화하는지를 주로 참고했다. 디자인적인 측면에서도 내가 원하는 블로그의 모습을 조금 더 구체화할 수 있는 단계이니 꼭 거치고 가면 좋을 것 같다.

4. 빼먹기 쉬운 페이지, 요소 정리하기

나는 Figma 파일을 생성하면 상단에 커다란 네모 상자를 하나 그려놓고 그 안에 디자인하면서, 혹은 추후 개발할 때 빼먹지 말고 고려해야 할 점을 다 적어놓는 편이다. 이건 같이 근무하던 디자이너분이 작업하시는 걸 보고 따라 하게 된 것인데, 다른 곳에 적어놓는 것보다 훨씬 자주 보게 될 뿐만 아니라 디자인하면서 계속 참고할 수 있어서 좋은 것 같다.

보통 빼먹기 쉬운 페이지라고 하면 커스텀 에러 페이지 같은 것이 있다. Next.js 같은 경우는 자체적으로 에러 페이지를 제공하긴 하지만 보통은 본인의 블로그 디자인과 통일성 있는 모습의 에러 페이지를 원할 것이다. 나는 404, 500 에러에 대한 페이지만 디자인했다.

또한 Favicon도 빼먹으면 안 되는 요소 중 하나이다. Chrome을 다크모드로 사용할 경우까지 고려하여 밝은 배경에서도, 어두운 배경에서도 눈에 잘 띄는 Favicon을 만들기 위해 노력했다.

그 외에도 본인의 개발 블로그에 꼭 들어가야 하는 것이 무엇이 있는지 고민해보면 좋을 것 같다.

5. 욕심 버리기

욕심을 버리는 것은 정말 중요한 단계였다. 적어도 나에겐 그랬다. 내 마음대로 만드는 프로젝트라고 생각하니 이런 기능도 넣고 싶고, 저런 기능도 넣고 싶고, 심지어는 three.js도 잠깐이지만 고민했다. 그렇지만 내가 스스로 정한 마감일은 2023년 5월 31일이고, 마감일을 지키려면 뺄 건 빼고 욕심은 버려야 했다. 혹시 이 글을 읽고 계신다면, 한 번쯤 내가 너무 욕심부리고 있지 않나 고민해보는 것도 좋을 것이다.

6. 화면 그리기 (+ 반응형, 다크모드)

사실 1번부터 6번까지의 단계를 순서대로만 진행한 것은 아니다. 화면을 그리다가도 레퍼런스를 찾기도 하고, 그 과정에서 욕심을 버리고 다시 화면을 그리고, 갑자기 생각난 빼먹을 수도 있는 요소를 정리해두고 하는 일련의 과정을 일주일 동안 반복했다. 일주일이나 걸릴 양의 디자인은 아니었지만 다른 프로젝트도 병행하고 있기도 했고, 고민도 오래 한 터라 기존에 잡았던 일주일이라는 일정을 다 사용하게 되었다.

위에서도 언급했지만, 반응형과 다크모드를 고려하려니 그려야 할 화면이 2.5배 늘어나 있었다. 특히 반응형의 경우 화면이 작아지면 내가 원하는 뷰를 보여주지 못하는 경우가 많아서 고민을 많이 해야 했다.

남은 것은 진짜 빡구현!

이렇게 디자인이 완성되었다! 블러 처리한 것은 나중에 완성되면 공개하기 위해

개발 빨리 시작하고 싶은 마음 꾹 참고 있었는데 오늘부터 열심히 개발해보려고 한다. 한 달 동안 갈릴 나를 생각하니 벌써 신난다!

참고한 블로그.

정미량님 블로그
Lino Kim님 블로그
김평안님 블로그
이민성님 블로그
박찬영님 블로그

profile
:-)

1개의 댓글

comment-user-thumbnail
2023년 5월 8일

잘보고갑니다

답글 달기