앞서 구성한 Layout에 맞추어 메인페이지의 파트 2가지를 구현하는 과정을 작성해보고자 한다. 메인페이지 방문시 나타나는 Home 화면과 동아리에 대한 정보를 간단하게 소개하는 About 화면이다.
Home 파트 구현
배경 이미지 제작
메인 페이지에 처음 접속하면 앞서 구현한 NavBar와 함께 Home 화면이 나타나게 된다. 일반적으로 해당 화면에서는 동아리 활동한 사진들이 하나씩 슬라이드 되거나 동아리 단체 사진들을 넣는 것이 일반적이지만, 해당 사진들은 동아리 홍보 목적으로 사용하는 인스타그램에도 업로드가 되며 너무 딱딱한 분위기를 연출할 것으로 예상하여 다른 사진을 사용하기로 결정하였다.
여러 홈페이지와 자료들을 찾아보면서 저작권이 없는 사진들도 찾아보았지만, 최종적으로 결정한 것은 비교적 깔끔한 기하학적 이미지를 이용하는 것이었다. 따라서 이미지를 아래 사이트에서 직접 제작하였다. (동아리의 상징 컬러가 파란색이라 파란색을 바탕으로 사진을 디자인하였다.)
https://cojdev.github.io/lowpoly/
Home 화면 추가 항목 구현
이제 위 사진을 바탕으로 Home 화면을 구현할 차례이다. 먼저 해당 사진을 Project의 public 폴더에 저장하였고, 저 사진 위에 텍스트와 링크들이 추가될 예정이기 때문에 해당 사진을 일반적인 이미지가 아닌, backgroundImage로 설정하여 진행하였다.
Next.js Background Image 사용 방법
이 과정에서 Next.js에서 제공하는 Image 태그와 달라 발생한 혼동이 있었다. Next.js의 Image 태그에서는 기본적으로 특정 경로의 이미지를 import 한 이후에 src 항목에 import한 항목을 작성한다.
그러나 Background Image 같은 경우 이러한 import 방식이 적용되지 않는다. 아래와 같이 url 내부에 직접 이미지의 경로와 이름을 입력하여 style에 저장하여 사진을 지정할 수 있다.
(뒤 항목은 각각 사진 반복 제거, 크기를 최대한 크게 맞추기, 중앙 배치 하는 역할을 수행한다.)
<div>
<section id="home"
style={{backgroundImage:'url("/lowpoly.png")',
backgroundRepeat:"no-repeat",
backgroundSize:"cover",
backgroundPosition:"center"
}}>
</section>
</div>텍스트 및 링크 추가
배경화면 위에 나타날 텍스트와 링크를 추가하였다. 먼저 동아리 이름과 약자에 대한 설명을 텍스트로 작성하고, 로그인 버튼과 회원 가입 버튼 2개를 제작하였다. 회원 가입의 경우 누를 경우 리크루팅 시 동아리 지원서를 받는 Google Form으로 이동하게 되고, 로그인 버튼은 현재는 기능 없이 둘 예정이다. (이후 순차적으로 구현)
텍스트의 경우 메인 페이지에서는 기본 폰트가 아닌 다른 폰트를 사용할 예정이다. 그러나 이전과 다르게 해당 폰트는 Next.js에서 연동 가능한 Google Font의 종류에 해당되지 않아 직접 따로 import 하였다. globals.css에서 폰트 url을 이용해 직접 import 해오고, 폰트를 적용할 class를 정의하여 사용하는 방식을 이용하였다.
@import url('https://fonts.googleapis.com/css2?family=Patua+One&display=swap');
.pauta{
font-family: 'Patua One', cursive;
}위 폰트와 텍스트를 적용시키고, 링크를 추가한 코드와 결과는 아래와 같다.
<div>
<section id="home"
style={{backgroundImage:'url("/lowpoly.png")',
backgroundRepeat:"no-repeat",
backgroundSize:"cover",
backgroundPosition:"center"
}}>
<h1 className={'pauta'}>V E S S </h1>
<h2 className={'pauta'}>Volunteering Engineers & Scientists of SNU</h2>
<div>
<a href='/'>Log In</a>
<a href={GoogleForm_URL}>SIGN IN</a>
</div>
</section>
</div>
About 파트 구현
About 파트는 비교적 간단하게 구현할 수 있다. 먼저 해당 파트임을 나타내는 섹션 제목을 작성하고, 동아리 로고 2개를 차례로 넣은 뒤, 설명을 차례로 나열하는 방식으로 페이지를 제작하였다.
Section 제목 및 라인
먼저 섹션 제목과, 그 아래 밑줄과 같은 형태로 놓일 섹션 라인은 앞으로 모든 파트에서 동일하게 사용될 예정이기 때문에 각각의 css 속성을 section_title과 section_line의 이름의 class로 정의하여 global.css에 저장하였다.
<h1 className='section_title'>About Us</h1>
<span className="section_line"> </span>이미지 삽입
이미지의 경우 앞서 사용한 배경 이미지와 다르게 이번에는 Image 태그를 이용하였다. 두 종류의 이미지를 public 폴더에 저장하고, import 한 뒤, Image 태그로 나타냈다. 두 이미지의 크기 차이가 있어 비슷한 크기로 나타내기 위해 하나는 150px, 하나는 120px로 설정하였다.
<div>
<Image src={logo1} height={150}/>
<Image src={logo2} height={120} width={120}/>
</div>추가적으로 이미지에 마우스를 올렸을 때 간단한 애니메이션을 사용하로 하였다. 마우스를 올릴 경우 반시계 방향으로 회전하는 애니메이션을 위해 다음과 같은 tailwind css를 추가하였다.
transition-all /* 모든 속성에 효과 적용 */
ease-in-out /* 부드러운 이미지 전환 */
duration-200 /* 이미지 전환 시간 설정 (200ms) */
hover:-rotate-6 /* 마우스 hover 시 반시계 회전 정도 설정 */내용 작성
내용 작성은 일반적인 텍스트 작성과 동일한 방식을 이용하였다. 문단을 작성할 때 사용하는 p 태그를 이용하고자 하였지만, 중간에 강조하고자 하는 내용을 작성할 때 strong 태그와 같은 것이 비교적 강조 효과가 약해 새롭게 div 태그를 통해 font-weight를 설정해야 하고, 텍스트의 레이아웃에서도 비슷한 문제가 발생해 div 태그를 이용하였다.
추가적으로 긴 문단의 글을 작성할 때 다음과 같은 css를 이용하면 글자 단위가 아닌 단어 단위로 줄바꿈을 시켜줄 수 있다.
word-break:keep-all /* break-keep : Tailwind Css*/이렇게 제작된 about 페이지는 아래와 같다.
