velog, tistory와 같은 블로그를 사용하지 않고 도메인까지 구매하여 직접 블로그를 만든 이유 중 하나는 원하는 컨텐츠를 만들고 업데이트하고 싶어서였어요. 최근 다음 업데이트로는 어떤 기능을 넣을까 고민 중이었는데 갤러리를 제작하고 싶어졌고 그에 따른 개발 일기를 적어보려고합니다.

 

## 📝 갤러리 메인 페이지 기획과 디자인하기

처음에는 인스타그램과 같은 SNS 형식의 디자인과 핀터레스트와 같은 이미지 위주의 디자인 중에서 고민을 했었고 메인 페이지는 핀터레스트의 UI / UX를 참고하여 구현하고, 세부 페이지는 SNS 처럼 UI / UX 를 구현하기로 했습니다.

 

>1차 기획ㆍ디자인

![](https://imagedelivery.net/R2WiK4wfRK3oBXTwjgzQfA/382a9913-02bd-4ff3-c101-61282d973e00/public)

메인 화면에서 보여줄 데이터는 사진, 제목, 작성 날자, 댓글 수 정도로 고려했으며 데이터는 인피니티 스크롤을 이용하여 불러오는 것으로 기획했습니다.
 
1차 디자인을 완료하고 문제점을 발견했는데 저는 사진을 찍을 때 가로가 긴 사진을 주로 찍는데 세로로 긴 방식의 이미지 UI를 사용하면 이미지가 어색할 수 있다는 생각이 들었어요. 그래서 수정했습니다.

 

> 2차 기획ㆍ디자인

![](https://imagedelivery.net/R2WiK4wfRK3oBXTwjgzQfA/3cc5fbd2-9034-422b-a37e-0bc71397f300/public)

한 줄에 두개의 이미지만 보여주도록하여 가로가 긴 이미지들이 어색하지 않게 보일 수 있도록 수정했어요.
조금 더 심플해지고 눈에 잘 들어오는 것 같아서 만족스럽습니다.

 
 

## 📝 갤러리 세부 페이지 기획과 디자인하기
![](https://imagedelivery.net/R2WiK4wfRK3oBXTwjgzQfA/411c91d2-2eb2-44cd-e7c3-2789338a3700/public)

세부페이지는 블로그의 포스트 UI / UX를 최대한 통일하여 사용하려고 했어요.
포스트와 공통적으로 사용할 수 있는 댓글 기능은 공통 컴포넌트로 분리하여 재사용 할 수 있도록 할 계획이며 넓은 모니터로 봐도 가독성이 좋을 수 있도록 메인 화면에서 사용하던 1300px 넓이의 컨테이너를 800px로 줄였습니다.

velog, tistory와 같은 블로그를 사용하지 않고 도메인까지 구매하여 직접 블로그를 만든 이유 중 하나는 원하는 컨텐츠를 만들고 업데이트하고 싶어서였어요. 최근 다음 업데이트로는 어떤 기능을 넣을까 고민 중이었는데 갤러리를 제작하고 싶어졌고 그에 따른 개발 일기

[갤러리 만들기 #1] 메인 페이지, 세부 페이지를 디자인해보자