SOFTMOA PROJECTS
더군산 — 흑백 펜화에 색이 번지는 근대 항구 군산 지역 누리집
구축 배경과 구현 범위를 확인해보세요.
Contents
개항 도시 군산의 세관과 은행, 철길 골목과 빵집, 사진관과 간이역을 펜 담채 원화로 그리고, 흑백 펜화에 물감이 번지듯 색이 오르는 화면으로 누리집을 지었습니다. 기획·디자인·개발은 소프트모아가 맡았습니다.
한 장씩 넘기는 근대 항구의 도판
홈은 PLATE I부터 V까지 다섯 폭의 도판으로 이어집니다. 첫 폭에서는 장미동 내항 거리가 펜 선으로 그어진 뒤 세관 벽돌과 은행 지붕, 고깃배 쪽에서부터 색이 번집니다. 아래로 내리면 철길 골목, 빵집, 신문 지면 속 사진관, 임피역 그림이 화면에 닿는 순간 흑백에서 컬러로 물들고, 그 위로 갈매기와 바람결, 연기와 물결이 천천히 움직입니다.
여섯 메뉴
군산기행·군산식당·군산달력·군산신보·홍보마당·일터정거장. 메뉴마다 그 쪽에 어울리는 군산 풍경을 따로 그리고 짜임을 달리했습니다.
군산기행 — 은행과 세관, 철길과 섬으로
근대건축관과 경암동 철길마을, 구불길과 고군산군도까지 가볼 만한 곳을 모았습니다. 상세 쪽에는 엽서처럼 꾸민 사진과 이용 정보, 지도 바로가기를 둡니다.
군산식당 — 항구 도시의 오래된 식탁
빵집과 짬뽕집, 꽃게장 정식까지 군산 사람들이 아끼는 식탁을 경양식집 차림표처럼 보여 줍니다. 착한가격업소와 모범음식점 같은 공공 자료를 가게와 이어 함께 표시합니다.
군산달력 — 깃발이 걸리는 날들
축제와 행사, 공연과 전시, 시정 일정을 한 달 달력과 날짜별 목록으로 봅니다.
군산신보 — 오늘의 군산 소식
시정·생활 소식과 행사 안내를 옛 신문 지면처럼 엮었습니다. 지면 속 흑백 사진은 화면에 닿으면 색이 번져 오릅니다.
홍보마당 — 골목 가게의 소식을 거는 곳
가게 소식과 직거래, 마을 행사를 세 걸음 문의로 받아 지면 광고 칸처럼 걸어 둡니다.
일터정거장 — 일자리가 잠시 멈춰 서는 역
공공 누리집에 올라온 군산의 구인 공고를 승차권 한 장씩으로 보여 주고, 마감이 가까운 공고에는 소인을 찍습니다.
모바일
모든 쪽을 휴대폰 화면에 맞춰 다시 배치했습니다. 넓은 그림은 좁은 화면에서 천천히 좌우로 훑어 보여 줍니다.
디자인 요소
- 펜 담채 원화: 장미동 내항, 경암동 철길마을, 이성당, 초원사진관, 임피역, 신흥동 골목, 고군산군도
- 글꼴: 제목은 Diphylleia, 본문은 Hahmlet, 숫자와 도판 번호는 Bodoni Moda, 라틴 장식은 Cormorant Garamond
- 빛깔: 흰 수채 종이와 펜 먹을 바탕으로 벽돌·녹청·솔·황토·승차권·등불
- 움직임: 흑백 펜화 위로 물감이 번지는 효과는 WebGL 셰이더 한 장으로 그리고, 기기의 동작 줄이기 설정에서는 처음부터 컬러 그림을 보여 줍니다
만든 방식
| 구분 | 사양 |
|---|---|
| Frontend | Next.js 16 · React 19 · TypeScript 6 · Tailwind CSS 4 |
| Backend | Kotlin 2.4 · Spring Boot 4.1 · jOOQ · Flyway |
| Database | PostgreSQL 18 |
| 여러 지역 구성 | 더논산과 같은 백엔드·DB·관리자를 쓰고 지역마다 스키마와 사용자 화면만 따로 둠 |
| 콘텐츠 | 공공데이터(관광·인허가·문화·채용)를 지역 조건으로 수집하고, 하루 호출 한도를 장부로 관리 |
| 검색 노출 | 요청마다 서버 렌더링, 사이트맵·RSS·구조화 데이터, 바뀐 쪽을 IndexNow로 알림 |