Home 잉여 프로젝트 개발 일지 - 2
포스트
취소

잉여 프로젝트 개발 일지 - 2

By Veldic
게시 02월 08일 업데이트 03월 16일 16 분

게시판 Feature 정리

게시판을 만들기 전 가장 먼저 진행해야 했던 것은 게시판을 어떻게 사용할지이다. 가장 먼저 참고했던 것은 네이버 카페 게시판이었다. 네이버 카페 게시판은 유머 게시판, 자유 게시판, 사진 게시판 등 각각의 용도에 따라 나누어져 있었고 수많은 사람들이 그 곳에 글을 게시한다. 하지만 많아봤자 6~7명이 사용할 이 홈페이지를 게시판 종류까지 구분해가면서 만들 필요는 없을 것 같았다. 그렇다고 무작정 아무런 정리도 하지 않은 채 한 게시판에 모든 글을 모아두자니 정신없는 홈페이지가 완성될 것 같았다. 이 과정에서 떠올렸던 간단한 방법이 바로 태그 형식이었다. 어차피 수백 명이 사용할 게시판이 아니니, 주제별로 분리를 하기 보다는 각자가 올리는 글의 태그를 걸 수 있도록 해서 한 데 모아놓는다. 그 와중에 한 태그를 보고 싶다면 필터링을 통해서 진행하면 될 것이었다.

이 아이디어를 바탕으로 게시판이 가져야 할 feature를 정리했다.

  • 게시판 (board)
    • 게시글 리스트 (board/main)
      • 게시글 (thread)
        • 이미지 존재 여부 (대부분의 커뮤니티에 존재하길래 추가했다.) (is_image)
        • 제목 (title)
        • 글쓴이 (author)
        • 작성 시간 (created_at)
        • 태그 (tag)
      • 필터링 (filter)
        • 한 번에 볼 개수 (num_at_once)
        • 검색 (제목, 내용, 닉네임) (검색어 - query, 설정 - option)
        • 태그 (tag)

feature 정리를 진행하며 중요하게 여겼던 점은 바로 한글 - 영어 네이밍이다. 한국어를 모국어로 가지고 있는 만큼 아이디어 브레인스토밍부터 시작해서 feature 정리 및 개발 시 각 요소의 인지 등 모든 것들이 머리 속에서는 한국어로 이루어진다. 하지만 개발은 다르다. 프로그래밍 언어로 작업하는 도중에는 주석을 제외하고는 압도적으로 영어의 사용이 많다.

따라서 한글로 모든 요소들을 정리해놓고 무작정 개발을 시작해버린다면 차후에 영어가 꼬이게 될 가능성이 생긴다. 현재는 1인 개발로 진행하고 있지만 이후 입대를 하게 된다면 다른 친구에게 유지보수를 넘기고 갈 것인데 그 친구가 생각하는 한글 - 영어 네이밍이 내가 생각한 것과 일치하지 않는다면 혼선이 생길 가능성이 높다.

기존 개발 경험에서 리뷰(review)의 작성자를 영어로 어떻게 부를 것인지를 확실하게 정해놓지 않아서 author과 writer 사이에서 혼선이 빚어졌었다. 또한 ‘사진이나 그림’의 명칭을 명확하게 정해놓지 않아 picture과 image 사이에서 또 한 번 혼선이 빚어졌었다. 이러한 혼란을 막기 위해 이번 개발에서는 처음부터 한글-영어 네이밍을 통일시키고 가려고 한다.

이후 정리한 feature을 바탕으로 디자인을 작업했다.

Untitled

1차적인 정리가 된 후 게시판에 필요한 다른 요소들을 정리했다. 게시판만 있어서는 아무것도 할 수 없다. 글 쓰기와 글 상세보기도 있어야 한다. 관련 내용들을 모두 포함한 게시판 feature는 다음과 같다.

  • 게시판 (board)
    • 게시글 리스트 (board/main)
      • 게시글 (thread)
        • 이미지 존재 여부 (is_image)
        • 제목 (title)
        • 글쓴이 (writer)
        • 작성 시간 (created_at)
        • 태그 (tag)
      • 필터링 (filter)
        • 한 번에 볼 개수 (num_at_once)
        • 검색 (제목, 내용, 닉네임) (검색어 - query, 설정 - option)
        • 태그 (tag)
    • 글 쓰기 (board/write)
      • 제목 (title)
      • 태그 (tag)
      • 본문 (content)
    • 게시글 상세보기 (board/detail)
      • 제목 (title)
      • 태그 (tag)
      • 작성자 (writer)
      • 본문 (content)
      • 댓글 (comment)
        • 작성자 (writer)
        • 본문 (content)

Frontend 개발

Vue를 사용해보자

기존에 학교 수업인 ‘소프트웨어 개발의 원리 및 실습’에서 사용했던 frontend framework는 react였다. 하지만 갑자기 무슨 바람이 불었는지 이미 아는 것으로 구현만 하는 것 보다는 새로운 것을 공부하면서 해보고 싶다는 생각에 react를 이용하지 않고 frontend 개발을 하고 싶어졌다. 물론 react를 한다고 새로운 것을 공부하지 못하는 것은 아니지만 이미 한 번 개발을 해보았던 라이브러리이고 그렇다면 기본적인 틀을 짜는 방식은 옛날에 한 번 해보았던 지겨운 과정임이 분명하기 때문이다.

그래서 선택한 것이 바로 Vue이다. 친구가 회사에 인턴으로 일하면서 Vue를 쓴다길래 잠깐 찾아보았었는데 생각보다 간단해보여서 Vue를 한 번 시도해볼까? 라는 생각을 했던 것이 이어져와서 다른 프레임워크나 라이브러리보다 먼저 생각났다. 그래서 그냥 선택해보았다.

큰 틀은 비슷했다. 어차피 npm으로 관리를 할 것이고 라우팅이나 상태 관리도 react와 큰 다를 바가 없었다. Redux는 Vuex로, react-router는 vue-router로 바꿔서 이용할 수 있었다. (개인적으로는 Redux보다 Vuex가 좀 더 직관적이라는 생각이 들었다.)

이런 structure적인 부분에서는 큰 변화가 없었는데 세부 구현에 있어서 꽤나 매력적인 부분이 있었다. 특히 html, js, css 소스를 .vue로 묶어서 한 곳에서 관리한다거나 html 소스 내에서 v-on, v-bind 와 같은 vue 만의 방식으로 feature를 구현하는 것에 있어서 익숙해진다면 생산성이 올라갈 요소들이 분명히 있었다.

개발하기

백문이 불여일견, 일단 사용해보기로 했다. 목표는 게시판까지의 완성이었지만 Vue가 처음이기도 하고 게시판이 작동하려면 여러 다른 feature들도 완성이 되어야해서 이번 개발일지에서 게시판의 완성은 불가능 할 것 같다.

NavBar라고 부르는지 Header라고 부르는지는 모르겠으나 일단 NavBar가 익숙하니까 NavBar을 사용했다. NavBar가 가져야하는 기능은 다음과 같았다.

  • 좌측 SideBar 열고 닫기
  • 중심에 로고 클릭 시 메인 화면 가기
  • 우측 로그인/username (로그인 여부에 따라 갈림) 클릭 시 적절한 화면 가기
  • 상단 고정 (하지만 스크롤 시 fade out)
1
2
3
4
5

<div id="nav-bar" :class="{ deactivated: hideNavBar }">
  <img id="menu-sidebar" src="../../assets/menu-burger.svg"/>
  <img id="menu-logo" src="../../assets/logo.png" @click="$router.push('/')"/>
  <span id="menu-user-data" :class="{ deactivated: hideNavBar }" @click="onUserClick"></span>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

export default {
  name: 'Header',
  data() {
    return {
      hideNavBar: false, // nav-bar 숨길지 여부
      isLoggedIn: false, // 로그인 여부
      userDataString: '', // 유저 데이터 위치에 보여줄 내용
    }
  },
  mounted() {
    window.addEventListener('scroll', this.onScrollListener); // 스크롤 감지 listener 추가
    if (!this.isLoggedIn) {
      this.userDataString = '로그인';
    } else {
      // TODO : user data 있을 시 username display
    }
  },
  methods: {
    onScrollListener() { // nav-bar 사이즈만큼 스크롤 되면 nav-bar 숨김
      if( window.scrollY < 60 ) this.hideNavBar = false; // 60px이 상단 바 사이즈
      else this.hideNavBar = true;
    },
    onUserClick() {
      if ( !this.isLoggedIn ) {
        this.$router.push('/login');
      } else {
        // TODO : user data 있을 시 mypage 혹은 추가 창 띄우기
      }
    }
  },
}

아직 추가될 내용들이 많아서 여러 부분들이 TODO로 남아있다. 이후 css 작업을 통해 적절한 곳에 배치 및 여러 상호작용을 추가했더니 fade in/out 되는 NavBar가 만들어졌다.

Main 화면 만들기

Untitled

Main 화면은 추후 추가될 내용이 많았기 때문에 상단에 가로로 긴 대문만 만들어 놓기로 했다. (빨간 줄은 디자인 상 grid를 나누어 놓은 것이다.) 근데 여기서 약간의 고민이 발생했다. 디자인 공부를 하면서 양측 여백을 준 상태로 중간에 내용을 담아야 좋다는 것이다. 여기서 매 page를 만들 때마다 html css를 작업해가면서 양측 여백을 주는 것이 아니라 container을 만들어서 알아서 양측 여백을 만들어주고, 우리는 단순히 width 100%로 가운데에서 작업할 수 있도록 하고 싶었다. (그냥 page를 일괄적으로 감싸면 되지 않겠냐고 말할수도 있겠지만 main화면을 보다시피 이미지가 화면을 꽉 채우게 만들고 싶었기도 하고 추후에 어떤 요소들이 양측 여백을 무시한채로 디자인될 지 모르기 때문에 쉽게 세팅할 수 있는 요소를 만들고 싶었다.)

방법은 의외로 간단했다. Vue에서 지원하는 slot 기능을 이용하여 쉽게 만들 수 있었다.

1
2
3
4
5
6
7

<div class="grid-container">
  <div></div>
  <div>
    <slot></slot>
  </div>
  <div></div>
</div>

이렇게 grid-container class를 디자인하고

1
2
3
4

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1080px 1fr;
}

이렇게 css 요소를 넣어서 내용이 들어갈 사이즈를 1080px로 정한 뒤, 양 옆에 div로 대표되는 여백을 주면 된다.

이후 다른 곳에서 GridContainer.vue를 import하고

1
2
3
4
5

<grid-container>
  <div>
    <!-- whatever you want -->
  </div>
</grid-container>

<grid-container> 태그 사이에 원하는 내용을 집어넣으면 된다.

어디까지나 vue 공식 문서와 내 개인적인 직관에 따라서 만들게 된 container라 더 좋은 방법이 분명 있을 것이다. 하지만 어디 제출하는 것도 아니고 원하는 기능이 구현되었으니 일단 계속 사용할 것 같다.

반응형 웹 만들기

Untitled

친구와의 대화에서 모바일로 볼 애들이 더 많다는 이야기를 한 뒤, 반응형에 대한 고민을 진행했다. 안드로이드 개발 지식도 있던 터라 그냥 PC 버전만 만들어 놓고 모바일은 안드로이드 앱을 빠르게 만들어서 할까 고민하다가 그냥 모바일 버전도 지원을 해야겠다 싶었다.

이에 대한 대응은 여러 방식을 쓰기보다는 미디어 쿼리로 768px을 기준으로 나누기로 했다.

1
2
3
4
5
6
7
8

@media (max-width: 768px) {
  #wallpaper {
    padding-top: 40%;
  }
  #main-title {
    font-size: 40px;
  }
}

마치며

게시판을 완성하고자 했었는데 router, vuex 와 같은 structure 적인 요소들과 NavBar, Main 화면과 같은 feature 적인 요소들을 구현하는데 시간을 많이 써서 일단은 두 번째 개발일지는 이쯤에서 마치려고 한다.

vue-router는 react-router보다 개인적인 입장에선 훨씬 깔끔했다. 특히 <router-view> 라는 tag를 이용하여 굉장히 직관적으로 App의 구조를 파악할 수 있다는 점이 마음에 들었다.

vuex는 redux와 형태가 좀 달라서 초반 세팅을 하는데 있어서 조금 애를 먹었다. 전체적인 data flow는 비슷하나, 그 data flow를 다루는 방식이 js로 다룬다기보다는 vue로 다룬다는 느낌이 많이 들었다.

project
ingyeo project
이 게시물은 저작권자의 CC BY 4.0 라이센스를 따릅니다.
최근 업데이트
바로가기