자짤 생성툴 4.0.0
v4.0.0: 독립된 샘플 프리셋 18개와 간편 제작 모드, 내장 나눔고딕을 제공합니다. Windows 앱과 웹에서 같은 편집 기능을 사용합니다.
v4.0.0 포터블 다운로드 — Windows x64용 실행 파일과 SHA-256을 제공합니다.
웹에서 바로 사용하기 — 설치 없이 PC 사양 카드를 만들 수 있습니다. 웹판은 사양 자동 불러오기를 지원하지 않으며, 직접 입력하거나 붙여넣어 사용합니다.
Windows PC 사양을 읽고, 이미지·문구·도형을 배치해 명함형 사양 카드를 만드는 Electron 데스크톱 앱입니다. 같은 편집 코드를 사용하는 브라우저 웹판도 제공합니다.
- 개발 보조: Claude Code · OpenAI Codex. Codex를 통한 편집 기능 개선, 아이콘·배경 작업, 브라우저 웹판 제작·배포를 포함합니다.
- 무료 배포 및 자유 수정 가능(MIT). 재배포할 때 제작자 이름을 남겨 주세요.
웹판
자짤생성툴은 설치 없이 PC 사양 카드와 스펙카드를 만드는 무료 자짤 생성기입니다. 브라우저에서 사양을 입력·붙여넣고, 배경 프리셋·아이콘·글자 효과를 조합해 PNG·WebP로 저장합니다. 디자인은 현재 브라우저에 보관하며, .speccard 파일로 백업하거나 Windows 앱과 주고받을 수 있습니다. PC 부품 자동 감지는 Windows 앱에서 지원합니다.
웹판은 jjaltool.kro.kr에서 사용할 수 있습니다. GitHub의 main에 업데이트를 push하면 Cloudflare Pages가 자동으로 빌드하고 배포합니다. 웹용 배경과 썸네일은 기존 원본에서 빌드할 때 생성하며, 방문자는 배경 팩을 별도로 설치하지 않습니다.
브라우저에 저장한 디자인은 사이트 주소별로 구분됩니다. 이전 주소에 저장한 디자인은 그곳에서 백업으로 .speccard 파일을 받은 뒤, 새 주소의 파일 열기로 가져올 수 있습니다.
Node.js 22 이상에서 npm ci --prefix web, npm run build:web, npm run preview:web 순서로 실행합니다. 자세한 파일 위치·무료 배포·Google 검색 등록 절차는 웹판 배포 안내에 있습니다.
샘플 프리셋 — 4.0.0
프리셋으로 만들기에서 18개 샘플을 보고 골라 닉네임·사양·이미지를 바꾸세요. 모든 샘플은 사양 1열, 배경 이미지 없이 색·패널·효과로 구성합니다. 사양 패널 좌우, 글꼴·글자 크기·색, 이미지 맞춤·확대·위치를 간편하게 조절합니다.
왼쪽 9개와 오른쪽 9개에 각각 독립된 디자인을 제공합니다. 여백 서명·라운드 헤더, 라벨 프로필·포토 배지, 메모 태그·엽서 서명, 라이브 티켓·스테이지 배너처럼 아이콘·닉네임·사진·패널·패턴·테두리가 구별됩니다. 사양 위치를 바꿔도 선택한 디자인은 유지합니다. 움직임을 포함한 8개 샘플은 각기 다른 효과 조합을 사용하며 선택 창에서 재생·일시정지할 수 있습니다.
직접 만들기로 전환하면 지금 만든 디자인을 그대로 이어서 세부 조정할 수 있습니다. 다시 프리셋 화면으로 돌아와도 편집값을 유지합니다. 다른 샘플을 적용할 때도 사양·닉네임·이미지는 보존되며 실행 취소할 수 있습니다.
나눔고딕 Regular/Bold를 앱과 웹에 포함하여 별도 설치 없이 사용합니다. 글꼴에는 SIL Open Font License가 별도로 적용됩니다. 18개 목록과 적용 규칙, 검증 기록.
배포본과 공개 웹 확인 결과는 v4.0.0 릴리스 검증에 기록합니다.
2.0 핵심 기능
- 작업 중심 UI: 내용·규격 / 사양 패널 / 이미지 / 배경·테두리 / 텍스트·요소의 5개 작업 탭
- 안전한 자동 사양 읽기: CPU, 메인보드, RAM 규격·부품번호·속도, GPU, NVMe/SSD/HDD를 읽고 적용 전 결과 확인
- 수동 입력 보호: 자동 감지는 사용자가 이미 적은 값을 덮어쓰지 않으며, 같은 종류의 추가 장치는 기존 항목 옆에 배치
- 실용적인 사양 배치: 1·2열 전환, 행 기준 분할 지점, 열·항목·라벨-값 간격과 정렬, 값 입력창의 Enter 줄바꿈, 패널 크기에 맞춘 자동 축소·줄바꿈
- 직접 조작 패널 편집: 이미지·사양 패널 안쪽은 이동, 네 변은 가로·세로 크기 변경, 네 모서리는 회전으로 구분하고 정확한 X/Y는 숫자로 보정
- 직접 조작 사진 크롭: 패널 이동과 내부 사진 크롭 모드 분리, 중앙 정렬·초기화, 크기·회전·좌우 반전·투명도·색 보정
- 표현 확장: 텍스트 입력, 이미지/이모지 스티커, 도형, 미리보기에서 직접 위치를 옮기는 배경 이미지와 세밀한 요소 그림자·패턴·테두리
- 절제 가능한 모션: 효과별 켜기, 배경/내용 위/테두리 층, 방향, 투명도, 순서, 미리보기 일시정지, 최대 8개
- 상단 출력과 사전 점검: 미리보기 우측의 PNG/WebP 버튼에서 경계·배경·배율·대표 프레임·길이·FPS·품질·예상 메모리를 확인
- 저장 안전성: 디자인 썸네일, 저장 전 이탈 확인, 자동 복구본, 휴지통 삭제, 디자인 이름 옆의
.speccard 파일 열기·백업
- 사양 프로필: 여러 PC 사양 묶음을 디자인과 별도로 저장·불러오기·관리
자동 감지는 Windows가 공개하는 정보만 사용합니다. 전원공급장치와 케이스처럼 운영체제가 신뢰성 있게 알 수 없는 항목은 빈 값을 임의로 만들지 않습니다.
부품 아이콘과 주변기기 — 2.1
- 3개 시리즈 × 16종: 이미지 생성 기능으로 제작한 모노·컬러·픽셀 아이콘 48개를 앱에 내장했습니다. 실행 중 다운로드가 필요하지 않습니다.
- 본체와 주변기기: CPU, 메인보드, RAM, 그래픽카드, SSD/NVMe, HDD, PSU, 케이스, 쿨러, 모니터, 스피커, 마우스, 키보드, 헤드셋/헤드폰, 마이크, 기타 항목을 지원합니다.
- 전체 설정: 내용·규격 탭의 사양 목록 위에서 아이콘 표시, 시리즈, 크기를 고릅니다. 표시를 끄면 아이콘 공간도 없어지며 선택값은 보관됩니다.
- 행별 설정: 항목 왼쪽의 아이콘 버튼을 눌러 자동·직접 선택·표시 안 함을 고릅니다. 특정 행만 다른 시리즈를 사용할 수도 있습니다. 행별 표시 안 함은 해당 글자를 유지하며 나머지 행과 정렬합니다.
- 자동 연결: CPU/VGA/PSU 같은 약어와 한글 부품 이름을 인식합니다. 알 수 없는 이름에는 기타 아이콘을 사용합니다. 직접 고른 아이콘은 라벨을 바꿔도 유지됩니다.
- 직접 추가:
+ 부품 · 주변기기 추가에서 종류를 고르면 라벨과 아이콘을 준비합니다. 항목 이름을 자유롭게 입력한 뒤 자동이나 원하는 아이콘을 선택할 수도 있습니다. 추가 후 사양 입력창으로 바로 이동합니다.
- 저장과 호환: 아이콘 설정은 디자인 저장·백업·복구·실행 취소에 포함됩니다. 사양 프로필에는 행별 종류와 시리즈를 보관하며, 전체 표시·시리즈·크기는 현재 카드 설정을 따릅니다. 새 카드는 컬러 아이콘을 켜고 시작하며, 아이콘 설정이 없는 기존 저장본은 표시를 끈 상태로 열립니다.
주변기기 추가는 수동 입력 기능입니다. 자동 사양 읽기가 모니터·스피커 등의 모델을 새로 감지하는 기능은 아닙니다. 아이콘 원본과 생성 프롬프트는 renderer/assets/spec-icons/에 있습니다.
배경 프리셋과 랜덤 선택 — 3.2
내용·규격 → 카드 팔레트에 배경 프리셋 둘러보기와 랜덤 배경 버튼이 나란히 있습니다. 내장 배경은 기존 100장에 브랜드·데스크셋업·도트풍 64장을 더한 총 164장입니다.
프리셋 창에서는 분류와 이름으로 검색한 뒤 배경으로 적용합니다. 랜덤 배경은 창을 열지 않고 내장 164장 전체에서 즉시 고릅니다. 여러 번 눌러 배경을 바꿀 수 있으며, 다른 사용 가능한 이미지가 있으면 현재 배경과 같은 이미지를 피하고 손상 파일은 건너뜁니다. 적용은 실행 취소·다시 실행과 디자인 저장에 포함됩니다.
개인 이미지는 배경·테두리 → 배경 이미지 넣기에서 선택합니다. 현재 이미지가 있으면 새 이미지로 바뀐다는 확인 메시지가 나옵니다. 제거 버튼도 확인 후 배경색·패턴으로 되돌리며, 취소하면 현재 배경을 유지합니다. 위치·배율·불투명도·흐림·어둡게 조절은 같은 탭에서 바로 사용합니다.
프리셋은 내장 배경만 제공합니다. 개인 폴더 선택·자동 검색·감시 기능은 사용하지 않습니다. 기존 개인 이미지와 저장된 배경 설정 파일은 삭제하거나 변경하지 않습니다. 선택한 이미지 한 장은 디자인에 포함되어 원본 위치와 관계없이 저장본에서 복원됩니다.
글자 외곽선과 발광 — 3.2
- 사양 패널 → 사양 글자: 항목명과 사양값 각각 글자 테두리, 색, 두께를 조절합니다.
- 텍스트·요소 → 추가 텍스트: 각 문구에 같은 외곽선·발광 조절을 제공합니다. 가로·세로쓰기, 여러 줄, 그라디언트와 함께 사용합니다.
- 발광: 끄기 / 부드러운 발광 / 네온 발광을 고르고 색·범위·강도를 조절합니다. 기존 그림자와도 함께 사용할 수 있습니다.
- 효과는 저장·불러오기·복구·실행 취소와 PNG/WebP 출력에 포함됩니다. 이전 디자인은 새 효과를 끈 상태로 열리며, 기존 추가 텍스트 외곽선은 보존합니다.
아이콘 크기 — 3.2
내용·규격 → 사양 목록 → 아이콘 크기 방식에서 선택합니다. 글자 크기에 맞춤은 0.52.5배를 세밀하게 조절하며, **직접 지정 (px)**은 글자 크기와 독립적으로 896px를 지정합니다. 슬라이더와 숫자 입력을 지원합니다. 크기에 맞춰 아이콘 공간·행 높이·글자 정렬을 계산하고 좁은 열에서는 가로 공간 안으로 제한합니다. 기존 디자인의 작은/보통/큰 비율은 그대로 읽습니다.
실행 방법
Node.js 18 이상이 필요합니다.
npm install
npm start
검증:
npm run check
포터블 빌드 명령:
npm run dist
결과물은 프로젝트 안의 dist\jjal-generator-v4.0.0-portable.exe입니다.
데이터 위치
- 저장된 디자인:
%APPDATA%\speccard\designs\*.json
- 자동 복구본:
%APPDATA%\speccard\recovery-v2.json
- 사양 프로필, 최근 색상, UI 설정: Electron 로컬 저장소
- 사용자가 내보낸
.speccard, PNG, WebP: 저장 대화상자에서 고른 위치
디자인 삭제는 즉시 영구 삭제하지 않고 Windows 휴지통으로 보냅니다. 2.0 저장본은 schemaVersion: 2를 사용하며, 1.x 디자인은 불러올 때 호환 변환됩니다.
새 사양 입력은 최대 64행, 값당 1,000자입니다. 기존 저장 파일과 사양 프로필의 초과 내용은 자르지 않고 보존합니다. 정지 WebP는 무손실로 저장하며, 품질 조절은 움직이는 WebP에 적용됩니다.
파일 저장은 완성한 임시 파일을 교체하고 이전 정상 JSON을 .bak으로 보관합니다. 자동 복구본이 손상된 경우 이전 백업을 복구 후보로 안내합니다. 전원 차단이나 저장 장치 고장까지 복구를 보장하는 기능은 아닙니다.
폴더 구조
main.js 창, 파일 저장, 자동 복구, 클립보드 IPC
preload.js 렌더러에 노출하는 최소 API
specReader.js Windows 사양 감지와 정규화
jsonStore.js 임시 파일 교체·정상 백업 보관·백업 읽기
backgroundLibrary.js 내장 배경 목록·썸네일·이미지 읽기
renderer/index.html 작업 중심 UI
renderer/background-library.js 내장 선택 창·검색·썸네일·외부 버튼 랜덤 적용
renderer/background-library.css 배경 선택 창 스타일
assets/backgrounds/ 내장 배경 PNG 164장
docs/BACKGROUND_GENERATION.json 생성 프롬프트·원본 크기·해시
docs/BACKGROUND_EXPANSION_GENERATION.json 추가 64장 프롬프트·원본 크기·해시·검수
docs/V3_2_VALIDATION.md 3.2.0 소스·자산·패키지 검증 기록
renderer/style.css 모듈러 스펙 벤치 테마와 반응형 레이아웃
renderer/spec-icons.js 아이콘 분류·라벨 연결·정규화·시트 경계
renderer/assets/spec-icons/ 생성한 PNG 시리즈 3개와 프롬프트
renderer/v2-core.js 2.0 상태 정규화·병합·배치 순수 함수
renderer/app.js Canvas 편집기와 PNG/WebP 출력
tests/ 사양 감지·상태/배치·저장 실패 회귀 테스트
변경 이력
v3.21 — 배경 안내·파일명 정리
- 내용·규격의 배경 프리셋 안내와 랜덤 버튼 도움말에서 고정 장수 제거
- 추가 64장에 기존 방식의
101_이름.png–164_이름.png 연속 번호 적용
- 앱 표기는 v3.21, 내부 패키지 버전은 3.2.1, 포터블 파일은
dist/jjal-generator-v3.21-portable.exe
v3.2.0 — 배경 프리셋 64장 추가·통합
- 기존 배경 100장에 MSI·GIGABYTE·ASUS·AMD·Intel·NVIDIA 48장, 데스크셋업·방 풍경 8장, 도트풍 8장을 추가해 총 164장을 내장
- 추가 64장은
assets/backgrounds/에 원본 PNG로 통합하고, 생성 프롬프트·참고 자료·크기·SHA-256·검수 상태를 docs/BACKGROUND_EXPANSION_GENERATION.json에 기록
- NVIDIA-06은 Dawn 캐릭터 대신 에메랄드 AI 코어 콘셉트로 교체
- 3.1의 배경·텍스트 효과·아이콘 크기 개선을 포함한 v3.2.0 포터블 빌드
v3.1.0 — 편집 기능 소스 개선 (v3.2에 포함)
- 개인 배경 폴더 연동 제거, 개인 이미지는 기존 이미지 넣기 기능으로 통일
- 내용·규격의 카드 팔레트로 프리셋 이동, 나란한 랜덤 버튼으로 즉시 변경
- 개인 이미지 교체·제거 확인 메시지와 취소·문서 전환 보호
- 항목명·사양값·추가 텍스트에 외곽선과 부드러운/네온 발광
- 아이콘 배율 세밀 조절과 글자 크기에 독립적인 픽셀 지정
- 개발 실행 검증은
docs/V3_1_VALIDATION.md에 기록
v3.0.0 — 배경 100장 내장과 랜덤 선택
- 10개 주제의 배경 100장을 기본 내장하고 개인 이미지 폴더와 함께 표시
- 전체·내장·개인 구분, 분류·이름 검색과 현재 목록의 랜덤 배경 적용
- 개인
Backgrounds 폴더의 이미지 추가·제거 감지와 폴더 위치 안내
- 랜덤 적용의 직전 항목 후순위 처리, 손상 파일 건너뛰기, 취소·문서 전환 보호
- 부품 아이콘 48개·주변기기 입력과 저장·실행 취소·출력 안정화 포함
v2.1.0 — 부품 아이콘과 주변기기
- 모노·컬러·픽셀 아이콘 48개 내장, 카드 전체 표시·시리즈·크기 설정
- 행별 아이콘 자동 연결·직접 선택·숨김과 시리즈 재정의, 주변기기 추가 선택 창
- 아이콘 폭과 높이를 1·2열 배치, 자동 축소, 줄바꿈, PNG/WebP 출력에 반영
- 이미지 시트를 메모리 캔버스에 고정해 출력 배율을 바꿔도 아이콘 선명도 유지
- 디자인·백업·사양 프로필에 선택값 보관, 기존 저장본의 아이콘 표시 기본값을 꺼서 배치 유지
- 선택 창의 키 입력이 뒤쪽 카드의 실행 취소·삭제로 이어지지 않도록 보호
v2.0.1 — 저장·실행 취소·출력 안정화
- 다른 이름 저장·새 문서·불러오기에서 편집 이력을 분리하고, 실행 취소가 저장 파일 연결을 바꾸지 않도록 수정
- 저장 응답을 기다리는 동안의 추가 편집과 문서 전환을 구분하고, 배경 이미지도 실행 취소·다시 실행 때 복원
- 긴 텍스트와 같은 접두사의 이미지를 정확히 구별하며, 캔버스 선택만으로 미저장 상태가 되지 않도록 수정
- v2 사각형 패널과 기존 저장물의 많은 사양 행·긴 값을 재열기 후 보존
- 출력 배율에 맞춰 그림자·글로우·배경 흐림을 조절하고, 카드 크기·출력 여백 안내를 실제 렌더링과 일치시킴
- 움직이는 무손실 WebP의 투명도 표시를 수정하고 정지 WebP의 무손실 정책을 출력 창에 안내
- 손상된 자동 복구본에서 정상 백업을 읽도록 개선하고, 파일 쓰기·교체 실패 회귀 테스트 추가
v2.0.0 — 편집 경험 전면 개편
- 기능 번호를 따라가던 긴 패널을 작업 목적별 5개 탭으로 재구성
- 이미지 스크롤식 조정을 직접 조작+숫자 입력 방식으로 교체하고 패널/크롭 조작을 분리
- 2열 사양의 분할 행·열 간격·정렬을 명확히 분리하고, 값 입력창의 Enter 줄바꿈을 그대로 반영
- 사양 목록을 패널 컨테이너 안에서 자동 축소·줄바꿈·클리핑하고, 일괄 색상 적용 중인 행별 색상에는 잠금 표시와 호버 안내를 추가
- 이미지·사양 패널의 네 변 크기 조절과 네 모서리 회전을 분리하고, 회전 전용 초기화와 사진 크롭 모드를 추가
- 카드 그림자와 행 숨김·레이어 관리처럼 결과보다 복잡도와 여백을 늘리던 기능 제거
- 이미지·사양 패널·텍스트·도형 그림자를 색·불투명도·블러·X/Y로 세분화
- 효과의 층·순서·투명도·방향·일시정지와 출력 경계 선택을 추가해 난잡함과 불필요한 여백을 제어
- 배경 이미지 직접 드래그, 상단 외부 프로젝트 파일 도구, 다중 사양 프로필, 자동 복구 추가
- RAM/저장장치/GPU 감지를 보수적으로 보강하고 알 수 없는 PSU·케이스 값을 추측하지 않도록 수정
v1.31 이하
빛번짐 제한과 저장 배경, 모바일 UI, WebP 출력, GIF/스티커/텍스트/밴드 편집을 순차적으로 추가했습니다.
