SOFTMOA PROJECTS

더,논산 — 수묵담채 두루마리로 지은 논산 지역 누리집

구축 배경과 구현 범위를 확인해보세요.

Contents

더,논산 누리집 데스크톱과 모바일 첫 화면

논산의 들과 강, 서원과 포구를 수묵담채 원화로 그리고, 누리집 전체를 한 폭의 두루마리처럼 펼쳤습니다. 기획·디자인·개발은 소프트모아가 맡았습니다.

thenonsan.com 바로 가기

한 폭의 두루마리

홈은 그림이 화면 폭 끝까지 번지고, 글과 장식은 가운데 틀 안에 놓입니다. 아래로 내리면 머리글이 한지 띠처럼 펼쳐지며 붓선이 그어지고 論山 낙관이 찍힙니다. 안개와 백로, 갈대와 물결 같은 수묵 장식이 천천히 움직입니다.

더,논산 홈 첫 화면

더,논산 홈 전체 화면

옛 이름으로 엮은 여섯 폭

메뉴마다 논산기행·논산주막·논산달력·논산소식·홍보마당·품앗이처럼 옛 이름을 붙이고, 쪽마다 그 폭에 어울리는 그림과 짜임을 따로 그렸습니다.

논산기행 — 선비의 길, 강의 길, 호수의 길

서원의 마루에서 탑정호 다리, 강경 옛 포구의 골목까지. 걷기 좋은 길을 옛 지도 위에 그리고, 계절마다 다른 풍경을 한 폭씩 모았습니다.

논산기행 첫 화면

논산기행 주요 화면

논산주막 — 들녘이 차린 한 상

딸기 하우스에서 강경 포구의 젓갈 골목까지, 논산 사람들이 아끼는 식탁을 이달의 한 상과 동네 맛집 장부로 엮었습니다.

논산주막 첫 화면

논산주막 주요 화면

논산달력 — 논산의 날들을 한눈에

논산훈련소 입영과 수료식, 면회 날부터 축제와 시정 일정까지 한 폭의 달력에 담았습니다.

논산달력 첫 화면

논산달력 주요 화면

논산소식 — 포구에 닿는 소식

축제와 행사, 생활 정보와 시정 소식을 날짜별 달력과 함께 한곳에서 봅니다.

논산소식 첫 화면

논산소식 주요 화면

홍보마당 — 우리 가게와 마을을 논산에 알리세요

가게 소식, 농산물 직거래, 마을 행사를 세 걸음 문의로 받아 한 폭의 알림으로 걸어 둡니다.

홍보마당 첫 화면

홍보마당 주요 화면

품앗이 — 논산의 일터를 잇습니다

이웃끼리 품을 나누던 옛 마음처럼, 공공 기관에 올라온 논산의 일자리·채용 공고를 원문과 함께 모았습니다.

품앗이 첫 화면

품앗이 주요 화면

모바일

모든 쪽을 휴대폰 한 손 화면에 맞춰 다시 배치했습니다. 그림은 세로 화면에서도 여백을 살리고, 메뉴와 찾기는 엄지가 닿는 곳에 둡니다.

더,논산 모바일 화면 일곱 쪽

디자인 요소

더,논산 빛깔과 글꼴, 로고

  • 수묵담채 원화: 물안개 낀 논과 한옥, 딸기 들녘, 돈암서원, 탑정호 출렁다리, 강경 포구
  • 글꼴: 제목은 송명, 본문은 고운바탕, 한자 붓글씨와 論山 낙관
  • 빛깔: 한지·먹·인주를 바탕으로 솔·쪽·황토·감·연꽃을 곁들임
  • 움직임: 수묵 번짐·물길·새·백로·갈대·물결. 기기의 동작 줄이기 설정에서는 멈춥니다

만든 방식

구분사양
FrontendNext.js 16 · React 19 · TypeScript 6 · Tailwind CSS 4
BackendKotlin 2.4 · Spring Boot 4.1 · jOOQ 3.21 · Flyway
DatabasePostgreSQL 18
렌더링공개 쪽 서버 렌더링, 수묵 장식은 미리 그린 이미지로 가볍게 표시
콘텐츠관리자 화면과 관리 API로 공공데이터·누리집 자료를 출처와 함께 적재
Share this

포트폴리오

Showing 0 to 0 of 0 entries
게시글 목록을 불러오는 중입니다.
NoTitle
게시글 목록을 불러오는 중입니다.