%2520%25ED%2594%2584%25EB%25A1%259C%25EC%25A0%259D%25ED%258A%25B8%2520%25EB%2594%2594%25EC%259E%2590%25EC%259D%25B8%26logoUrl%3Dhttps%253A%252F%252Finblog.ai%252Finblog_logo.png%26blogTitle%3Dtest123&w=3840&q=75){kind=logo}
대학교 2학년 1학기가 끝나고 방학동안 큰 프로젝트 2개를 하게 되었다. 해당 프로젝트의 개발을 시작하기까지 조금 시간이 남아서 워밍업을 하고 싶은 마음에 예전부터 해와야지 했던 개인 블로그 프로젝트를 진행하려고 한다.
xd로 먼저 대략적인 디자인을 해야겠다고 생각해서 xd를 켜서 바로 디자인에 들어갔다. 예전부터 나만의 사이트 이름을 만들어보고 싶다는 생각이 있었는데 이번 기회에 만들고자 했다.
내 이름의 영어 이니셜인 hms를 가지고 고민한 결과 hm..ms라고 하기로 했다. 몬가 흠.. 이런 항상 고민하는 이미지를 담을 수도 있는 이름 같아서 나름 마음에 들었고 해당 이름을 로고 형식으로 만들고 싶어서 ppt(포토샵 못해서..ㅎ)를 켜서 만들었더니 아래와 같은 결과물이 나왔다.
나름 로고는 진짜 마음에 들었다. 그렇게 디자인을 시작했고, 내가 좋아하는 개발자인 velopert의 velog 라는 블로그 사이트를 참고하여 디자인을 했다. 물론 나만의 사이트인만큼 내가 좋아하는 색상과 박스 디자인 등을 만들었다.
메인 페이지 디자인은 다음과 같다. 메뉴는 카테고리와 나에 대한 소개 페이지가 보여질 수 있도록 2개의 메뉴를 만들었다. 또한 글들이 최신순과 인기순으로 나눠서 정렬하여 볼 수 있는 버튼과 검색할 수 있도록 검색창도 넣었다.
박스는 처음에 썸네일 사진만 보여지도록 하고 해당 박스 위에 마우스를 올려 놓았을 때 다음과 같이 글의 제목, 글의 일부, 업로드 날짜, 댓글 수, 좋아요 수 등의 정보가 나오도록 디자인을 했다. 이런 디자인을 하면 처음에 썸네일만 보고 어떤 내용인지 파악하기 힘들지 않을까 하는 생각도 했지만 이 사이트는 내가 쓴 글만 올라가기 때문에 내가 직접 매번 내용과 관련된 썸네일을 ppt 혹은 미리캔버스로 만들 것이기 때문에 괜찮다고 판단했다.
카테고리를 눌렀을 때에는 다음과 같이 전체 페이지를 덮는 팝업창이 나와 카테고리를 선택할 수 있게 디자인을 했다.
AboutMe를 눌렀을 때에는 어떤 페이지가 나올지는 마지막에 만들 것이기 때문에 나중에 생각하려고 한다. 워밍업인 만큼 큰 기능과 해당 디자인에 맞게 프론트를 구현하는 것에 집중하려고 한다.
다음에는 대략적인 db 구조는 어떻게 해야하는지와 api 명세서를 작성해 볼 것이다.
Share article