해양관측 Ocean Guardian — 이도엽 포트폴리오

배경

왜 만들었나

수온이 갑자기 변하면 어업 종사자에게 직접적인 피해가 생기지만, 기존 해양 정보 앱은 UI가 복잡하고 낡아서 정작 필요한 사람들이 쓰기 어려웠습니다.

그래서 타겟을 분명히 했습니다 — 작은 글씨를 읽기 힘들고 직관적인 화면을 선호하는 40~60대. 화려한 기능을 더하는 대신, 꼭 필요한 정보를 크고 또렷하게 보여주는 데 집중한 프로젝트입니다. 기획(PRD)부터 화면 구현까지 맡았습니다.

무엇을 하는가

왜 이 기술을 썼나

Next.js · PWA플랫폼

설치형 앱처럼 쓰되 배포·접근은 웹으로 간단하게 — 앱스토어 없이 홈 화면에 추가되는 PWA가 타겟층에 맞았습니다.

shadcn/uiUI 라이브러리

Radix 기반으로 접근성이 보장된 컴포넌트를 제공하면서 커스터마이징이 자유로워, 4060 타겟 UI를 빠르게 다듬을 수 있었습니다.

Pretendard폰트

숫자 가독성이 좋고 굵기가 다양해, 수온·염분 데이터를 크고 또렷하게 위계 있게 배치하는 데 적합했습니다.

LocalStorage저장

DB·서버 없이 운영하기 위해 관심 지역·알림 동의 같은 설정을 브라우저에 직접 저장했습니다.

부딪힌 문제와
해결 과정

접근성

문제일반적인 정보 앱의 촘촘한 레이아웃과 작은 글씨는 노안이 있는 40~60대에게 사실상 읽기 불가능했습니다.

원인정보 밀도를 높이는 통상적 UI 관성이 타겟 사용자와 정면으로 충돌했습니다.

해결본문 최소 16~18px, 핵심 수치는 더 크게, 위계는 Bold(700)로 명확히 하고 터치 영역을 넉넉히 잡는 등 가독성 우선 규칙을 디자인 가이드로 못 박았습니다.

결과기능을 줄이는 대신 한눈에 읽히는 화면을 얻었고, 정보 접근성이라는 본래 목표에 충실해졌습니다.

제약 설계

문제운영비·복잡도를 줄이려 서버와 DB를 쓰지 않기로 했는데, 그러면 푸시 알림으로 특보를 보낼 수단이 없었습니다.

원인서버리스 제약상 사용자에게 능동적으로 알림을 밀어줄 백엔드가 없습니다.

해결접근 방식을 바꿔, 앱 실행 시 설정 지역의 특보를 조회해 최상단 Alert로 즉시 노출하도록 했습니다. 개인화 설정은 LocalStorage로 유지합니다.

결과서버 한 대 없이도 핵심 긴급 정보를 전달하는 흐름을 만들었고, 제약을 설계로 푸는 경험을 했습니다.

회고

사용자를 좁히면 결정이 쉬워진다. "40~60대 어업인"으로 타겟을 못 박자 글씨 크기·정보량·색 대비 같은 선택의 기준이 또렷해졌습니다.

제약은 핑계가 아니라 설계 조건이다. No-DB/No-Server라는 제약 안에서 LocalStorage와 실행 시점 Alert로 목표를 달성하며, 한계를 우회하는 방법을 고민했습니다.

백엔드를 지망하지만 프론트도 안다. 기획부터 화면까지 직접 만들며, 데이터가 사용자에게 닿는 마지막 화면까지 이해하는 개발자가 되고 싶다고 느꼈습니다.