Seokryang.dev

Frontend Developer Portfolio / 2026

함께 방향을 맞추고더 나은 사용자 경험을 구현합니다.

기획자, 디자이너, 백엔드 개발자와 요구사항을 구체화하고, 사용자와 팀 모두가 이해하기 쉬운 화면과 구조를 만드는 프론트엔드 개발자 위석량입니다.

경력 보기srw0901@gmail.com

01.

About Me

Role
Frontend Developer
Location
Seoul

React와 Next.js를 중심으로 관리자 CMS와 사용자 페이지를 개발해 왔습니다. 특히 장기간 운영한 미디어 시스템에서는 납품처마다 달라지는 요구사항을 템플릿 구조로 정리하며 유지보수성과 확장성을 함께 고민했습니다.

SK Planet과의 API 연동부터 공공기관 방송 서비스, 법원TV STT 기능, 소아·청소년 멘탈케어 앱까지 다양한 프로젝트에 참여했습니다. 백엔드 개발자와 프로젝트 관계자들의 요구사항을 화면과 기능으로 구체화하며 웹과 모바일의 사용자 경험을 완성해 왔습니다.

4년Frontend Experience
4개Production Projects
3개Released Mobile Apps

02.

Experience

(주)이누씨

2021.11 - 2025.10

부서
개발팀
직책
대리
역할
Frontend Developer

SKB(SK Broadband) 테스트 자동화 시스템 추가개발건 프론트엔드 개발

Frontend Developer

2021.12 ~ 2022.02

인터넷 모뎀의 원격 테스트와 펌웨어 업데이트 과정을 운영자가 단계별로 관리하는 자동화 시스템 화면 API 연동 작업

연계 회사SK Planet
주요 기술
#React#styled-components#JavaScript
납품처
SK Broadband
  • SK Planet 백엔드 개발자와 API 명세 및 예외 흐름을 조율하고 관리자 UI에 연동
  • 설정, 펌웨어 업데이트, 단계별 원격 테스트 화면 API 연동

사내 방송 미디어 시스템 솔루션(SEDN V2) 개발 및 유지보수

Frontend Developer

2022.03 ~ 2024.10

이누씨의 솔루션, SEDN V2의 관리자 페이지 및 사용자 페이지 프론트엔드 개발

링크
소개 페이지데모 페이지
주요 기술
#React#Next.js#Redux#Redux-Saga#styled-components#JavaScript
납품처
국가과학기술연구회(NST) 출연(연) 법정교육TV(내부망)광주 광산구청완주군의회인천 미추홀구청한국지능형교통체계협회(ITS) 영상분석센터
  • CMS와 사용자 페이지를 함께 개발하며 운영 설정이 실제 서비스 화면으로 이어지는 흐름을 구현
  • 납품처별 화면 차이를 템플릿 설정으로 구조화해 공통 코드와 커스텀 요구사항을 분리
  • CMS에서 템플릿을 변경하면 사용자 페이지가 해당 구성으로 렌더링되도록 상태와 UI를 연결
  • 백엔드 개발자와 협업해 AI 기반 영상 자막 추출 기능을 관리자 및 사용자 페이지에 연동
  • 데모 환경에서는 환경변수와 DB 설정이 필요한 일부 기능이 제한될 수 있음

법원도서관 법원TV 방송 페이지내 STT(Speech To Text) 기능 연동

Frontend Developer

2024.11 ~ 2025.02

법원TV 영상 페이지 기능 커스텀 프론트엔드 개발

연계 회사법원도서관
주요 기술
#JSP#HTML#CSS#JavaScript
납품처
법원도서관
  • 화면 UI 개발 및 기능 개발
  • 법원TV 방송 페이지내 영상에 STT 기능 API 연동

Remind (소아, 청소년 디지털 멘탈케어 앱)

Frontend Developer

2025.03 ~ 2025.10

아이·부모·상담사 앱 3종의 주요 기능을 개발하고 앱스토어 배포 과정까지 담당했습니다.

연계 회사서울대학교병원 소아청소년정신과(홍순범 교수)
링크
소개 페이지
iOS
리마인드 미(아이앱)리마인드 패밀리(부모앱)리마인드 프로(상담사앱)
Android
리마인드 미(아이앱)리마인드 미(부모앱)
주요 기술
#React-Native Expo#Redux#Redux-Saga#styled-components#JavaScript
  • React Native Expo 기반으로 앱 3종의 프론트엔드 기능 개발
  • 상담사, 부모, 아이 앱 간의 데이터 연결 및 권한 흐름 처리
  • 복약 등록 및 푸시 알림 기능
  • 워크북 처방 및 수행 기능 API 연동
  • 걸음수 데이터 등 헬스 데이터 접근 기능 개발
  • 아이 앱의 지식 쇼츠 영상 기능과 카카오 로그인 API 연동

Project Improvement

영상에서 오디오 파일을 추출, 텍스트 자막으로 자동 전환하는 Speech to Text 기능

SEDN V2 미디어 시스템

영상의 음성 데이터를 STT(Speech to Text) 기능과 연동해 업로드된 영상의 자막을 자동 생성하여 콘텐츠 관리자의 업무 효율을 개선한 사례입니다.

  1. Problem

    업로드된 영상의 자막을 수동으로 등록하기 어려움

    SEDN 시스템은 지방 군의회, 시의회 등에 납품되는 경우가 많은데, 영상회의록 콘텐츠의 자막 제작에 많은 시간이 소요된다는 의견이 있었습니다.

  2. Approach

    OpenAI에서 개발한 오픈소스 Whisper 자동 음성 인식 모델을 개발팀에 제안

    백엔드 개발자와 협력하여 Whisper 모델을 활용해 영상에서 오디오를 추출하고, 추출된 오디오를 텍스트로 변환하는 STT 기능을 구현했습니다.

  3. Outcome

    영상콘텐츠의 자막 등록 과정 간소화 및 AI 자동화

    콘텐츠 관리자가 영상 업로드 후 자막 등록시 자동으로 영상에서 자막을 추출하여 생성되도록 개선했습니다.

1 / 2
관리자 페이지 영상 STT 추출 화면
관리자 페이지 영상 STT 추출 화면
사용자 페이지 영상과 자막 연동 화면
사용자 페이지 영상과 자막 연동 화면
AI 자막 생성자막 등록 방식
Whisper음성 인식 모델
수동 → 자동자막 등록 간소화

STT 기능은 Whisper 모델을 활용한 오픈소스 기반으로 구현되었으며, 납품 서버에 별도 GPU가 필요합니다. 데모 환경에서는 일부 기능이 제한될 수 있습니다.

03.

Skills

Core

React.jsNext.jsJavaScriptHTML5CSS3

State & Async

ReduxRedux-Saga

Styling & Tooling

styled-componentsGitESLintPrettier

04.

Education & Certificates

Education수료

Full Immersive 30기 프론트엔드 개발 학습 과정

코드스테이츠 부트캠프

2021.05 - 2021.10

HTML, CSS, JavaScript 기초부터 React 기반 화면 구현까지 실습 중심으로 프론트엔드 개발에 필요한 기본기를 학습했습니다.

  • JavaScript DOM 조작 및 이벤트 처리 학습
  • React 컴포넌트 구조와 상태 관리 기초 학습
  • 웹 페이지 제작 실습
  • 팀 프로젝트를 통한 웹 서비스 개발 경험
#HTML5#CSS3#JavaScript#React#node.js#Git#REST API
Education졸업

경제학 전공

명지대학교

2009.03 - 2015.08

    05.

    좋은 제품을 함께 만들 준비가 되어 있습니다.

    채용, 협업, 프로젝트 피드백 모두 환영합니다.

    이메일 보내기