정부 부처 지식 포털
정부 부처의 지식 · 정책 정보를 서로의 관계로 연결해, 낱말이 아니라 의미로 찾아가게 한 공공 정보 포털의 화면을 개발했습니다. 정보 사이의 관계가 화면에 드러나지 않으면, 공들여 연결한 데이터도 키워드 검색 결과 목록과 다르지 않게 보입니다. 정보 탐색 화면, 정보 사이의 관계와 맥락을 보여 주는 화면, 검색에서 선택과 상세 확인으로 이어지는 조작을 맡았습니다.
낱말이 아니라 의미로 찾아가는 정책 정보
정부 지식 포털은 방대한 지식 · 정책 정보를 의미와 관계로 연결해 둔 공공 정보 서비스입니다. 정보마다 무엇에 관한 것인지, 다른 정보와 어떻게 이어지는지를 데이터로 적어 두어, 단순 키워드 검색을 넘어 의미로 찾아가게 하려는 포털이었습니다. 정부가 의미 기반 웹 기술을 공공 포털에 들이기 시작하던 무렵의 작업입니다.
정보 사이의 관계와 맥락을 그려 보이는 탐색 화면
의미로 연결한 데이터는 그 연결이 화면에 보여야 쓸모가 생깁니다. 의미 기반 포털이 사용자에게 돌려줄 것은 찾은 정보 한 건이 아니라, 그 정보와 이어진 다른 정보와 둘 사이의 관계입니다. 사용자가 정보 사이의 관계와 맥락을 알아볼 수 있도록 정보 탐색 화면의 구조와 시각적 표현을 구현했습니다. 복잡한 정보를 눈으로 따라가며 탐색하게 만드는 데 집중했습니다.
검색 · 선택 · 상세 확인이 끊기지 않는 흐름
정보 포털에서 사용자의 탐색은 검색하고, 결과에서 고르고, 상세를 확인하는 순서로 진행됩니다. 화면 부품과 사용자 동작 처리를 활용해, 이 순서가 화면이 바뀔 때마다 끊기지 않고 자연스럽게 이어지도록 개발했습니다. 세 단계를 오가는 동안 사용자가 지금 어디에 있는지 잃지 않게 하는 것이 탐색 흐름의 기준이었습니다.
브라우저 안에서 프로그램처럼 반응하는 포털 조작
공공 포털은 누구나 웹 브라우저로 여는 서비스라, 탐색 화면도 브라우저 안에서 동작해야 했습니다. 정보 포털의 화면을 브라우저 안에서 프로그램처럼 반응하는 방식으로 구현해, 기존 웹 화면보다 풍부한 조작과 시각적 표현을 담았습니다. 웹 화면이면서도 화면 안의 조작에 바로 반응하는 것이, 관계를 따라 정보를 넘나드는 탐색에 맞았습니다.
이 작업의 포인트
정책 정보 사이의 관계와 맥락을 보여 주는 탐색 화면
키워드 검색을 넘어 의미로 찾아가는 공공 포털
검색 · 선택 · 상세 확인으로 이어지는 탐색 흐름
인사이트
GA4 client_storage: 'none'은 정말 쿠키를 막을까?
두 달 전 이 블로그에 「GA4 쿠키 없이 쓰기」라는 글을 썼습니다. clientstorage: 'none' 으로 쿠키 저장을 끄고, 자체 분석이 쓰던 익명 ID 를 clientid 로 넘기면 쿠키 0개로 GA4 를 쓸 수 있다는 내…
GA4 Measurement Protocol: gtag.js 없이 서버에서 이벤트 보내기
랜딩 페이지의 전송량을 파일 단위로 쪼개 보다가, 가장 큰 파일이 우리 코드가 아니라는 것을 알았습니다. Google Analytics 의 gtag.js 였고, 방문 한 번에 176KB 를 받고 있었습니다. 페이지 전체가 1,094K…
중소 제조업 AI 도입 순서: DX를 먼저 끝내야 할까?
공장을 가진 중소·중견 제조기업 16만여 곳 가운데 스마트공장을 도입한 곳은 19.5%입니다. 회사가 작을수록 이 비율은 더 떨어집니다. 중소벤처기업부가 2025년 4월에 낸 제1차 스마트제조혁신 실태조사 결과입니다. 그림: 기업 규…
Next.js loading.tsx와 404: 버튼이 화면보다 먼저 살아나게 하기
관리 화면 왼쪽 위에 사이드바를 접고 펴는 ☰ 버튼이 있습니다. 폭 하나 바꾸는 버튼인데, 대시보드에서 누르면 2초 넘게 아무 반응이 없었습니다. 레이아웃만 바꾸는 일이 왜 이렇게 오래 걸리는지부터 들여다봤습니다. Next.js 16…