서승표

왜

형식이 제각각인 공고문을 사용자 프로필과 비교해 지원 가능 여부와 판정 이유, 직접 확인할 조건, 제출 항목을 함께 보여주는 것이 목표였습니다.

무엇을 어떻게

JunctionX Korea 2026 해커톤 Upstage 트랙에 2인 팀으로 출품하며 풀스택 개발을 맡았습니다.

• PDF, HWP, 포스터 이미지, 웹 페이지처럼 형식이 제각각인 공고문을 Upstage Studio 에이전트로 읽어, 접수 기간, 자격 조건, 제출 체크리스트가 담긴 공고 카드로 정리해 저장했습니다.
• 요강 중간에 묻힌 학년, 학적, 나이, 전공 조건을 프로필과 대조하는 판정 규칙으로 지원 가능, 자격 미달, 확인 필요를 나눴습니다. 성적이나 자격증처럼 자동으로 가리기 어려운 조항은 확인할 항목으로 따로 보여줍니다.
• 공고 분석과 추천처럼 시간이 걸리는 AI 처리를 기다리는 동안 무엇을 하고 있는지 보이도록 진행 단계와 중간 결과, Solar의 추론을 화면에 바로 보여줬습니다. 새로고침해도 진행 중인 분석을 이어서 볼 수 있게 했습니다.
• 확인이 필요한 조항은 공고 상세에서 원문 파일과 질문을 담은 채 문서 대화로 넘겨, 애매한 조건을 바로 물어볼 수 있게 했습니다. 대화에서는 Solar가 문서 분석 도구를 골라 쓰며 답합니다.

따라서

해커톤 기간(2026-08-21~23) 안에 공고 등록부터 지원 가능 여부 판정, 확인할 항목, 원문 대화까지 이어지는 사용 흐름을 구현했습니다.

기술: Next.js, TypeScript, Tailwind CSS, Vercel AI SDK, Upstage Solar, Document Parse, Information Extraction, Studio Agents, Supabase

GitHub: 웹과 백엔드

왜

선택 인자가 세 개 이상인 약속에서 마지막 인자 이름이 약속 이름의 일부로 잘못 읽혀, 정상적인 호출이 실패하는 파싱 오류가 있었습니다.

무엇을 어떻게

파싱 오류를 수정해 원본 저장소에 PR #192로 기여했습니다.

• 선택 인자가 세 개 이상인 약속(함수)은 마지막 인자 이름이 약속 이름의 일부로 잘못 읽혀 호출할 수 없었습니다. 인자 목록을 읽은 뒤 정해진 칸 수가 아니라 닫는 괄호까지 넘어가도록 고쳐 정상적으로 호출되게 했습니다.

따라서

메인테이너가 고칠 때까지 실패로 남겨 둔 인자 개수 조합 테스트가 이 수정으로 통과했습니다.

기여 PR 보기

GitHub: 원본 저장소

왜

판매자는 월별 미션 달성 현황을 간단히 확인하고, 운영자는 미션과 인증 기록을 관리할 수 있어야 했습니다. 가입 없이 닉네임으로 조회하는 편의와 공개 화면의 닉네임 보호를 함께 다뤘습니다.

무엇을 어떻게

공개 조회와 관리자 기능을 개발했고, 일부 미션 기능은 AI 코딩 도구에 요청해 통합했습니다.

• 판매자가 가입 없이 카페 닉네임만 입력하면 자신의 월별 미션 성공 이력을 스탬프 카드로 확인하는 공개 화면을 만들었습니다. 다른 달로 옮겨도 검색한 닉네임과 결과가 유지되게 했습니다.
• 운영자가 미션 회차와 인증 기록, 판매자별 리스팅 수를 직접 입력하고 고치는 관리자 화면을 만들었습니다. 9월 리스팅 미션은 입력한 리스팅 수가 목표에 닿으면 성공 기록이 자동으로 반영되게 했습니다.
• 9월 리스팅 미션에 가장 빨리 목표를 인증한 순위와 리스팅 수 순위를 만들었습니다. 공개 순위와 개인 조회가 서로 다른 기준으로 매기던 인증 순위는 하나의 규칙으로 맞추고, 운영자가 확정한 순서를 우선 적용했습니다.
• 달마다 다른 성공 조건을 반영했습니다. 10월의 '하위 미션 중 하나만 달성해도 성공' 방식은 AI 코딩 도구(Devin)로 구현해 통합했고, 11월에는 광고 권한이 없는 판매자의 대체 경로를 더하되 어느 경로로 성공했는지는 관리자에게만 보이게 했습니다.

따라서

• 2026년 8~10월 판매자 103명의 승인된 미션 인증 199건이 이 대시보드에 기록돼 공개 화면에 반영됐습니다(2026년 11월 3일 운영 DB 기준, 서비스 전체 기록).
• 9월 리스팅 미션에서는 관리자가 입력한 판매자 63명의 상품 등록 실적 14,412건이 대시보드에 집계됐습니다(2026년 11월 3일 운영 DB 기준).
• 공개 화면과 그 데이터에는 판매자의 가린 닉네임만 나가고 공개일 전 미션 내용은 빠지게 됐습니다. 운영자는 공개일을 바꾸지 않고도 샘플 데이터로 공개 전 화면을 미리 점검할 수 있습니다.

기술: Next.js, React, TypeScript, Tailwind CSS, Supabase, PostgreSQL

GitHub: 웹과 백엔드 (비공개)

왜

축제 부스의 여러 운영진이 테이블 주문, 입금 확인, 서빙 상태를 함께 관리하고, 손님은 앱 설치나 로그인 없이 주문할 수 있는 POS를 목표로 했습니다.

무엇을 어떻게

기획부터 웹과 백엔드 개발, 배포까지 혼자 맡았습니다.

• 로그인 없이 주문받으면서도 위조한 QR이나 조작한 금액이 통하지 않도록, 테이블마다 발급한 QR이 맞을 때만 주문을 받고 금액은 서버가 상품 가격으로 계산하게 했습니다.
• 여러 부스가 한 서비스를 나눠 쓰도록 부스별 공간을 만들고, 다른 부스의 상품, 테이블, 주문은 보거나 바꿀 수 없게 데이터베이스 접근 정책으로 막았습니다. 플랫폼 관리자도 멤버가 아닌 부스 화면은 읽기 전용으로만 보게 했습니다.
• 운영진이 새로고침 없이 새 주문을 보도록 주문 보드를 실시간으로 갱신하고, 결제 모듈 없이 계좌이체로 받는 운영에 맞춰 입금 확인 전 주문은 서빙 처리를 거절하게 했습니다.
• 자정을 넘겨 영업하는 부스도 하루 매출을 영업일 단위로 보도록 마감 시각 기준 통계를 만들고, 테이블별 주문 합계와 이용 시간을 기록했습니다.

따라서

• 손님은 앱 설치나 로그인 없이 QR 스캔으로 주문하고, 대기 화면에서 입금과 서빙 진행을 확인하며 입금 전 주문은 직접 취소할 수 있게 됐습니다.
• 2026년 5월 Vercel 운영 환경에 배포했고, 검색에는 공개 페이지만 나오도록 관리 화면과 손님 주문 화면을 제외했습니다.

기술: Next.js, React, TypeScript, Tailwind CSS, shadcn/ui, Zustand, Supabase, Bun, Vercel

GitHub: 웹과 백엔드 (비공개)

왜

고객사별 키워드 뉴스를 정기적으로 모으고 검토한 뒤 월별 엑셀 보고 자료로 내보내는 흐름을 한 도구에서 처리하는 것이 목표였습니다.

무엇을 어떻게

관리자용 웹과 뉴스 수집, 검토, 보고서 생성 기능을 혼자 개발했습니다.

• 키워드를 등록해 두면 매일 오전 8시(한국 시간)에 네이버 뉴스를 모으도록 예약하고, 필요할 때는 관리자가 건수를 정해 바로 수집할 수 있게 했습니다.
• 다시 수집해도 같은 기사가 쌓이지 않게 키워드별로 이미 저장된 링크는 건너뛰고, 새 기사만 기사 페이지와 언론사 사이트를 읽어 매체명과 기자명을 채웠습니다.
• 연도를 고르면 게재월마다 시트를 나눈 보고용 엑셀을 내려받게 하고, 기사마다 게재날짜, 매체명, 기자명과 원문 링크가 걸린 헤드라인을 채웠습니다.
• 업무 API마다 관리자 역할을 확인하고 로그인한 계정의 워크스페이스 조건을 걸어, API로 다른 워크스페이스 자료를 조회하거나 바꾸지 못하게 했습니다. 로그인한 누구나 계정 정보를 고쳐 소유자 권한을 얻을 수 있던 문제는 역할과 워크스페이스 값을 서버 전용 정보로 옮겨 막았습니다.

따라서

키워드 등록부터 수집, 기사 검토와 삭제, 월별 엑셀 내려받기까지 이어지는 관리자 흐름을 갖춰 2026년 4월 23일 운영 환경에 배포했습니다.

기술: Next.js, TypeScript, Supabase, Vercel

GitHub: 웹과 백엔드 (비공개)

왜

학생과 학부모가 강사와 수업 정보를 살펴본 뒤 카카오톡 상담으로 이어질 수 있도록, 강사 소개와 커리큘럼, 후기, 상담 동선을 한 페이지에 담는 것이 목표였습니다.

무엇을 어떻게

김희창 수학 브랜드 페이지의 디자인 구현과 개발, 배포를 혼자 맡았습니다.

• 수강을 고민하는 방문자가 소개에서 상담까지 이어 갈 수 있도록 강사 소개, 수강생 관리 방식, 커리큘럼, 성적 사례와 후기를 한 페이지에 담고 첫 화면과 페이지 끝에 카카오톡 상담 연결을 두었습니다.
• 휴대폰에서는 강사 사진을 글 뒤 배경으로, PC에서는 글 옆에 크게 두도록 첫 화면을 기기별로 따로 배치하고, 문구가 차례로 떠오르는 움직임을 넣었습니다.

따라서

마지막 수정본(2026-03-15)이 운영 환경에 배포됐고, 2026-11-04 확인 기준 공개 주소에서 강사 소개부터 카카오톡 상담 연결까지 그대로 동작합니다.

기술: Next.js, React, TypeScript, Tailwind CSS, Biome, Vercel

GitHub: 프론트엔드

왜

메가스터디 김희창 강사의 요청으로, 엑셀로 관리하던 학생과 과제, 시험과 재시험 기록을 웹으로 옮겼습니다. 관리 업무를 연결하면서 학생과 학부모도 자기 기록을 직접 확인할 수 있게 하는 것이 핵심 목표였습니다.

무엇을 어떻게

학원 관리 서비스의 기획과 디자인, 프론트엔드와 서버 개발을 혼자 맡았습니다.

• 엑셀로 관리하던 기록을 학생과 학부모도 직접 볼 수 있도록, 학생 계정으로 성적과 백분위 추이, 과제, 클리닉 출석, 재시험 일정을 확인하는 화면을 만들었습니다. 계정은 학생 등록 때 함께 만들어지고 본인 기록만 보입니다.
• 시험 점수를 입력하면 커트라인에 못 미친 학생을 자동으로 골라 버튼 한 번으로 재시험을 배정하고, 이후 진행 단계는 학원이 직접 정한 상태로 관리하게 했습니다.
• 재시험과 과제의 연기, 결석, 완료, 날짜 변경을 이력으로 남겨, 잘못 처리한 작업도 가장 최근 것부터 차례로 되돌릴 수 있게 했습니다.
• 이름과 점수, 석차, 재시험 예정일이 학생별로 채워지는 문자 템플릿을 만들어, 시험 결과와 재시험 안내를 여러 학생과 학부모에게 한 번에 보내게 했습니다.
• 여러 학원이 각자 쓸 수 있도록 학원마다 데이터와 구성원을 나누고, API의 로그인 여부와 역할 확인을 공통 함수로 모아 소유자, 관리자, 학생이 허용된 기능만 쓰게 했습니다.

따라서

• 보안 점검에서 나온 문제를 고쳐, 사용자가 수정할 수 있던 계정 정보로 역할이나 소속 학원을 바꿔 권한을 얻는 경로와 다른 학원 학생을 출석 기록에 넣는 요청을 막았습니다.
• 데이터베이스가 한 번에 1000건까지만 돌려줘 학원 전체 재시험, 과제, 캘린더 목록이 잘릴 수 있던 문제를 나눠 읽는 방식으로 고쳐, 기록이 많아도 빠짐없이 보이게 했습니다.

기술: Next.js, React, TypeScript, Tailwind CSS, shadcn/ui, TanStack Query, Jotai, Supabase, Solapi, Axiom, Biome, Bun, Vercel

GitHub: 웹과 백엔드

왜

Notion으로 관리하던 자산 업무는 문의나 수리가 필요할 때 담당자에게 연락해 처리하는 방식이었습니다. 바코드 도입에 맞춰 직원의 직접 요청과 상태 조회, 관리자의 빠른 현장 입력 경로가 필요했습니다.

무엇을 어떻게

아이디에스앤트러스트 현장실습에서 기존 Notion 데이터에 연결한 직원용 웹과 관리자용 모바일 앱을 혼자 개발했습니다.

• 자산 문의와 수리는 담당자에게 직접 연락해야 처리됐기 때문에, 직원이 웹에서 요청을 남기면 Notion에 티켓으로 저장되고 고유 링크에서 처리 상태와 담당자를 다시 확인할 수 있게 했습니다.
• 소프트웨어 라이선스 조회는 관리자가 발급한 1시간 유효 링크로만 열리게 하고, 서버가 위조나 만료 여부를 확인한 뒤에만 시리얼 번호와 등록 계정을 보여주게 했습니다.
• 자산 실사는 Notion에 등록한 실사 기간에만 열리게 했습니다. 직원은 자산번호로 등록 정보를 불러와 확인하거나 다르면 직접 입력해 제출하며, 이미 확인된 자산은 화면에서 다시 처리할 수 없고 같은 자산번호의 직접 입력은 서버가 거절합니다.
• 자산에 바코드 라벨을 도입하면서 빠르게 입력할 방법이 필요해, 관리자 앱에서 바코드를 스캔하면 자산이 바로 조회되고 고친 항목이 Notion에 저장되게 했습니다.

따라서

• 직원용 웹을 Vercel 운영 환경에 배포했고, 배포 기록상 마지막 commit(2025-12-10)까지 배포에 성공했습니다.
• 기기에 저장한 Notion 키로 Notion을 부르던 관리자 앱을 직원용 웹 서버 API만 거치도록 바꿔, 앱에 Notion 키를 두지 않게 했습니다.

기술: Next.js, React Query, Jotai, Tailwind CSS, Notion API, Vercel, Flutter, GetX

GitHub: 직원용 웹과 백엔드 (비공개), 관리자 앱 (비공개)

왜

Notion을 직접 조회할 때의 지연과 API 호출 제한, 약 한 시간 뒤 만료되는 이미지 링크를 고려해야 했습니다. 콘텐츠는 Notion에서 관리하면서 방문 요청에 응답하고 원본 데이터를 주기적으로 갱신하는 구조가 필요했습니다.

무엇을 어떻게

LUNA 소개 사이트의 프론트엔드와 Notion 콘텐츠를 전달하는 API 서버를 개발했습니다.

• Notion 원본 데이터와 이미지 URL을 30분마다 새로 받아 캐시하는 API 서버를 만들고, 방문 요청에는 저장된 결과로 응답하게 했습니다.
• 홈, 멤버, 프로젝트, 수상, 자주 묻는 질문 화면을 다시 만들고, 좁은 화면에서는 배치를 바꾸거나 페이지를 비율대로 줄여 휴대폰에서도 볼 수 있게 했습니다.
• Notion에 직접 적어 고치던 대회 수, 프로젝트 수, 누적 상금을 고정 기준값에 등록 항목 수와 상금 합계를 더해 계산하도록 바꿔, 새 수상이나 프로젝트를 올리면 숫자도 함께 바뀌게 했습니다.

따라서

리뉴얼한 사이트를 2025년 3월 3일 운영 환경에 배포했고, 2026년 8월까지 같은 저장소에서 수정 배포를 이어 갔습니다.

기술: Next.js, Tailwind CSS, React Query, Jotai, Notion API, SQLite, Vercel

GitHub: 프론트엔드, 백엔드

왜

가지고 있지 않은 재료를 대체하고, 요리 중 궁금한 내용을 묻고, 레시피를 이미지로 확인하며 상호작용할 수 있는 요리 앱을 만들고자 했습니다.

무엇을 어떻게

Software FUTURE&DREAM Challenge 2024에 3인 팀으로 출품하며 기획과 디자인에 참여하고 모바일 앱과 백엔드를 개발했습니다.

• 레시피를 눈으로 따라갈 수 있도록 AI가 재료와 조리 단계에 완성 요리 이미지까지 함께 만들게 하고, 단계나 재료를 누르면 자세한 설명과 이미지를 펼쳐 보여 주게 했습니다.
• 가지고 있지 않은 재료는 '다른 식재료로 바꾸기'를 누르면 AI가 대체 재료와 맛의 변화를 알려 주고, 레시피의 재료 목록도 바뀐 재료로 고쳐 보이게 했습니다.
• 레시피를 보다 생긴 추가 질문은 '요리 비서 디닝' 채팅에서 바로 할 수 있게 하고, AI가 그 레시피의 재료와 조리 과정을 바탕으로 답하도록 했습니다.
• 냉장고 사진을 찍으면 AI가 찾은 재료 이름을 입력 양식에 채워 주고, '냉장고에 있는 식재료만 사용하기'를 고르면 저장한 재료만 쓰도록 AI에 요청하게 했습니다.

따라서

레시피 검색부터 재료 바꾸기, 요리 질문, 단계별 이미지 확인까지 앱을 벗어나지 않고 이어지도록 주요 화면을 모두 실제 서버 기능에 연결해 완성했습니다.

기술: Flutter, GetX, FastAPI, MongoDB, OpenAI API, AWS EC2, Nginx, Docker, GitHub Actions

GitHub: 앱, 백엔드

왜

디미고인의 서비스 전환기에 학생들이 자주 쓰는 세탁, 잔류, 금요귀가 신청에 집중한 가벼운 사용 경험이 목표였습니다. 앱스토어 심사 없이 수정 사항을 반영할 수 있는 웹앱으로 구성했습니다.

무엇을 어떻게

디자이너 1명과 함께 개발하며 프론트엔드 개발 전반을 맡고, 기존 디미고인 API에 신청 화면을 연결했습니다.

• 세탁기와 건조기 예약, 잔류, 3학년 금요귀가 신청 화면을 기존 디미고인 API에 연결하고, 신청이나 취소 뒤 상단 신청 현황을 다시 불러와 결과가 바로 보이게 했습니다.
• 잔류 좌석표에서는 학년과 성별에 맞는 빈 좌석만 고르게 하고, 잔류 신청자는 외출과 그날 급식 취소를 한 번에 신청할 수 있게 했습니다.
• 앱스토어 심사 없이 휴대폰에서 쓸 수 있도록, 홈 화면에 추가하면 주소창 없이 앱처럼 열리게 설정했습니다.

따라서

2024년 2학기에 실제 배포돼 학생들이 사용했고, 학교 Google 계정으로 로그인하면 한 페이지에서 세탁, 잔류, 3학년 금요귀가를 신청하고 취소할 수 있었습니다.

기술: Next.js, React, JavaScript, Tailwind CSS, PWA

GitHub: 프론트엔드 (비공개)

왜

시각장애인이 반찬의 종류와 위치를 음성으로 확인하는 식사 도우미가 목표였습니다. 객체 인식 모델을 Arduino Nano에서 실행하기에는 자원이 부족해, 사진을 서버에서 분석하는 방식이 필요했습니다.

무엇을 어떻게

4인 팀에서 모바일 앱과 백엔드 등 소프트웨어 개발을 맡았습니다.

• 장치의 소형 보드(Arduino Nano)로는 YOLO 인식 모델을 돌리기에 자원이 부족해, 밥상 사진을 서버에서 OpenAI 이미지 분석으로 처리하고 음식 이름과 몇 시 방향을 돌려주는 API로 인식 방식을 바꿨습니다.
• 서버에 저장한 사진 주소를 OpenAI가 읽지 못하는 오류가 나자 사진 데이터를 요청에 직접 담아 보내도록 바꿔, 서버가 사진 파일을 따로 보관하지 않고 요청 한 번으로 분석하게 했습니다.
• 화면을 보지 않아도 결과를 알 수 있도록 앱이 인식 결과를 '김치는 3시 방향에 있습니다'처럼 한국어 음성으로 읽어 주고, 목록에서 음식을 누르면 그 위치만 다시 읽어 주게 했습니다.
• 사진에서 음식을 찾지 못하면 서버가 미인식 응답을 돌려주고 앱이 '음식을 찾을 수 없습니다'라고 말하게 해, 인식 결과가 없을 때도 음성 안내가 나오도록 했습니다.

따라서

안경과 숟가락에 다는 장치 없이도 휴대폰 카메라만으로 밥상 사진 촬영부터 반찬 위치 음성 안내까지 이어지는 사용 흐름을 앱과 서버에 구현했습니다.

기술: Flutter, GetX, FastAPI, OpenAI API, Arduino

GitHub: 앱, 백엔드

왜

일상의 성장 기록을 시각화하고 주변 사람들과 공유하는 서비스 아이디어를 제안하는 프로젝트였습니다.

무엇을 어떻게

Junction Asia 2024 해커톤 Apple Developer Academy 트랙에 5명 팀으로 참가해, 트랙 요구사항에 따라 Figma 프로토타입으로 서비스를 기획했습니다.

따라서

Figma 프로토타입 형태로 서비스 구상을 구체화했습니다.

기술: Figma

왜

청소년 창업가 네트워킹 행사의 소개와 일정, 참가 팀 정보를 한곳에서 안내하고 참가 신청으로 연결해야 했습니다. 준비 과정에서 확정되는 정보를 공개 뒤에도 갱신할 수 있어야 했습니다.

무엇을 어떻게

Link Demo Day 2024 웹사이트를 혼자 개발하고 행사 전까지 유지보수했습니다. 행사에서는 디미페이 개발과 운영 경험을 발표하는 연사로도 참여했습니다.

• 행사 소개부터 일정과 참가 신청까지 한 페이지에 차례로 담고, 상단 메뉴로 주요 영역에 바로 이동할 수 있게 했습니다.
• 휴대폰에서는 일정표처럼 가로로 배치된 영역을 세로로 쌓고 글자 크기를 따로 줄여, 좁은 화면에서도 위에서 아래로 읽을 수 있게 했습니다.
• 공개 뒤에는 행사 준비 상황에 맞춰 신청 버튼을 실제 참가 신청서에 연결하고, 일정과 장소, 참가 동아리, 후원사, 연사 정보가 정해질 때마다 사이트에 반영했습니다.

따라서

2024년 8월 1일 공개부터 행사 11일 전인 11월 5일까지 올린 수정이 모두 운영 환경에 배포돼, 방문자는 갱신된 행사 정보를 보고 사이트에서 참가 신청서로 이동할 수 있었습니다.

기술: Next.js, React, TypeScript, Tailwind CSS

GitHub: 프론트엔드

왜

식품 포장에 적힌 날짜를 손으로 입력하는 과정을 줄이고, 소비기한이 임박한 품목을 먼저 확인할 수 있는 기록 도구가 목표였습니다.

무엇을 어떻게

로그인과 포장 날짜 인식, 소비기한 기록과 조회 화면을 연결한 모바일 앱을 개발했습니다.

• 카메라를 포장에 대면 점으로 구분된 날짜 표기를 자동으로 읽어, 사용자가 날짜를 직접 입력하지 않고 확인과 품목 이름 입력만으로 저장하게 했습니다.
• 목록은 소비기한이 이른 순서로 정렬하고 홈에는 가장 이른 세 품목을 보여 줘, 지났거나 임박한 품목을 먼저 확인하게 했습니다.
• Google 계정으로 로그인하게 하고, 항목 저장과 조회를 로그인한 사용자 기준으로 처리해 각자 자기 목록만 보이게 했습니다.

따라서

로그인, 포장 촬영 등록, 소비기한 순 목록, 홈 요약이 이어지는 기록 흐름을 한 앱에 구현했습니다.

기술: Flutter, Dart, GetX, Supabase, Google ML Kit

GitHub: 앱

왜

일상적인 참여를 기부로 연결하는 서비스를 목표로 시작한 프로젝트로, 모바일 앱의 기본 사용 흐름을 프로토타입으로 구체화했습니다.

무엇을 어떻게

2인 팀에서 모바일 앱 개발을 맡아 로그인, 홈, 프로필의 기본 흐름을 만들었습니다.

• 로그인하지 않은 사용자는 로그인 화면으로 보내고, Google 계정 로그인을 Supabase 인증에 연결해 로그인하면 바로 홈으로 들어가게 했습니다.
• 하단 탭으로 세 화면을 오가는 홈 화면 틀을 만들고, 홈 탭에는 카드를 옆으로 넘겨 보는 화면을 넣었습니다. 다른 두 탭과 카드 내용은 아직 자리표시와 예시 이미지입니다.
• 로그인한 사용자가 출시용 빌드로 앱을 열면 앱 시작 광고가 뜨도록 Google AdMob(모바일 광고)을 연결했습니다.

따라서

로그인과 홈 화면 진입, 앱 시작 광고 연동을 갖춘 초기 프로토타입을 구성했습니다.

기술: Flutter, Dart, GetX, Supabase, Google AdMob

GitHub: 앱

왜

학생들이 관심사와 활동 이력으로 팀원을 찾고 교내 동아리와 프로젝트 팀을 살펴보는 학생 네트워킹 서비스를 제안했습니다.

무엇을 어떻게

제5회 한국코드페어 해커톤에 3인 팀으로 출품하며 웹 프론트엔드와 백엔드 기반 개발을 맡았습니다.

• 팀 찾기, 팀 상세, 학생 프로필, 대외활동 정보 디자인 시안 이미지를 웹 페이지로 옮기고, 공통 메뉴와 팀 목록에서 상세, 이메일 보내기로 이어지는 클릭 흐름으로 PC와 휴대폰에서 화면 사이를 오갈 수 있게 했습니다.
• 학생 한 명이 여러 기술, 수상, 동아리, 프로젝트 팀과 이어지도록 데이터베이스 구조를 설계하고, 학생, 기술, 수상 목록을 돌려주는 서버 API를 만들었습니다.
• main 브랜치에 올리면 백엔드 Docker 이미지를 빌드하고 서버 컨테이너를 새 이미지로 바꾸도록 GitHub Actions를 구성해, 이후 올린 변경마다 몇 분 안에 새 이미지가 자동으로 만들어졌습니다.

따라서

2023-10-26~28 올린 프론트엔드 변경이 모두 Vercel 운영 환경에 배포돼, 마지막 화면 수정까지 공개 웹 주소에서 열어 볼 수 있었습니다.

기술: Next.js, Flask, MySQL, Docker, GitHub Actions

GitHub: 프론트엔드, 백엔드

왜

조리 로봇 연동을 목표로, 사용자가 재료와 조리 방식을 블록으로 골라 요리 순서를 구성하는 경험을 프로토타입으로 보여주고자 했습니다.

무엇을 어떻게

Junction Asia 2023 해커톤 Jaka Robotics 트랙에 5인 팀으로 출품하고 모바일 앱 개발을 맡았습니다.

• 사용자가 조리 순서를 직접 짤 수 있도록 재료와 양, 조리 방식, 시간, 온도를 블록으로 골라 쌓는 레시피 편집 화면을 구현하고, 공유 코드 카드 화면까지 이어 레시피를 코드로 나누는 과정을 시연할 수 있게 했습니다.
• 앱을 시작할 때 언어, 채식 여부, 알레르기 재료를 차례로 고르는 안내 화면을 만들고, 고른 언어에 따라 안내 문구가 한국어나 영어로 바뀌게 했습니다.

따라서

설치 없이 브라우저에서도 휴대폰 화면 크기로 앱 흐름을 열어 볼 수 있는 웹 시연판을 만들었습니다.

기술: Flutter, Firebase

GitHub: 앱

왜

AI 요청문을 직접 쓰거나 긴 글을 입력하기 어려운 사용자도 질문에 답하는 방식으로 글의 초안을 만들 수 있도록 했습니다. 타자가 불편한 사용자를 위한 음성 입력과 큰 메뉴도 필요했습니다.

무엇을 어떻게

4인 팀의 첫 팀 프로젝트에서 모바일 앱 개발을 맡아 화면과 글쓰기 흐름 대부분을 구현했습니다.

• 요청문을 직접 쓰지 않아도 누구나 AI로 글을 쓸 수 있도록, 보도자료와 독서록 등 4가지 글마다 필요한 항목만 채우면 글 종류에 맞는 요청문으로 바꿔 초안을 받는 입력 화면을 만들었습니다.
• 타자가 불편한 사용자를 위해 질문을 한 화면에 하나씩 보여 주고 마이크 버튼으로 답하는 단계별 음성 입력 화면을 만들었습니다. 팀원이 연결한 음성 인식을 4가지 글 모두에서 쓰도록 글 종류별 질문 문구를 나눴습니다.
• 첫 로그인 때 타자가 불편한지 묻고 그 답을 저장해, 접근성 모드에서는 메뉴를 한 줄에 하나씩 큰 글씨로 보여 주고 글 종류를 누르면 바로 음성 입력 화면으로 가게 했습니다.
• 같은 앱을 브라우저에서 실행되는 웹 버전으로도 만들고, 넓은 화면에서도 휴대폰 크기로 보이게 화면 틀을 맞췄습니다.

따라서

2023년 9월 앱 공지로 베타(9월 14일)와 정식 출시(9월 21일)를 알리고, README에 웹 주소와 Google Play 링크를 올렸습니다.

기술: Flutter, OpenAI API, Firebase, Speech to Text, TTS

GitHub: 앱