사용자 문제 정의 · AI 워크플로우 · 프론트엔드 구현
Baek Seung Hyun · Web Frontend Developer
사용자의 Pain Point를 정의하는 것부터 시작해, 이를 실제로 동작하는 서비스까지 끌고 가는 프론트엔드 개발자입니다. AI와 디지털 기술은 빠르게 실험하고 비교하는 도구로 활용하되, 최종적으로 무엇을 만들고 무엇을 덜어낼지는 사용성, 맥락, 비즈니스 가치를 기준으로 직접 판단합니다.
Seoul, South Korea
Framework
State · Data
Styling
Language
Tooling
철학과 경영학을 함께 공부하면서, 무언가를 만들기 전에 '이게 정말 풀어야 할 문제인지'와 '여기서 쓰는 말이 정확히 무엇을 가리키는지'를 먼저 따지는 습관이 생겼습니다. 철학에서는 개념을 정의하고 전제를 의심하는 법을, 경영에서는 사용자 가치와 우선순위를 판단하는 관점을 배웠고, 이 둘이 개발에서 '무엇을 만들고 무엇을 뺄지'를 정하는 문제 정의로 이어졌습니다.
처음에는 시각 디자인에 관심이 많았지만, 웹과 앱의 UX/UI를 접하면서 화면을 예쁘게 만드는 것보다 사용자가 어떤 흐름으로 움직이고 무엇을 필요로 하는지가 더 중요하다는 것을 알게 되었습니다. 그때부터 화면을 그리는 데서 멈추지 않고, 기획의 의도와 사용자의 맥락까지 이해해 실제로 동작하는 경험을 만드는 사람이 되고자 했습니다.
AI는 코드를 빠르게 짜는 도구로만 쓰지 않습니다. AI 이미지 변환을 실제 서비스에 붙여 프롬프트로 톤을 맞추고, Claude를 Writer·Codex를 Reviewer로 나눠 AI가 정리한 사실과 제가 직접 쓴 해석을 분리하는 워크플로우를 설계하고, 언어 모델의 구조를 코드 레벨로 따라가며 공부하는 방법 — 쓰고, 붙이고, 설계하고, 이해하는 단계를 차례로 거쳤습니다.
이 과정에서 AI가 없는 내용을 지어내지 않더라도 어조나 확신의 정도를 바꾸는 것만으로 제 해석을 왜곡할 수 있다는 것을 직접 확인했습니다. '말이 정확히 무엇을 가리키는가'를 따지던 훈련이 이 지점을 잡아내는 데 그대로 쓰였습니다. 그래서 AI를 쓰는 것과 별개로 뉴스 분류·TF-IDF·단어 임베딩 실습으로 텍스트 데이터가 모델에 들어가는 구조도 들여다봤고, 프론트엔드 구현력 위에서 사용자 문제를 AI를 포함한 서비스로 풀어내는 개발자가 되려 합니다.
2026
AI 캐릭터 이미지 기반 아바타 소개팅 웹 서비스. 실사진 노출 없이 AI 변환 이미지로 프로필 카드를 등록·조회하는 축제 기간 MVP 서비스.
AI 이미지 변환을 실제 서비스에 붙이고 프롬프트로 톤을 맞춰 축제 2일(오프라인 1일, 온라인 1일)간 운영했습니다. PG 결제 → 계좌이체 전환으로 출시 리스크를 줄여, 부스 당일 143명 가입·프로필 등록 전환율 44%(63명)를 만들었습니다.
2026
내 소비의 거품을 빼다. 지출을 기록할 때 '금액'뿐 아니라 '소비 당시의 상황'을 함께 남기고, 시간이 지난 후 그 소비의 효용을 다시 입력받아 소비의 맥락과 만족도를 분석 리포트로 보여주는 가계부 서비스.
하이브리드 앱의 상태·캐시·렌더링 문제를 구조로 해결하며, 0→1 세팅부터 배포·QA까지 5개 도메인을 담당했습니다.
2026
모두의 특별장학금, 가장 든든한 서포터. 특별장학금 신청 과정을 디지털로 전환하여 서류 제출부터 평가까지 편리하게 관리하는 숭실대학교 특별장학금 전용 웹 서비스.
여러 앱이 공유하는 코드의 일관성 문제를 모노레포·공용 패키지 7개·FSD 도메인 설계로 풀고, 파일 미리보기 3종 뷰어를 직접 구현했습니다.
AI를 빠르게 쓰는 것보다, 어디까지 맡기고 어디서 사람이 판단할지를 구조로 나누는 데 더 관심이 있습니다. 워크플로우를 설계하고, 원리를 학습하고, 도구별로 역할을 나누고, 그 방식을 팀에 전한 경험입니다.
AI 학습 자료를 Summary(AI가 정리한 사실)와 My Note(내가 직접 쓴 해석)로 분리하고, Claude를 Writer·Codex를 Reviewer로 나눴습니다. AI가 없는 내용을 지어내지 않아도 어조와 확신의 정도를 바꾸며 해석을 왜곡할 수 있다는 걸 확인하면서, AI가 할 일과 사람이 판단할 일을 구조로 나누는 방법을 정리했습니다.
AI를 블랙박스로만 쓰지 않으려고 GPT-2 구조를 코드 레벨로 읽었습니다. BPE 토크나이저, Causal Self-Attention, Transformer 블록과 텐서 흐름을 따라가며 이해했고, 생성된 코드를 쓰는 것보다 그 구조를 읽고 설명할 수 있는 것을 더 중요하게 봤습니다.
AI 바이브 코딩을 전제로 한 만우절 해커톤에서, 좋은 UX 원칙을 역으로 비튼 '의도적으로 불편한' 컴포넌트 라이브러리를 만들었습니다. 코드 생성은 AI에 맡기되 컴포넌트 설계와 인터랙션 로직은 직접 판단했고, 당일 안에 npm 패키지 빌드·배포까지 마쳤습니다.
숭실대학교 중앙동아리 멋쟁이사자처럼 13기
커리큘럼·스터디·코드리뷰·멘토링을 맡으며, 주장이 아니라 측정으로 설명하는 리뷰를 했습니다. innerHTML과 배열 join의 DOM 성능 차이를 직접 측정해 리뷰 근거로 썼고, 파트원들이 어려워한 개념(실행 컨텍스트·스코프)은 보충 세션으로 다시 설계했습니다.
먼저 작게 만들고, 직접 써보면서 어색한 부분을 고칩니다. 화면의 흐름, 컴포넌트 구조, 사용자의 행동을 함께 보며 더 자연스러운 인터페이스로 다듬는 편입니다. AI는 빠르게 시도하고 비교하기 위한 도구로 활용하되, 최종 판단은 사용성과 맥락을 기준으로 합니다.
바로 화면을 만들기보다, 이 인터페이스가 어떤 상황에서 쓰이고 무엇을 해결해야 하는지 먼저 정리합니다. 사용자가 해야 할 행동, 필요한 정보, 기능의 우선순위를 확인한 뒤 작업 방향을 잡습니다.
초기 아이디어는 오래 고민하기보다 AI로 빠르게 작동하는 형태로 만들어 여러 방향을 비교합니다. 이때 AI에 맡길 부분과 직접 판단할 부분을 나눠서, 생성된 결과를 그대로 쓰지 않고 서비스 흐름과 사용성에 맞는지 확인한 뒤 반영합니다.
초안이 만들어지면 화면이 단순히 보이는 대로 동작하는지보다, 사용자의 액션에 따라 상태와 데이터가 자연스럽게 이어지는지 확인합니다. 컴포넌트의 책임이 명확한지, 예외 상황에서도 흐름이 깨지지 않는지 점검하며 실제 구현에 맞는 구조로 다듬습니다.
컴포넌트의 역할을 명확히 나누고, 이후 변경이 생겨도 쉽게 확장할 수 있는 구조를 고민합니다. 화면의 완성도뿐 아니라 성능, 접근성, 다양한 사용 환경에서의 안정성까지 함께 확인합니다.
작업이 끝나면 무엇이 의도대로 됐고, 무엇이 그렇지 않았는지를 글로 남깁니다. 프로젝트가 끝나면 어떤 문제를 만났고, 어떤 선택을 했고, 무엇을 다르게 해볼 수 있었는지 정리합니다. 결과물만 남기기보다 그 과정에서 배운 점을 다음 작업에 가져가려 합니다.
사용자 문제를 AI를 포함한 서비스로 풀어내는 개발자로 성장하고 싶습니다.함께 만들 분, 편하게 연락 주세요.