KOO BON SEOK · SOFTWARE DEVELOPERSEOUL, KOREA · BORN 1997

PEOPLE,
MEET TECH.

영상과 센서 데이터를 분석해
현장의 동작으로 연결하는 개발자입니다.

↓
ABOUT ME01

COMMUNICATION
BECOMES PRODUCT.

영상처리, 센서 데이터와 장비 제어를 연결해 디지털농업과 연구 현장의 문제를 해결하는 소프트웨어를 개발합니다.

홍보로 만들어진 커뮤니케이션 역량을 바탕으로 고객과 사용자의 요구를 정확하게 파악합니다. 비즈니스 목적과 기술적 조건을 함께 고려해 이를 실제 제품과 기능으로 구현하며, 사람과 기술 사이의 간극을 좁히는 개발자가 되고자 합니다.

CORE TECH STACK
FlutterDartBLoCC#.NET 8.0WinFormsREST APIMQTTOpenCVSerialRS485ModbusScottPlotFigma
1997 / KOO BON SEOKHONGIK UNIVERSITYAD & PUBLIC RELATIONSSOFTWARE DEVELOPERLLM-ASSISTED DEVELOPMENTCONTEXT & DOCUMENTATION DESIGN
WORK EXPERIENCE02
CURRENT POSITION

코리아디지탈(주)

MD팀 연구원 · 소프트웨어 개발자
ROLE SUMMARY

사용자·현장 요구사항을 분석해 스마트팜, 연구장비와 센서 제품에 필요한 소프트웨어를 설계하고 구현합니다. 특히 현미경 영상에서 시료를 검출하고 실제 장비 좌표로 변환해 자동초점·이동·촬영으로 연결하는 영상처리 파이프라인과, 센서·구동기를 연동하는 디지털농업 프로그램을 개발했습니다.

핵심 담당 업무

  • 스마트팜 통합 UIFlutter/Dart 기반 FarmsCube3 PC·웹·모바일 화면의 UX/UI와 기능 구현, BLoC 상태관리 및 REST API·MQTT 데이터 연동
  • Windows C/S 개발C#/.NET 기반 장비 제어, 교정, 검수, 펌웨어 업데이트와 연구용 프로그램 개발 및 유지보수
  • 현미경 자동화·영상처리HSV 변환과 Contour 조건으로 시료 ROI를 검출하고, 픽셀 좌표를 실제 스테이지 XY 좌표로 변환해 자동 이동·Sobel 기반 자동초점·타일 촬영과 이미지 합성까지 구현
  • 산업용 장비 통신Serial·RS485·Modbus와 제품 프로토콜을 활용한 센서, 릴레이, 개폐기 및 다채널 장비 상태 조회·제어
  • 센서 데이터 처리SNU 생체센서 모니터링, FJK 통합 컨트롤러, CMA 센서 점검 도구의 실시간 차트·CSV 기록·상태 및 오류 처리
  • 현장 대응·품질 개선장비 응답과 통신 오류 분석, 사용자 피드백과 현장 요구사항 반영, 기존 프로그램 기능 개선 및 안정화
  • AI 활용 개발 체계아키텍처, API·MQTT 명세와 기능별 BLoC 설계를 Markdown으로 구조화하고 LLM을 구현·검증 과정에 단계적으로 활용
CAPABILITY SUMMARYWHAT I DO
01

Computer Vision

HSV·Contour 기반 시료 검출부터 픽셀-실좌표 변환, Sobel 선명도 자동초점, XYZ 이동과 타일 촬영·스티칭까지 영상처리와 장비 제어를 통합

OpenCV · C# · MOTION
02

Device & Calibration

RS485 통신과 제품 프로토콜을 기반으로 자사 제품별 교정·검수·펌웨어 보조 프로그램 개발

RS485 · SERIAL · PROTOCOL
03

Smart Farm

스마트팜 컨트롤 테스트 프로그램 및 MQTT 통신 기반 통합 프로그램의 UX/UI와 세부 기능 구현

MQTT · CONTROL · UX/UI
04

Cross Platform

MBL 제품의 iOS 보조학습 앱과 Flutter 기반 통합 프로그램의 프론트엔드 및 동작 기능 개발

iOS · FLUTTER · MOBILE
05

AI-assisted Workflow

LLM 기반 앱 개발을 위해 프로젝트 구조, 폴더별 책임, 기능 명세, 작업 규칙과 연동 기준을 Markdown 문서로 구성하고 유지

LLM · CONTEXT · MD DOCS
SELECTED WORK · 10 PROJECTS03
01 / RESEARCH & VISION

연구장비 · 영상처리

연구자의 관찰과 측정을 자동화하기 위해 장비 제어, 좌표 변환, 영상 분석과 생체신호 시각화를 연결했습니다.

3 PROJECTS
PROJECT 04RESEARCH & VISION

Plant Bio Hub

SNU 바이오센서 에이징·유효성 테스트

SNU Bio Sensor 납품 전, 개발 중인 센서의 장시간 에이징 테스트와 측정값 유효성 검증을 위해 제작한 내부 테스트 프로그램입니다.

MY ROLE센서 에이징 테스트 · 측정값 유효성 검증 도구 개발
WHAT I BUILT

개발 중인 임피던스·엽온·수액 등 식물 생체센서의 데이터를 장시간 수집해 출력값의 변화와 이상 여부를 확인하도록 구성했습니다. 초기에는 MS Chart 계열 구조로 차트를 구현했으나, 데이터 누적 시 시리즈 전체를 다시 구성하는 과정에서 표시가 밀리고 UI가 버벅이는 현상을 발견했습니다. 이 경험을 바탕으로 후속 납품 프로그램의 차트 구조를 ScottPlot 중심으로 개선했습니다.

TECH STACK
C# .NETSerialMS ChartCSV
주요 기능 자세히 보기
FEATURE DETAILS
  • SNU Bio Sensor 개발 단계에서 센서를 장시간 구동하며 에이징 상태와 측정값의 유효 범위를 확인할 수 있는 테스트 화면 구성
  • 시리얼 수신 데이터를 임피던스·엽온·수액 등 센서 종류별 값으로 파싱하고 시간축 데이터와 CSV로 기록
  • 신규 데이터 수신 때 기존 시리즈를 비우고 전체 데이터를 다시 구성하는 차트 흐름이 누적 데이터 증가에 따라 지연을 일으키는 현상 확인
  • 테스트 과정에서 확인한 차트 데이터 밀림과 UI 버벅임을 후속 SNU Bio Sensor 납품 프로그램의 ScottPlot 전환 요구사항으로 연결
PROJECT 05RESEARCH & VISION

Microscope Auto Capture

시료 탐지부터 실좌표 이동·초점·촬영까지

저배율 영상에서 시료를 찾아 실제 장비 좌표로 변환하고, XYZ 이동·자동초점·타일 촬영까지 연결한 현미경 자동 촬영 파이프라인입니다.

MY ROLE서울대학교 SI · 현미경 자동 촬영 파이프라인 개발
WHAT I BUILT

저배율 영상을 HSV 색공간과 Contour 조건으로 분석해 시료별 ROI를 생성하고, ROI 중심 픽셀을 캘리브레이션 기준값과 현재 스테이지 위치에 적용해 실제 XY 좌표로 변환했습니다. 이동 완료 상태를 비동기로 확인한 뒤 3단계 Z축 자동초점과 타일 촬영·스티칭으로 이어지는 전체 흐름을 통합했습니다.

TECH STACK
C# .NETOpenCvSharp4HSV / ContourXYZ Motor ControlAsync/AwaitSerial
주요 기능 자세히 보기
FEATURE DETAILS
  • 저배율 영상을 HSV로 변환하고 채도·명도 임계값, 형태학 처리와 Contour 면적 조건으로 객체 후보를 검출한 뒤 인접·중첩 박스를 시료별 ROI로 병합
  • PictureBox 표시 비율을 보정한 ROI 중심 픽셀에 카메라 캘리브레이션 기준값과 현재 스테이지 위치를 적용해 실제 XY 이동 좌표 산출
  • XYZ 스테이지의 절대·상대 이동을 제어하고 모터 Busy 상태와 현재 좌표를 비동기로 확인해 UI 정지 없이 다음 단계 수행
  • Z축을 큰 간격에서 500μm, 50μm 순으로 좁혀 탐색하고 Sobel 선명도 점수가 가장 높은 좌표로 복귀하는 3단계 자동초점 구현
  • 배율과 중첩률을 반영해 ROI별 행·열 타일 좌표를 생성하고 촬영 일시정지·취소, 이미지 저장과 스티칭까지 하나의 촬영 루프로 통합
PROJECT 08RESEARCH & VISION

SNU Bio Sensor

식물 생체센서 납품용 모니터링

Plant Bio Hub 테스트 경험을 바탕으로 차트 성능을 개선하고, 센서 설정과 연구 데이터 전송까지 확장한 서울대학교 납품용 프로그램입니다.

MY ROLE서울대학교 SI · 생체 센서 통신 및 모니터링 개발
WHAT I BUILT

Plant Bio Hub에서 확인한 누적 데이터 렌더링 지연을 개선하기 위해 납품용 프로그램의 차트를 ScottPlot 기반으로 전환했습니다. 신규 측정값만 데이터 흐름에 추가해 차트 밀림을 줄였으며, 연구자가 확대·축소와 축 이동으로 원하는 구간을 자유롭게 분석할 수 있도록 했습니다. 엽온 센서의 히팅 ON/OFF 시간과 주기를 조회·설정·검증하고, 수집 데이터를 MQTT로 서버의 DB 수집 파이프라인에 전달하는 기능도 구현했습니다.

TECH STACK
C# .NETScottPlotMQTTSerialHeating ControlCSV
주요 기능 자세히 보기
FEATURE DETAILS
  • 엽온·수액·광양자·임피던스 데이터를 ScottPlot 차트에 신규 데이터 단위로 반영해 누적 데이터 증가 시 발생하던 전체 재구성과 표시 지연 완화
  • ScottPlot의 확대·축소와 축 이동 기능을 활용해 연구자가 장시간 측정 데이터의 원하는 구간을 직접 탐색·비교하도록 구성
  • 엽온 센서의 히팅 ON/OFF 시간을 장비에서 불러오고 사용자 입력값을 저장한 뒤 재조회 결과와 비교해 설정 성공 여부 검증
  • 센서별 전송 주기와 발행 큐를 구성하고 수집값을 MQTT의 sensor/data/all 토픽으로 전달해 서버 측 DB 수집 흐름과 연동
  • 통신 중단 시 MQTT 재연결을 시도하고 실시간 요청·응답 토픽을 분리해 장시간 연구 환경의 데이터 전송 안정성 보완
02 / SMART FARM & CONTROL

스마트팜 · 통합제어

실시간 장비 데이터를 안정적으로 전달하고 다채널 구동기를 직관적으로 제어하는 운영 환경을 구축했습니다.

3 PROJECTS
PROJECT 01SMART FARM & CONTROL

FJK Integrated Controller

스마트팜 통합제어기 설치 검증

통합제어기 설치 후 센서 입력과 개폐기·구동기 전 채널이 정상 동작하는지 현장에서 확인하는 테스트 프로그램입니다.

MY ROLE스마트팜 통합제어기 통신 · 설치 검증 UI 개발
WHAT I BUILT

설치된 통합제어기에 연결해 기본 센서값과 채널 상태를 대시보드에서 확인하고, 개폐기 전 채널의 열기·닫기·정지와 구동기 전 채널의 ON/OFF를 시험하도록 구성했습니다. 설치 직후 배선, 통신, 출력 채널의 이상 여부를 한 프로그램에서 점검할 수 있습니다.

TECH STACK
C# .NETRS485Sensor DashboardMulti-channel Control
주요 기능 자세히 보기
FEATURE DETAILS
  • 온도·습도·CO₂ 등 통합제어기에 입력되는 기본 센서값과 연결 상태를 대시보드에 표시
  • 개폐기 전 채널에 열기·닫기·정지 명령을 전달하고 실제 동작과 상태 응답을 확인
  • 릴레이 기반 구동기 전 채널의 ON/OFF 명령을 실행해 설치 및 배선 상태를 일괄 검증
  • 현장 설치 완료 후 센서 입력부터 제어 출력까지 통합제어기의 주요 기능을 순서대로 점검하는 테스트 흐름 구성
PROJECT 02SMART FARM & CONTROL

FarmsCube3 · Windows

C# 기반 스마트팜 통합 제어

MQTT로 센서·구동기·개폐기 상태를 실시간 수집하고 장비 제어와 현장 설정을 제공하는 FarmsCube3의 C# Windows 애플리케이션입니다.

MY ROLEFarmsCube3 Windows 클라이언트 · MQTT 장비 연동 개발
WHAT I BUILT

C# WinForms와 전용 MQTT SDK를 기반으로 통합제어기의 시스템 정보, 장비 설정, 센서값과 구동 상태를 요청·수신하는 PC 운영 프로그램을 구현했습니다. 수신 이벤트를 장비 ID 기반 데이터 맵에 반영하고 활성화된 센서·구동기·개폐기 카드를 대시보드에 동적으로 구성했습니다. 개별 장비 제어와 별칭·구역·동작 시간 설정까지 하나의 운영 흐름으로 연결했습니다.

TECH STACK
C#WinForms.NETMQTTnetFarmcube3MqttSDKEvent-driven UI
주요 기능 자세히 보기
FEATURE DETAILS
  • MQTT 연결 후 시스템 정보와 전체 장비 설정을 불러오고 센서 데이터·구동기 상태 응답을 이벤트 방식으로 수신해 화면에 반영
  • CO₂ 등의 연결된 센서를 대시보드에 채널별 카드로 표시하고 별칭과 재배 구역을 바로 변경
  • 일반 구동기는 개별 ON/OFF, 개폐기는 목표 동작 시간에 따른 개도 제어·정지와 전체 개폐기 정지 기능 제공
  • 센서·구동기·개폐기 설정 화면에서 별칭, 구역, 사용 여부와 개폐기의 최대 열림·닫힘 시간을 장비에 저장
  • 장비 ID별 상태·설정 데이터를 동시성 안전 맵으로 관리하고 변경된 데이터만 해당 UI 컨트롤에 바인딩해 실시간 갱신
  • 설정 화면 진입 시 주기 조회를 일시정지하고 대시보드 복귀 시 재개해 장비 설정과 상태 갱신 흐름의 충돌 방지
PROJECT 03SMART FARM & CONTROL

FarmsCube3 · Flutter

크로스 플랫폼 스마트팜 통합 제어

C# 버전 이후 대시보드, 장비 제어, 자동제어 규칙과 운영 이력을 서버·통합제어기 데이터에 연결하도록 확장한 Flutter 기반 FarmsCube3입니다.

MY ROLEFlutter 프론트엔드 · BLoC 상태관리 · API/MQTT 연동
WHAT I BUILT

Figma 기반 PC 운영 화면을 Flutter로 구현하고 기능별 BLoC, Repository와 데이터 모델로 화면·상태·통신 책임을 분리했습니다. REST API에서는 센서·구동기 설정과 통계, 그룹, 자동제어 규칙을 관리하고 MQTT5에서는 통합제어기의 실시간 상태 조회와 제어 명령을 처리하도록 구성했습니다.

TECH STACK
FlutterDartBLoCDio / REST APIMQTT5FigmaResponsive UI
주요 기능 자세히 보기
FEATURE DETAILS
  • 종합·개별·구역 대시보드에서 연결된 센서, 스위치와 개폐기 정보를 표시하고 센서 상세·그룹 데이터를 확인하는 화면 구성
  • 개별·그룹 단위 스위치 제어와 개폐기 동작·개도율 제어를 MQTT 명령 토픽에 연결
  • 시간·간격·센서 조건을 기준으로 자동제어 규칙을 등록·수정하고 제어 대상 장비를 선택하는 기능 구현
  • 센서·스위치·개폐기의 별칭, 사용 여부와 구역을 설정하고 장비별·그룹별 구성 정보를 REST API로 관리
  • 동작·통신 오류·설정 변경·로그인 이력을 구분하고 농장 선택, 사용자 프로필과 운영 상태를 공통 PC 레이아웃에 구성
  • 대시보드 카드 노출 여부와 그리드 배치를 사용자가 편집할 수 있도록 화면 편집 흐름 구현
  • BLoC의 Event·State 구조로 로딩·정상·빈 데이터·오류·팝업 상태를 분리하고 Repository 계층에서 Dio API와 MQTT5 통신 처리
03 / PRODUCT & MANUFACTURING

제품 · 생산자동화

제품 통신 프로토콜을 기반으로 교정과 검수 등 반복적인 생산 업무를 소프트웨어로 자동화했습니다.

3 PROJECTS
PROJECT 07PRODUCT & MANUFACTURING

80CH CO₂ Calibration

다채널 생산 교정 자동화

80개 채널의 센서 상태와 교정 데이터를 동시에 처리하고 결과를 기록하는 생산·품질관리용 JIG 소프트웨어입니다.

MY ROLE자사 제품별 생산·교정 프로그램 개발
WHAT I BUILT

먼저 80개 채널에서 연결된 센서를 확인한 뒤, 사용자가 목표 CO₂ 농도와 측정 시간을 설정합니다. 기준 가스를 주입하는 동안 각 센서값을 반복 수집해 평균을 구하고 목표 ppm과의 차이로 보정 오프셋을 계산·전달합니다. 목표 농도별 교정이 끝나면 최종 시험으로 양품·불량을 판정하고 교정값을 CSV로 내보냅니다.

TECH STACK
C# .NET 8.0RS48580CH ProtocolCO₂ CalibrationCSV
주요 기능 자세히 보기
FEATURE DETAILS
  • 80개 채널을 순차 조회해 연결된 센서와 통신 가능 상태를 교정 전에 확인
  • 사용자가 교정용 목표 CO₂ ppm과 측정 시간을 설정하고 기준 가스 주입 중 수집한 센서값의 평균 계산
  • 평균 측정 ppm과 목표 ppm의 차이를 기준으로 채널별 보정 오프셋을 산출해 센서에 전달
  • 각 목표 ppm 구간의 오프셋을 적용한 뒤 최종 측정 결과를 허용 범위와 비교해 양품·불량 판정
  • 채널별 목표값·평균값·오프셋·판정 결과를 CSV로 저장해 이후 교정 작업과 이력 관리에 활용
PROJECT 09PRODUCT & MANUFACTURING

CMA Sensor Check

제품 센서 통합 점검 도구

최대 10개 센서의 연결 상태와 측정값, 배터리 정보를 한 화면에서 확인하는 제품 검수용 프로그램입니다.

MY ROLE자사 제품 센서 점검 · 측정 프로그램 개발
WHAT I BUILT

제품 프로토콜로 연결된 센서의 종류, 측정값, 단위와 배터리 잔량을 읽어 목록과 실시간 차트에 표시했습니다. Snapshot·Measure·Full 모드를 구분하고 측정 시작과 정지 흐름을 구성해 다수 센서의 기능 검수를 빠르게 수행할 수 있도록 했습니다.

TECH STACK
C# .NETSerialProduct ProtocolReal-time Chart
주요 기능 자세히 보기
FEATURE DETAILS
  • 제품 프로토콜 응답을 센서 번호·종류·측정값·단위·배터리 정보로 파싱
  • Snapshot과 연속 Measure, 전체 센서 측정 모드를 분리해 검수 목적에 맞게 실행
  • 최대 10개 센서의 상태와 실시간 측정 데이터를 목록과 차트에 동기화
PROJECT 10PRODUCT & MANUFACTURING

Multi-Sensor Calibration

KSH7330·7360 다채널 교정

제품별 다수 센서의 온도·습도·CO₂ 값을 확인하고 히팅·교정·판정 과정을 자동화한 생산 검증 프로그램입니다.

MY ROLE자사 제품별 교정·검증 프로그램 개발
WHAT I BUILT

KSH7330과 7360 제품군의 센서를 동시에 연결해 채널별 측정값과 상태를 관리했습니다. 센서 히팅과 기준값 교정, 진행률, 성공·실패 판정과 결과 표시까지 생산 작업 순서에 맞춰 구현했습니다.

TECH STACK
C# WinForms.NET FrameworkSerial / RS485Product Protocol
주요 기능 자세히 보기
FEATURE DETAILS
  • 제품별 통신 패킷을 해석해 각 채널의 온도·습도·CO₂ 측정값과 연결 상태를 표시
  • 교정 전 센서 히팅과 안정화 시간을 제어하고 기준 CO₂ 값에 따라 교정 명령을 순차 실행
  • 채널별 응답과 허용 범위를 비교해 성공·실패를 색상과 결과 데이터로 제공
04 / MOBILE & LEARNING

모바일 · 교육

Figma 기반 UX/UI 설계부터 프론트엔드 구현과 개발 일정 관리까지 맡아, 무선 센서와 실험 콘텐츠를 일관된 모바일 학습 경험으로 연결했습니다.

1 PROJECTS
PROJECT 06MOBILE & LEARNING

Science# for iOS

무선 과학실험 센서 앱

온도·압력·빛·전도도·CO₂ 등 다양한 무선 센서를 연결하고 측정값을 그래프와 실험 콘텐츠로 제공하는 iOS 앱입니다.

MY ROLEiOS 프론트엔드 · 개발 일정 관리 · UX/UI 설계
WHAT I BUILT

Science# iOS 보조학습 앱의 프론트엔드 개발과 일정 관리를 담당했습니다. 데스크탑의 1차 UX/UI와 리뉴얼 Figma를 기반으로 센서 연결, 측정, 그래프와 실험 콘텐츠로 이어지는 사용자 흐름을 설계하고 화면에 구현했습니다.

TECH STACK
iOSFigmaUX/UIBluetooth UIData VisualizationSchedule Management
주요 기능 자세히 보기
FEATURE DETAILS
  • Science# 1차 UX/UI와 리뉴얼 Figma를 제작·관리하고 화면 구조, 컴포넌트와 주요 사용자 흐름 정의
  • 프론트엔드 작업 범위와 수정 요청을 화면 단위로 정리하고 구현 우선순위와 개발 일정 관리
  • Bluetooth 센서의 검색·연결·측정 상태가 사용자에게 명확하게 전달되도록 상태별 인터페이스 구성
  • 센서 측정값, 단위와 실시간 그래프를 학습자가 쉽게 비교할 수 있도록 정보 위계와 시각화 UX 설계
  • 실험 콘텐츠 탐색부터 센서 선택과 측정까지 이어지는 학습 동선을 iOS 화면으로 구현
05 / AI-ASSISTED DEVELOPMENT

AI 활용 개발 프로세스

요구사항을 바로 코드나 화면으로 생성하지 않고, 개발 구조와 UI 설계를 각각 Markdown 산출물로 구체화합니다. 확정된 문서만 AI와 Figma의 입력으로 사용해 구현 기준을 일관되게 유지했습니다.

DOCS → DESIGN → BUILD
TRACK 01

개발 구조·기능 구현

시스템 구조와 연동 규칙을 먼저 정의한 뒤 기능 단위로 AI를 활용합니다.

STEP 01

전체 구조를 먼저 정의

시스템의 목적, 계층별 책임과 전체 데이터 흐름을 문서화해 AI가 프로젝트의 경계를 먼저 이해하도록 구성했습니다.

README.mdARCHITECTURE.mdHIGH_LEVEL_ARCHITECTURE.mdSYSTEM_DIAGRAM.mdAI 활용 · 기존 코드와 요구사항을 분석하고 시스템 구성요소와 폴더별 책임을 정리
STEP 02

외부 연동 규칙을 명세

백엔드의 요청·응답 DTO와 MQTT 토픽·메시지 형식을 별도 문서로 고정해 프론트 구현 시 임의 해석을 줄였습니다.

BACKEND_API_SPEC.mdBACKEND_API_SPEC_DETAIL.mdMQTT_PROTOCOL.mdAI 활용 · API 목록과 브로커 규격을 비교해 Dart 모델, Repository와 메시지 매핑 기준 생성
STEP 03

기능별 BLoC 설계

화면마다 Event·State·Repository 의존성과 예외 흐름을 먼저 작성하고, 큰 기능을 구현 가능한 단위로 분해했습니다.

dashboard_bloc_design.mdSetting_Sensor_bloc_design.mdSystem_Setting_Auth_bloc_design.mdAI 활용 · 기능 요구사항을 이벤트와 상태 전이로 변환하고 누락된 로딩·오류·권한 흐름 검토
STEP 04

문서 단위로 구현 요청

한 번에 전체 앱을 생성하지 않고, 확정된 설계 문서와 관련 파일만 컨텍스트로 제공해 Model → Data → BLoC → UI 순서로 구현했습니다.

Model → RepositoryEvent → State → BLoCWidget → ScreenAI 활용 · 각 단계의 입력 문서와 수정 대상 파일을 제한해 기존 구조를 보존하며 코드 작성
STEP 05

실행 검증 후 문서 갱신

컴파일과 실제 데이터 흐름을 확인하고 API·MQTT 예외, 화면 상태 불일치를 수정한 뒤 변경된 구조를 다시 문서에 반영했습니다.

Build & AnalyzeRuntime CheckDocument UpdateAI 활용 · 오류 원인과 영향 범위를 분석하고 최소 수정안을 적용한 뒤 설계와 코드의 차이를 재점검
TRACK 02

UI/UX 설계·제작

PRD에서 화면 명세까지 설계 근거를 단계적으로 좁힌 뒤 Figma UI를 제작하고 개선합니다.

UI STEP 01

제품 요구사항 정의

제품의 목적, 사용자, 핵심 기능, 사용 시나리오와 제약 조건을 먼저 정리해 UI 판단의 기준을 만들었습니다.

PRD.mdAI 활용 · 초기 요구사항과 이해관계자 요청을 분류하고 누락·충돌 항목을 검토해 PRD 초안 작성
UI STEP 02

공통 레이아웃 구조 설계

PRD를 기반으로 내비게이션, 헤더, 콘텐츠 영역, 공통 컴포넌트와 반응형 원칙을 정의했습니다.

COMMON_LAYOUT.mdPRD.mdAI 활용 · 반복되는 화면 요소와 정보 위계를 찾아 공통 레이아웃 및 컴포넌트 규칙으로 구조화
UI STEP 03

전체 화면 목록 작성

PRD의 기능과 공통 레이아웃을 대조해 필요한 화면, 팝업, 상태 화면과 진입 경로를 목록화했습니다.

SCREEN_LIST.mdPRD.md + COMMON_LAYOUT.mdAI 활용 · 기능 요구사항을 화면 단위로 변환하고 정상·빈 화면·로딩·오류 상태의 누락 여부 확인
UI STEP 04

화면별 명세 구체화

화면 목록의 각 항목을 목적, 구성요소, 데이터, 사용자 액션, 상태 변화와 예외 흐름까지 상세화했습니다.

SCREEN_SPEC_[화면명].mdSCREEN_LIST.mdAI 활용 · 화면별 요구사항을 컴포넌트·인터랙션·데이터·상태 기준으로 분해해 명세 초안 생성 및 검토
UI STEP 05

Figma 1차 UI 제작

화면 명세, PRD와 공통 레이아웃 문서를 함께 기준으로 사용해 Figma에서 전체 화면의 1차 UI를 제작했습니다.

PRD.mdCOMMON_LAYOUT.mdSCREEN_SPEC_*.mdFIGMA v1AI 활용 · 화면 명세를 바탕으로 콘텐츠 우선순위, 컴포넌트 상태와 UI 카피를 정리해 Figma 제작 기준 제공
UI STEP 06

세부 검토·UI 완성

1차 UI를 실제 사용 흐름과 요구사항에 맞춰 검토하고 간격, 정보 위계, 상태 표현과 인터랙션을 반복 수정했습니다.

FIGMA REVIEWREVISION NOTESFINAL UIAI 활용 · PRD·화면 명세와 Figma 결과의 불일치를 점검하고 수정 목록과 우선순위를 정리
13+FIELD PROJECTS
80MAX. CHANNELS
4PLATFORM TYPES

COMMUNICATION · ENGINEERING · PRODUCT
ONE CONNECTED PERSPECTIVE

OPEN TO NEW OPPORTUNITIESSOFTWARE DEVELOPER

LET'S WORK
TOGETHER.

PHONE010-2996-8234EMAILbonseok8234@gmail.com