[프로젝트 100] Day19. 실내바다낚시터 디렉토리 메인 시안 만들기

오늘은 실내바다낚시터 디렉토리 사이트의 메인 화면을 먼저 만들어봤다.

 

처음에는 그냥 데이터를 모으고, 지도를 붙이고, 목록을 보여주면 되는 일이라고 생각했다. 그런데 막상 정리해보니 생각보다 먼저 정해야 할 게 많았다.

 

실내바다낚시터만 다룰지, 바다낚시터 포인트까지 같이 넣을지부터 갈렸다. 바다낚시터 포인트까지 넣으면 데이터가 너무 넓어지고, 점주가 있는 장소 데이터와도 성격이 달라진다. 그래서 이번에는 실내바다낚시터만 다루기로 했다.

 

이번 프로젝트는 큰 수익을 기대하는 사이트라기보다는, 플랫폼 하나를 끝까지 만들어보고 배포까지 해보는 연습작에 가깝다. 애드센스도 돈을 벌기 위한 목적보다는, 실제 사이트에 광고를 붙여보는 경험 자체가 더 크다.

먼저 데이터를 정리해야 했다

하지만 디렉토리 사이트는 결국 데이터가 중심이었다. 어떤 항목을 모을지 정하지 않으면 화면도 계속 흔들릴 수밖에 없었다.

상호명, 시도, 시군구, 도로명주소, 전화번호, 요금정보, 운영시간, 휴무일, 방류어종, 편의시설, 홈페이지나 SNS, 출처URL, 비고.

이렇게 13개로 잡았다.

좌표는 일단 직접 수집하지 않기로 했다. 주소만 모아두고, 나중에 한 번에 좌표 변환을 하는 쪽이 더 낫다고 봤다. 처음부터 좌표까지 같이 넣으려고 하면 수집 속도도 느려지고, 내가 계속 지칠 것 같았다.

규모도 너무 크게 잡지 않았다. 일단 30개에서 50개 정도면 충분하다. 이 정도면 화면도 테스트할 수 있고, 지역 페이지나 상세 페이지 구조도 확인할 수 있다.

 

메인 시안

아직 진짜 사이트는 아니다

오늘 만든 건 완성된 Next.js 사이트는 아니다.

일단은 메인 화면 톤을 확인하기 위한 HTML 시안이다. 카카오맵도 아직 실제로 연결하지 않았고, 상세 페이지나 관리자 페이지도 아직 남아 있다.

하지만 그래도 오늘 작업은 의미가 있었다.

왜냐하면 이제 사이트의 방향이 눈에 보이기 시작했기 때문이다.

실내바다낚시터 디렉토리는 그냥 예쁜 페이지를 만드는 일이 아니었다. 데이터를 어떤 기준으로 모을지, 화면에서 어떤 정보를 먼저 보여줄지, 광고 자리는 어디에 둘지, 모바일에서 긴 텍스트를 어떻게 처리할지까지 같이 봐야 했다.

 

이번 프로젝트는 돈 되는 사이트를 바로 만들려는 게 아니다.

끝까지 만들어보고, 배포해보고, 광고도 붙여보고, 나중에 더 큰 사이트를 만들 때 필요한 감각을 익히는 연습이다.

그래서 지금은 작게 가는 게 맞다.

실내바다낚시터 하나로 범위를 좁히고, 데이터 30개부터 채우고, 메인 화면부터 제대로 굴러가게 만드는 것.