[ 프로젝트 ] - 팀블로그 디자인 작업 프로세스

[ 프로젝트 ] - 팀블로그 디자인 작업 프로세스

2023. 2. 15. 16:48ㆍUX&UI

작성자ㆍ알 수 없는 사용자

728x90

안녕하세요. 기깔나는 사람들에서 디자인을 맡고있는 서네입니다.

오늘은 팀블로그 디자인 작업 과정을 보여드리려고 합니다!

1 - 레퍼런스 찾기

우선 디자인 작업 전에 참고할 사이트를 리서치 및 분석했습니다.

타사 기술블로그 위주로 찾아보던 중

구글링으로 [TechBlogPosts]라는 사이트를 발견했습니다.

개발 관련한 기업 기술블로그들을 한 곳에서 모아 볼 수 있었습니다.

여기서 제가 기획/디자인을 주로 참고한 사이트는 아래 4개의 사이트 입니다.

타사 블로그 메인페이지 보여주고 있는 UI가 무엇인지, 게시글 컨텐츠 안에 들어가는 내용은 무엇인지,

그리고 게시물 폰트크기, 비쥬얼 배너 내용까지 디테일하게 확인해봤습니다.

[ 레퍼런스 후 정리한 내용,생각 ]

- 게시물을 카드형식으로 보여주자, 특히 타이틀은 사이즈를 크게하여 가독성 있게

- 크루 모집공고로 연결되는 btn을 만들어보자
- 네이버 기술블로그를 참고해서 배너로 우리 블로그 비쥬얼을 만들어보자 (시안2버전으로)
- 과하지 않고 심플하게

- 썸네일 / 제목만으로 이목을 끌 수 있게 만들어보자

조금 더 요약하자면 아래 내용과 같습니다.

1. 배너를 통해 브랜드 아이덴티티를 보여주자

2. 게시물은 클릭하고 싶도록, 깔끔하고 가독성 있게

3. 전반적으로 심플한 레이아웃

정리를 마치고 본격적으로 피그마를 통해 시안 2종 작업을 시작했습니다.

2 - 시안 작업

시안1 > 게시글 중심

시안2 > 메인 - 브랜드이미지 / 서브 - 태그+게시글

[피드백 내용]

1. 사이드바 형식으로 카테고리가 구성되었으면 좋겠다.

2. 글작성 UI가 사이드바에 있었으면 좋겠다.

3. 배너를 활용한 시안이 좋다.

피드백을 취합하여 시안3을 다시 작업했습니다.

3 - 시안 수정

시안2의 배너는 기존대로 유지하고, 게시글을 세로형 카드UI로 변경했습니다.

사이드바에 카테고리가 버튼형식으로 활성화 / 비활성화가 명확하게 보여지게 수정하였습니다.

컨펌 후, [티스토리 > html편집] 작업할 때에는 제시Ca님과 함께 (거의.. 대부분을) 작업을 해주셨습니다!

그러나 작업 중 몇가지 이슈가 발생했습니다.

하위카테고리를 만들어야한다는 것, 그리고 게시글 제목이 보이기까지의 비쥬얼 영역 높이가 높다는 것,

그리고 글작성 플로팅 버튼의 배치가 편리한지까지 한번 더 고민하는 시간을 가졌습니다.

이부분을 해결하기 위한 진짜정말최종의최종 시안을 작업했습니다.

4 - 최종_진짜_정말_파이널.figma

[ 변경사항 ]

1. 배너높이, 사이드바 너비를 줄여서 컨텐츠 영역이 넓어지도록 변경

2. 카테고리를 버튼형식에서 텍스트 자체로 리스트되는 형식으로 변경

3. 게시물 컨테이너 안의 태그 칩 삭제

4. 글작성 기능을 사이드바에 함께 배치

+ 새글아이콘(N)의 경우 디자인 이미지 변경이 불가하여, 꾸미기 관리에서 보이지 않도록 none처리

위와 같은 과정을 거쳐, 현재의 팀블로그가 완성되었습니다!😄

아래부터는 개인적으로 티스토리 html편집기,css를 다루어보면서 배운 점을 간략하게 기록해보았습니다.

5 - 퍼블리싱 관련 배운 것들

01 - 마우스 오버시 뜨는 효과

transition - 속성을 서서히 변화시키는 태그

transform - 모양,크기,위치들을 변형하는 태그

( cursor - 마우스 모양 변경 )

 transform: translateY(-10px);
 transition: all 0.3s ease-out;
 cursor: pointer;

> 적용해주었는데 마우스를 때는 순간 뚝 끊기는 느낌으로 돌아가서

디자인이 적용된 css 안에 transition효과를 동일하게 사용해주었더니

부드럽게 모션을 적용시킬 수 있었습니다.

02 - 말줄임표(엘립시스) - 한줄일때

text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;

> width값이 지정된 상태에서 css에 추가해주면 끝!

03 - 시멘틱태그

한번 두번 들어 봤다가, 이번에 이해하고 넘어가고자 기록합니다..!

<header> - 헤더, 웹사이트 상단

<nav> - 네비게이션 링크, 메뉴,목차 등

<section>,<article> - 콘텐츠 영역

<aside> - 사이드바, 메인내용에 영향을 미치지 않는 내용

<footer> - 푸터, 웹사이트 하단

div로만 html을 작업해도, 결과물은 같을 수 있으나 시멘틱태그를 이용하면

어느 부분을 작업했는지 알기 쉽고, 검색기능을 사용할 때에 사이트 내용을

태그로 나누어 보여주기 때문에 더 정확한 결과값을 얻을 수 있다고 합니다!

이상으로 기술블로그 디자인 작업 프로세스 글을 마치겠습니다!

참고자료

테크블로그포스트 🔗 - https://techblogposts.com/

토스블로그 🔗 - https://toss.tech/design

카카오블로그 🔗- https://tech.kakao.com/blog/

네이버블로그 🔗- https://d2.naver.com/home

우아한형제들블로그 🔗- https://techblog.woowahan.com/

시멘틱태그 블로그 🔗- https://iridescent-zeal.tistory.com/113

말줄임표 블로그 🔗- https://velog.io/@syoung125/CSS-text-overflow-ellipsis-두줄-이상-처리