문석찬. 연락하기

완벽한 시작보다,
끊임없는 발전을 믿습니다.

새로운 아이디어를 구상하고, 직접 구현하는 과정을 좋아합니다. AI와 웹 기술을 활용해 생각을 실제 서비스로 발전시키며, 더 나은 사용자 경험을 고민합니다.

01About Me

안녕하세요,
AI와 함께 새로운 가치를 만드는
개발자 문석찬입니다.

고등학교에 다니며 웹사이트와 앱, AI 서비스를 만들고 있습니다. Hugging Face의 오픈소스 AI 모델을 다루고, Claude와 GPT를 함께 활용해 아이디어를 빠르게 프로젝트로 만들고 실제로 배포합니다.

02Projects

말보다 결과물로
보여드립니다.

03Tech Stack

이런 기술로
만들고 있습니다.

많은 개발자가 쓰는 도구를 익히며
프로젝트마다 직접 써 보고 있습니다.

언어Languages

  • JavaScript웹 화면의 동작과 기능
  • TypeScript오류를 줄이는 안정적인 코드
  • PythonAI 모델과 데이터 처리
  • HTML · CSS모든 웹 화면의 기본 구조와 디자인

화면Frontend

  • React빠르게 반응하는 화면
  • Next.js검색에 잘 잡히는 빠른 웹사이트
  • Tailwind CSS일관된 디자인을 빠르게

서버 · 데이터Backend

  • Node.js서버와 API
  • Supabase로그인과 데이터베이스
  • PostgreSQL믿을 수 있는 데이터 저장

AIAI Models

  • OpenAI GPT글 생성 · 요약 · 대화 기능
  • Claude긴 글 분석과 개발 보조
  • Hugging Face오픈소스 AI 모델 활용

협업 · 배포Tools

  • Git · GitHub버전 관리와 작업 기록
  • Vercel빠르고 안정적인 배포
  • VS Code개발 환경

04How I Work

아이디어가
서비스가 되기까지

흩어진 생각이 구조를 갖추고,
직접 사용할 수 있는 서비스가 될 때까지.

  1. 01DISCOVER

    방향을 찾고

    누가 쓰는지, 무엇이 꼭 필요한지
    먼저 정리합니다.

  2. 02STRUCTURE

    구조를 잡고

    핵심 페이지와 사용 흐름을 정리해,
    아이디어를 구체적인 화면으로 옮깁니다.

  3. 03BUILD

    직접 만들고

    Claude · GPT로 속도를 높이고,
    직접 써 보며 다듬습니다.

  4. 04LAUNCH

    세상에 꺼냅니다

    직접 배포해 사용해 보고,
    불편한 점을 찾아 계속 고칩니다.

05Q&A

자주 묻는
질문

더 궁금한 점은 메일로 편하게 물어봐 주세요.

학생인데, 함께 작업할 수 있나요?

네. 학교생활과 함께 하고 있어서, 시작하기 전에 가능한 일정과 범위를 솔직하게 말씀드리고 맞춰 갑니다.

주로 어떤 것을 만드나요?

기업 웹사이트, 커뮤니티, AI를 활용한 웹서비스, 데이터 대시보드, 모바일 앱을 만들어 왔습니다. 위 프로젝트에서 실제 화면을 볼 수 있습니다.

AI는 어떻게 활용하나요?

Hugging Face의 오픈소스 모델을 서비스 기능으로 연결하고, Claude와 GPT는 기획 · 코드 작성 · 검토에 함께 씁니다. 결과물은 직접 써 보며 확인하고 다듬습니다.

작성한 코드도 볼 수 있나요?

공개한 코드는 GitHub(주소 입력)에서 볼 수 있습니다. 공개하지 않은 프로젝트가 궁금하면 메일로 물어봐 주세요.

Contact

함께 이야기
나눠요.

함께 만들고 싶은 아이디어, 협업 제안, 작업에 대한 피드백 모두 반갑습니다.
메일로 편하게 연락 주세요.

이메일 보내기

01 · Corporate Web

SEM 기업 웹사이트

맡은 역할
예: 기획 · 디자인 · 개발 · 배포
제작 기간
예: 3주
사용 기술
예: React · Supabase
결과
실제 기업 사이트로 운영 중
직접 보기
sesgm.com ↗

Design Focus

복잡한 사업 정보를 쉽게 찾도록

제작 목적
기업 소개, IT 솔루션, 컨설팅과 교육 정보를 한 사이트에서 전달하는 작업입니다.
구성 방식
인증 규격을 5개 분야로 분류하고, 하위 페이지의 구조와 경로 표시를 통일했습니다.
살펴볼 기능
기업 소개 · 서비스 분류 · 반응형 웹
sesgm.com 방문
SEM 메인 화면. 도시 야경 위에 Innovate for Tomorrow 문구가 크게 놓여 있다.
메인 히어로
OUR SCOPE 페이지. 인증 규격이 분야별 필터와 함께 나열되어 있다.
컨설팅 — 인증 지원 규격
OUR PARTNERS 페이지. 회사 로고가 걸린 벽과 네 가지 철학 카드가 보인다.
회사소개 — 주요 이해관계자

다른 프로젝트도 살펴보세요

02 · Art Community

맡은 역할
예: 기획 · 디자인 · 개발 · 배포
제작 기간
예: 3주
사용 기술
예: React · Supabase
결과
예: 사용자 수, 받은 반응, 개선된 점
직접 보기
데모 주소 또는 화면 녹화 영상

Design Focus

감상에서 참여로 이어지는 갤러리

제작 목적
작품 감상과 작가 발견, 투표 참여를 하나의 흐름으로 구성한 커뮤니티입니다.
구성 방식
홈에서 작품과 작가를 소개하고, 투표와 작가 페이지로 탐색을 이어가도록 구성했습니다.
살펴볼 기능
작품 탐색 · 작가 페이지 · 투표
이달의 작가 투표 화면. 풍경 작품들이 입체 캐러셀로 배치되어 있다.
이달의 작가 투표
희랑 갤러리 홈 전체 화면.
홈 전체
작가 페이지. 작가 소개와 대표작, 다른 작품 목록이 보인다.
작가 페이지

다른 프로젝트도 살펴보세요

03 · AI Storytelling

COSNAP

맡은 역할
예: 기획 · 디자인 · 개발 · 배포
제작 기간
예: 3주
사용 기술
예: React · Supabase
결과
예: 사용자 수, 받은 반응, 개선된 점
직접 보기
데모 주소 또는 화면 녹화 영상

Design Focus

긴 이야기의 맥락을 관리하는 공간

제작 목적
AI와 이야기를 이어 쓸 때 필요한 인물과 세계관, 지난 이야기의 정보를 다루는 도구입니다.
구성 방식
스토리·캐릭터·세계관·기억을 분리하고, 이어하기와 API 사용량을 홈에서 확인하도록 구성했습니다.
살펴볼 기능
AI 스토리텔링 · 작업 공간 · 사용량 표시
COSNAP 홈 화면. 이어 볼 이야기 배너와 내 이야기 카드 목록이 보인다.
홈 — 이어 보기와 내 이야기

다른 프로젝트도 살펴보세요

04 · Mobile App

식물 키우기

맡은 역할
예: 기획 · 디자인 · 개발 · 배포
제작 기간
예: 3주
사용 기술
예: React · Supabase
결과
예: 사용자 수, 받은 반응, 개선된 점
직접 보기
데모 주소 또는 화면 녹화 영상

Design Focus

매일의 작은 행동을 화면에 담기

제작 목적
씨앗을 돌보고 성장 과정을 확인하는 모바일 앱입니다.
구성 방식
물주기 등 돌봄 동작과 미션, 성장 레벨을 함께 배치해 오늘 할 일을 확인하도록 구성했습니다.
살펴볼 기능
모바일 화면 · 돌봄 동작 · 성장 기록
손에 든 스마트폰에 식물 키우기 앱이 실행되어 있다.
실제 기기에서 실행한 홈 화면

다른 프로젝트도 살펴보세요

05 · Data Dashboard

주식도움

맡은 역할
예: 기획 · 디자인 · 개발 · 배포
제작 기간
예: 3주
사용 기술
예: React · Supabase
결과
예: 사용자 수, 받은 반응, 개선된 점
직접 보기
데모 주소 또는 화면 녹화 영상

Design Focus

여러 지표를 한 화면에서 읽도록

제작 목적
종목의 시세와 수급, AI 리포트를 함께 살펴보는 분석 대시보드입니다.
구성 방식
차트와 수급 정보를 카드로 나누고 읽는 법을 덧붙여 정보의 역할을 구분했습니다.
살펴볼 기능
차트 · 수급 데이터 · AI 리포트
종목 상세 화면. 현재가와 캔들 차트, 예측 정보 카드가 있다.
시세 차트와 예측 정보
기관과 외국인 순거래량 막대 그래프와 AI 진단 리포트.
수급 그래프와 AI 리포트

다른 프로젝트도 살펴보세요