한국녹색기후기술원 · 2025.12 · 1개월

신재생에너지 융복합지원사업

사업 관리 시스템에 없던 현장 설치자의 모바일 업무 흐름을 설계하고 프로토타입으로 만든 작업.

같은 두 현장을 보여주는 현장설치업무와 현장설치내역 목록. 왼쪽과 오른쪽의 상태 배지가 다르며 주소는 예시 주소다.
같은 현장도 업무를 찾을 때와 기록을 확인할 때 다른 상태 정보를 보여줍니다. 실제 주소는 예시 주소로 바꿨습니다.

요약

기존 REMS는 제도가 요구하는 데이터는 갖췄지만, 현장 엔지니어가 현장을 찾고 장비를 연결하고 설치를 기록할 화면은 없었습니다. 이해관계자와 사양을 검토해 설치자의 업무를 하나의 순서로 정리하고, Figma 화면 12장을 에너지원별·전체용량 전환 차트까지 포함한 React 모바일 프로토타입으로 옮겼습니다.

배경

신재생에너지 융복합지원사업은 태양광·태양열 등 여러 재생에너지 설비를 지역 단위로 보급하는 정부 지원사업입니다. 지자체 담당자가 사업을 관리하고 현장 엔지니어가 설비를 설치합니다. 사업 관리 시스템인 REMS는 실제로 일하는 사람보다 제도 보고 요건을 중심으로 구성되어 있었습니다. 이 프로토타입은 현장 엔지니어의 모바일 업무를 다룹니다. 장비 연결과 제출은 시뮬레이션이며 현장 자료를 서버에 보관하지 않습니다.

역할
Project Manager / Service Designer (기획·설계)
팀
한국녹색기후기술원 프론트엔드·백엔드 개발자
소속
한국녹색기후기술원
기간
2025.12 · 1개월
도구
Figma · AI-Figma MCP · React + Vite 모바일 프로토타입

만든 것

  • 현장 찾기부터 장비 연결·작업 기록·제출까지 이어지는 설치자용 모바일 흐름
  • 해야 할 업무와 설치 내역을 구분하고, 지역·상태로 현장을 찾는 화면
  • 데이터로 그려 에너지원별·전체용량을 전환하는 발전용량 현황 차트

문제

REMS는 제도가 요구하는 것을 갖추도록 만들어졌고, 그 역할은 했습니다. 없었던 것은 현장 엔지니어가 하루 업무에 쓸 화면이었습니다. 어느 현장이 내 것인지, 이 현장에서 무엇을 해야 하는지, 계측 장치를 어떻게 연결하고 작업을 어떻게 기록하는지가 시스템에 없었습니다. 제도가 요구하는 정보를 갖춘 것만으로는 현장에서 다음 일을 할 수 없었습니다.

맡은 역할과 제약

사양 검토부터 동작 프로토타입까지 설치자 업무 흐름을 맡았습니다. 내부 이해관계자와 사양을 문장 단위로 확정하고, 설치자의 행동을 하나의 순서로 정리한 뒤, AI-Figma MCP로 Figma 화면을 만들고 휴대폰에서 검토할 수 있는 React 모바일 프로토타입으로 조립했습니다. 전체 과정은 한 달이 걸렸습니다. 범위는 의도적으로 좁혔습니다. 지자체 쪽이 아니라 설치자의 여정만 다뤘습니다.

설계를 결정한 판단

  • 한 현장에 목록 둘. 다음 할 일을 찾을 때와 설치 기록을 확인할 때 필요한 상태 정보가 다르므로, 현장설치업무와 현장설치내역을 분리하고 각 목록에는 그 목적에 맞는 상태만 남겼습니다.
  • 필터는 쉽게 풀 수 있어야 합니다. 지역 필터로 가까운 현장을 찾되, '전체'를 선택하면 한 번에 선택이 풀려 전체 목록을 다시 볼 수 있습니다.
  • 한 차트를 두 방식으로 읽습니다. 여러 설비를 함께 보급하는 사업이므로 발전용량 차트는 에너지원별 누적 막대와 전체용량 단일 막대를 오갑니다. 막대를 데이터로 그렸기 때문에 토글이 실제 시리즈를 바꾸고, 누적 타일과 지역 격자도 같은 숫자에서 계산됩니다.
서울특별시가 선택된 지역 시트의 전체 항목과 선택을 해제한 뒤 12개 현장으로 돌아온 목록.
지역을 좁힌 뒤에도 '전체'를 선택해 다시 탐색할 수 있습니다. 예시 목록은 서울 3개 현장에서 전체 12개 현장으로 돌아옵니다.
좌우로 나란히 놓인 두 개의 발전용량 현황 화면. 왼쪽은 에너지원별 토글이 선택돼 1월부터 6월까지의 막대가 태양광·태양열·지열 세 색으로 쌓여 있고, 오른쪽은 전체용량 토글이 선택돼 같은 여섯 달이 한 색의 막대로 그려져 있다. 두 화면 모두 총 누적 424MW와 6월 증가량 55MW를 보여준다.
같은 여섯 달을 에너지원별로 쌓아 보거나 하나의 전체용량으로 접어 볼 수 있습니다. 수치는 디자인 시안에서 옮긴 예시 데이터입니다.

만든 것과 확인한 것

현장 검색부터 작업 기록 제출까지 설치자의 여정을 다루는 동작 모바일 프로토타입을, 이해관계자와 개발자가 사양서와 같은 화면에서 검토했습니다. 사양 검토, AI-Figma 프롬프트, 동작 프로토타입으로 이어지는 순서를 끝까지 적용해 한 달 안에 화면 12장을 전달한 사례입니다. 장비 연결과 제출은 시뮬레이션이므로 현장 도입 수치는 주장하지 않습니다.

전체 작업