디자인 목업 이미지를 HTML/CSS 코드로 자동 변환하는 딥러닝 신경망
중간맛 분석
케라스/텐서플로우 기반의 seq2seq 신경망으로, CNN 인코더가 이미지 특징을 추출하고 LSTM/GRU 디코더가 토큰 시퀀스를 생성합니다. Bootstrap 버전은 16개 도메인 특화 토큰을 사용해 97% 정확도로 일반화 가능하며, 소규모 GPU 클러스터에서 학습할 수 있습니다. FloydHub 클라우드 플랫폼에서 즉시 실행 가능한 사전학습 모델과 데이터셋을 제공하며, Jupyter 노트북으로 대화형 학습이 가능합니다. 다만 현재 모델은 소규모·동일 계층의 데이터셋으로만 훈련되어 복잡한 레이아웃에서의 성능은 검증 필요 상태입니다.
이런 레포예요
이럴 때 쓰면 좋아요
- UI/UX 디자인 목업을 빠르게 HTML 프로토타입으로 변환
- 손 스케치나 와이어프레임 이미지로부터 웹 페이지 자동 생성
- 디자이너와 개발자 간 협업 효율화 및 개발 시간 단축
핵심 기능
대안 대비 차별점
도메인 특화 토큰셋(16개)을 사용해 원본 HTML 생성 방식보다 훨씬 적은 데이터와 계산량으로도 높은 정확도를 달성하며, pix2code를 기초하면서도 구조화된 Jupyter 학습 자료와 사전학습 모델을 제공합니다.
먹어본 사람들
실제로 차려 먹어본 손님들의 흔적이에요 — 한마디와 완주 인증 모두 검수 후 공개돼요.
이 레포, 해먹는 법
처음 오셨어요? 어렵지 않아요 — 위에서 아래로 따라 하면 내 컴퓨터에 이 레포를 차려서 바로 맛볼 수 있어요.
준비물
- 파이썬 3.x
- 케라스
- 텐서플로우
- 필로우(Pillow)
- h5py
- Jupyter Notebook
바로 시작하기
- 로컬 환경에 필요한 라이브러리를 설치합니다.
pip install keras tensorflow pillow h5py jupyter
- 저장소를 복제합니다.
git clone https://github.com/emilwallner/Screenshot-to-code.git
cd Screenshot-to-code/
- Jupyter 노트북을 실행합니다.
jupyter notebook
-
원하는 노트북 파일(.ipynb)을 엽니다.
-
메뉴에서 Cell > Run all을 클릭하여 모델을 실행합니다.
-
(선택사항) 전체 데이터셋으로 테스트하려면 https://www.floydhub.com/emilwallner/datasets/imagetocode 에서 데이터를 다운로드하고 노트북의
dir_name변수를 수정합니다.
깃밥트라이로 맛보기
받아보기 귀찮고 살짝 불안했다면 — 안전 스캔부터 설치까지 터미널 한 줄로 끝나요.
터미널에 붙여넣으면 깃밥 안전 스캔 → 격리 폴더 clone → 설치 → 실행법 안내까지 자동이에요. 처음이어도 괜찮아요 — 이 한 줄이 전부예요.
npx gitbap-try emilwallner/Screenshot-to-code
Node.js만 있으면 설치 없이 실행돼요 · 깃밥트라이가 뭐예요? →
별 추이 · 7일
확인 시각
활용성 · 따라 만들기 좋은가
- 관대한 라이선스
- 테스트 있음
- 예제 디렉토리
- 최근 활동
- AGENTS.md
- llms.txt
- 템플릿
⚪ 최근 활동 정보 없음 · 2017년 생성
이런 레포, 매주 이메일로 받아보실래요?
매주 월요일 아침, 골라 담은 밥상만. 광고 없이 · 언제든 해지.
내 레포인가요? README에 깃밥 배지 달기
[](https://www.gitbap.com/r/emilwallner/Screenshot-to-code)🔌 클로드에서 바로 써보기 — 깃밥 연결하는 법
깃밥을 클로드에 연결하면 이런 레포를 클로드·커서·Codex에서 바로 찾고 체험할 수 있어요.
클로드 설정 → 커넥터에 이 주소를 붙여넣기.
https://www.gitbap.com/api/mcp플러그인을 설치하면 /gitbap-trending·/gitbap-try 슬래시 커맨드로 레포를 그 자리에서 체험. Claude Code에서 아래 두 줄을 차례로 실행하세요.
/plugin marketplace add jakeparkcolde/gitbap-cowork/plugin install gitbap-cowork@gitbapAI가 README 기반으로 요약했습니다 · 원문 보기