숙박시설 컨설팅 L & K 홈페이지 제작 - (시작)

간단한 소개 🎇

프로그래머스 데브코스를 끝내고 면접과 이력서 등의 준비로 바쁜중간에 아는 지인한테서 사이트를 하나 만들어달라는 의뢰가 들어왔다.

 

중소규모에서 컨설팅 및 안내 페이지를 만들고 싶다

 

깃허브 잔디가 최근 드물기도 했고 최근 면접공부만 하다가 프로젝트를 하나 같이 겸하는게 좋겠다고 생각해서 무료로 제작해주기로 하고 대신 조건으로 코드공개와 포트폴리오로 쓸거라는 말을 같이 전달해줬다.

 

전달받은 자료는 PPT와 로고 2개를 받고 일단 시안을 작성해보기로 했다.

 

 

기술 & 목표설정 🎈

기술 스택으로는 가장 익숙한 Next.js로 가기로 하고 이번 프로젝트의 중점을 어디다 둘지 곰곰히 생각해보다가 이번엔 코드도 코드지만 기획부터 시작해서 모든걸 내가 경험하며 최종적으로 누군가가 사용해주는 사이트를 만들어보고 싶었다. 

 

먼저 유저 접근성 측면에서

1. 사용자가 편할 수 있는 다크모드/라이트모드
2. 반응형 웹을 고려하여 모바일 / 테블릿 / PC 각각 디자인을 변경
3. 가능한 동일 유사색상과 반전색을 사용하여 글을 읽는대 부담스럽지 않은 색상선택
4. 애니메이션은 너무 화려하게 넣지말고 가볍게만

기술 스택적인 측면에서는

1. SEO (검색최적화) 기능을 사용하여 사이트를 만들기
2. Lint , CI/CD등 자동화와 규칙 측면에서 최대한 엄격한 룰이 적용된 걸 사용해보기
3. 내부 텍스트를 분리하여 한글 / 영어버전을 만들어보기

이후 최종적으로 목표로 하는 것은

1. 배포 그리고 최종적으로는 도메인을 구매하여 도메인에 연결하기
2. 해당 검색어로 검색 시 구글등에 검색될 수 있게 하기
3. Lighthouse 최적화 진행하기 (이미지 , 로딩시간 최적화 -> SSG등)
4. 구글 Analitics를 달아서 사용자가 실제로 사용중인지를 확인하기

위와 같은 목표로 진행하기로 했다.

 

 

Next 템플릿 선정 🧣

 이번에는 개인프로젝트이기도 하고 다른 경력이 긴 개발자가 어떤 방식으로 위와 같은 것들을 해결하는지 궁금했다. 그래서 아예 최대한 코드페이지 작성단 전까지 셋팅이 되있는 템플릿중 사용자가 좀 많고 Chakra와 Typescript를 사용할 예정이라 이것들이 기본적으로 사용된 템플릿 프로젝트를 찾아봤다.

 

 

https://github.com/sozonome/nextarter-chakra

GitHub - sozonome/nextarter-chakra: battery packed template / boilerplate to initialize Next.js app with Chakra UI & Typescript

 

 적용 예정이였던 Next-SEO가 사용되었고 원하는 기술스택만 최소한으로 들어가 있으며 차후 PWA쪽도 손볼 수 있다고 판단되어 최종적으로 위의 Boilerplate로 선정하게 되었다.