본격적으로 동아리 홍보 및 게시판 기능을 갖춘 홈페이지 제작을 시작해보려고 한다. 그 과정에서 첫 번째로 전체적인 홈페이지 메인화면의 Layout을 구성해보고 메인화면에서 나타날 Navigation Bar까지 제작하는 내용을 담아보고자 한다.

메인 페이지 Layout 구성

홈페이지를 접속했을 때 가장 먼저 나타나는 메인 페이지는 동아리 소개에 대한 내용이 가장 중요할 것이라고 생각한다. 따라서 동아리를 소개하는 과정에서 가장 중요한 동아리에서 진행하는 활동 소개, 프로젝트 소개 등을 진행하면 될 것으로 생각한다. 그래서 다른 홈페이지들의 구성을 참고하고, VESS라는 동아리를 소개할 때 필요한 내용이 무엇이 있을지 고려한 결과 아래와 같은 목록으로 구성하기로 하였다

메인 페이지 구성 내용

• NavBar : 상단에 각각의 항목들에 대한 Navigation Bar
• Home 화면 : 메인 페이지에 처음 접속했을 때 확인 가능한 화면 (이미지 사용)
• About Us : 동아리의 간단한 연혁, 추구하는 방향성 등 전체적인 소개
• What We Do : 동아리 활동에 대한 구체적인 소개 (팀프로젝트, 해커톤/홈커밍, 고교 적정기술 강연, 친목 활동)과 지난 기수의 활동들 소개
• Q&A : 동아리의 활동 및 입부와 관련된 질의응답
• Contact : 연락 방법

따라서 해당 내용을 바탕으로 진행할 계획이고 구성은 아래 그림과 같이 각각의 내용들을 나열하여 사용자가 스크롤하면서 내용을 확인할 수 있게 하는 방식이다.

NavBar 제작

위와 같이 메인 페이지의 Layout을 정하였으니 본격적인 Navigation Bar(이하 통칭 NavBar)을 먼저 제작해보고자 한다. NavBar은 기본적으로 페이지 내부의 항목들을 차례로 나열하여 구성되므로 메인 페이지의 5개 항목들을 차례로 나열할 것이다. 코드는 HTML의 nav태그와 link 태그를 이용해서 작성할 것이다. 기본적인 코드 형태는 아래와 같다.

구현 방법

<header>
  <nav>
  	<Link href='#home'>Home</Link>
  </nav>
</header>

nav와 Next.js에서 제공하는 Link 태그를 이용하여 구현하였다. nav 태그를 이용해 글자를 클릭하면 동일한 id를 가지고 있는 곳으로 이동하게 될 것이며, 앞으로 작성할 각각의 항목들에 해당 id를 작성하면 될 것이다. 디자인적 요소를 위해 tailwind를 이용한 다양한 디자인적 class들을 항목에 추가하였고, 이 과정에서 nav 태그에서 사용하는 Link를 CustomLink로 변경하여 사용하였다. (중복되는 class 등을 한번에 작성하기 위함)

const CustomLink = ({href, title, pos, className=""}) => {
    
    return(
        <Link href={href} className={`${className}`}>
            {title}
        </Link>
    )
}

추가적으로 NavBar의 Position은 Fixed를 사용하여 항상 화면의 상단에 고정될 수 있도록 하였다.

구현 결과

구현을 통해 최종 완성 NavBar은 아래와 같다.

이후에 추가적으로 Mobile 환경에서의 NavBar를 구현할 것이며 현재 연속되지 않은 형태로 페이지가 아래로 이동하는 현상을 수정하고, 위의 NavBar의 버튼 클릭시 애니메이션을 통해 부드럽게 스크롤 되는 기능을 구현할 것이다.