[ 프로젝트 ] - 팀블로그 디자인 작업 프로세스
안녕하세요. 기깔나는 사람들에서 디자인을 맡고있는 서네입니다.
오늘은 팀블로그 디자인 작업 과정을 보여드리려고 합니다!
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-두줄-이상-처리
