필자는 전자블록이 25년 전에 다시금 복각되어 판매되고 있다는 정보를 늦게서야 알게 되었고, 그 이후로 다양한 관련 제품과 자료를 모으고 있습니다. 그런데 이렇게 정보를 모을 때 가장 답답했던 부분은 배치도와 회로도를 읽을 수 있는 설명서가 매우 두껍고 무겁다 보니 매번 꺼내 확인하는 것이 매우 거추장스럽다는 점이었습니다. 그래서 본격적으로 자료를 수집하던 10년 전부터 자료를 디지털화하기로 마음을 먹었으나 당시에는 의지도 부족했을 뿐만 아니라 실행 방법도 구체적으로 고민하지 못하다 보니 지지부진한 상태가 10년 이상 유지되고 있었습니다. 하지만 10년 만에 다시금 마음을 다잡고 전자블록 배치도 생성기 제작을 시작하게 되었습니다.
전자블록 배치도 생성기 제작 이유
그렇다면 굳이 전자블록 배치도 생성기를 제작하려는 이유가 궁금하실 겁니다.
설명서가 아무리 무겁고 크다 하더라도 굳이 배치도를 그것도 코드 기반으로 생성해야 할 필요가 있는 것일까요? 물론 필자가 디지털 보관(digital archiving) 중독자라는 것도 하나의 이유가 될 수 있을 것입니다.
하지만 실제로는 공식 설명서에 포함되어 있는 배치도를 공유해야 할 경우에도 일단 해당 내용을 복사하거나 스캔한 후 이미지 형태로 파일을 만드는 매우 번거로운 과정이 필요합니다. 설명서의 공식 PDF 버전이 존재하지 않는 것도 번거로움을 늘리는 하나의 이유가 될 것입니다. 물론 책을 잘라내어 스캔한 다음 PDF로 제작하거나 스마트폰으로 사진을 찍어 스캔 모드(Scan Mode)를 통해 문서 형태로 변환하는 방법을 사용하면 공식 설명서는 어떻게든 해결할 수 있을 것입니다. 하지만 문서로 존재하지 않는 경우에는 어떻게 해야할까요?
실제로 공식 사이트에서 제공하는 깔끔한 배치도를 보다가 직접 손으로 그린 이도저도 아닌 배치도를 보게 되면 확인도 어려울 뿐만 아니라 블록을 잘못 조립할 경우 블록 내부의 전자 부품이 망가질 수 있습니다.
그러다 보니 전자블록 사용자 중 일부 능력자들은 자신만의 방법을 사용하여 정리된 형태의 배치도를 그리는 방법을 고안하게 됩니다. 그 중에서도 가장 많이 사용되는 방법이 PowerPoint의 도형 기능을 이용하여 블록 아이콘과 바탕 그리드를 그리고 이를 조합하는 방법입니다.
필자 역시 이 파일을 발견한 후 잘 사용해 오다가 광실험60, 전자블록 mini에서 추가된 블록을 직접 그리며 에셋(assets)을 확장해 왔습니다. 하지만 역시 이 방법도 배치도 하나를 작성하는데 최소 30분~1시간 이상이 소요된다는 문제가 있습니다. 단순히 블록을 복사해서 붙이면 되는 것이 아니라, 블록의 회전도 고려해야 합니다. 그리고 무엇보다 가장 불편했던 부분은 하나의 블록을 여러 개의 도형을 조합해 만들다 보니 이를 그룹으로 묶었을 때 영역이 들쭉날쭉하다는 점이었습니다. 그리고 그 결과 정렬이 불가능하다는 문제가 발생하게 됩니다.
이러한 문제가 누적되면서 자료 정리에 계속 걸림돌이 늘어나게 되었고, 결국 이러한 지리한 시간 낭비와 제작의 불편함을 일거에 해소할 방법으로서 코드 기반의 배치도 생성기 제작을 고민하게 됩니다.
에셋 규격 설정하기
가장 먼저 한 일은 전자블록 EX-150, 전자블록 mini, 광실험 60의 본체의 규격 정보를 정의하는 것이었습니다. 각각의 제품은 당연하게도 같은 규격의 전자 부품 블록을 사용하기 때문에 가장 먼저 블록의 규격에 따른 해상도를 결정했습니다.
새로 이미지를 그린다면 해상도를 자유롭게 할 수 있었겠지만 그럴 만한 여유가 있는 것은 아니었기에 기존에 작업했던 블록 이미지 규격을 기반으로 전체적인 규격을 재정의했습니다. 블록의 규격이 정의되었기 때문에 이제 그 블록이 놓이는 그리드의 규격을 정의할 수 있게 되었습니다.
이러한 과정을 거쳐 정의된 1차 규격은 다음 표와 같습니다. 이 규격은 블록과 그 블록이 삽입되는 그리드에 대한 규격만 설정한 것으로, 리드(Lead) 선이나 마이크, 이어폰 등 추가 부품에 대한 규격은 아직 정의하지 않았습니다.
| 항목 | 규격 |
|---|---|
| 1×1 블록 (대부분의 블록) | 240×240 픽셀 (300 dpi) |
1×2 블록 (KEY-SW, S2P 계열 블록) | 240×498 픽셀 (300 dpi) |
| 1×1 그리드 크기 | 256×256 픽셀 (72 dpi) |
| 그리드 구분선 굵기 | 2 픽셀 (72 dpi) |
| 그리드 외곽선 굵기 | 8 픽셀 (72 dpi) |
블록 목록 관리
이어서 PowerPoint의 도형 기능을 이용해 작업했던 블록 아이콘을 앞에서 정의한 규격에 맞게 정리하고 다듬는 작업을 진행했습니다. 블록의 개수가 의외로 많았는데 중복을 제외하고 57개의 블록을 이미지 에셋으로 정리할 수 있었습니다. 아직 리드 선, 마이크, 이어폰 등은 1차 에셋에 포함되지 않았습니다.
이제 이렇게 정리된 이미지 에셋을 JSON을 이용해 다음과 같이 실제 블록 에셋으로 정리했습니다.
{
"schema": "electroblock-blocks/v1",
"sizes": {
"1x1": {
"w_cells": 1,
"h_cells": 1,
"w_px": 240,
"h_px": 240
},
"1x2": {
"w_cells": 1,
"h_cells": 2,
"w_px": 240,
"h_px": 498
},
"2x1": {
"w_cells": 2,
"h_cells": 1,
"w_px": 498,
"h_px": 240
}
},
"blocks": [
{
"id": "STR-E",
"name": "Transistor",
"size": "1x1",
"image": "STR-E.png",
"specs": "2SC1815 Compatible",
"origin": "EX-150"
},
{
"id": "STR-C",
"name": "Transistor",
"size": "1x1",
"image": "STR-C.png",
"specs": "2SC945 Compatible",
"origin": "EX-150,Mini"
},
{
"id": "SPT-C",
"name": "Photo Transistor",
"size": "1x1",
"image": "SPT-C.png",
"specs": null,
"origin": "LX60"
},
...
{
"id": "KEY-SW",
"name": "Key Switch",
"size": "1x2",
"image": "KEY-SW.png",
"specs": null,
"origin": "EX-150"
}
]
}이제 코드에서 STR-C와 같은 아이디만 지정하면 해당 블록의 크기가 1×1이고 2SC945 트랜지스터이며, 이미지 에셋이 STR-C.png라는 사실을 알 수 있게 되었습니다.
본체 그리드 이미지 생성기
이어서 이 블록 이미지가 실제로 놓일 그리드 이미지를 생성하는 도구를 고안했습니다.
그리드 이미지를 가장 쉽게 생성하는 방법은 스즈키씨의 템플릿에서 사용되었던 PowerPoint에서 표를 그리고 선의 형태를 정의하는 것입니다. 하지만 제 목적은 손으로 일일이 대충 블록을 배치하는 것이 아니라 코드로 배치 내용을 정의하고 관리하다가 필요할 때마다 PNG 형태의 이미지로 배치도를 내보내는 것이기에 이 방식은 적합하지 않았습니다.
따라서 정확한 좌표계를 가지는 이미지를 코드를 통해 생성하는 본체 그리드 이미지 생성기를 작성해 보았습니다. 본체 그리드 이미지 생성기는 다음과 같이 실행하면 지정된 형식의 그리드 이미지를 PNG 형식으로 생성합니다.
make_board_bg --cols=8 --rows=6 --out=board_8x6.png
블록 배치 정보 형식 정의
다음 단계로 블록 배치 정보 형식을 정의할 차례입니다. 앞에서 정의한 블록 정보를 기반으로 그리드 정보와 배치 정보를 JSON 형식으로 정의합니다. 블록을 배치하려면 블록의 종류와 위치 뿐만 아니라 블록의 회전 방향도 알 필요가 있습니다. 블록을 끼우는 방향에 따라 부품의 접점과 연결 방식이 달라지기 때문입니다.
이러한 정보를 모두 담은 블록 배치 정보는 다음과 같은 방식으로 정의합니다.
{
"schema": "electroblock-layout/v1",
"title": "電子ボタル",
"description": null,
"board": {
"filename": "EX-150.png",
"cols": 8,
"rows": 6,
"cell": 256,
"line": 2,
"init_x": 553,
"init_y": 320,
"part_offset": 8
},
"placements": [
{ "pos": "H2", "id": "S-T", "rot": 0 },
{ "pos": "B3", "id": "SRT-4.7K", "rot": 270 },
{ "pos": "C3", "id": "S-T", "rot": 0 },
{ "pos": "D3", "id": "RT-40V", "rot": 0 },
{ "pos": "E3", "id": "S-I", "rot": 90 },
{ "pos": "F3", "id": "SRT-560K", "rot": 0 },
{ "pos": "G3", "id": "ST-LP", "rot": 0 },
{ "pos": "H3", "id": "RT-40mA", "rot": 180 },
{ "pos": "B4", "id": "SRT-10K", "rot": 270 },
{ "pos": "C4", "id": "S-I", "rot": 90 },
{ "pos": "D4", "id": "SCX-47μ", "rot": 90 },
{ "pos": "E4", "id": "SRX-4.7K", "rot": 270 },
{ "pos": "F4", "id": "S-I'", "rot": 0 },
{ "pos": "G4", "id": "STR-C", "rot": 0 },
{ "pos": "H4", "id": "S-L'", "rot": 90 },
{ "pos": "B5", "id": "S-L", "rot": 0 },
{ "pos": "C5", "id": "STR-E", "rot": 180 },
{ "pos": "D5", "id": "S-I", "rot": 90 },
{ "pos": "E5", "id": "SCI'-0.05", "rot": 0 },
{ "pos": "F5", "id": "SCX-10μ", "rot": 270 },
{ "pos": "G5", "id": "S-I'", "rot": 0 },
{ "pos": "H5", "id": "S-L", "rot": 270 },
{ "pos": "C6", "id": "S-L'", "rot": 90 },
{ "pos": "D6", "id": "S-T", "rot": 0 },
{ "pos": "E6", "id": "S-I", "rot": 90 },
{ "pos": "F6", "id": "RT-4V", "rot": 0 },
{ "pos": "G6", "id": "S-T", "rot": 90 }
]
}이 JSON은 복각판의 판매와 함께 2002년에 출간된 ‘가이드북 갓켄 전자블록의 비밀(ガイドブック 学研電子ブロックのひみつ)’에 새로 추가된 ‘전자 반딧불이(電子ボタル)’라는 회로를 정의한 것입니다. 단, 이 가이드북의 초판에서는 이 회로의 배치도에 오류가 있기 때문에 정정 배치도를 별도로 다운로드해서 확인할 필요가 있습니다.1 전자 반딧불이는 매우 간단하면서도 시각적으로 구현하기 쉬운 전자 회로이기 때문에 다양한 형태로 접할 수 있는 흥미로운 회로입니다.
배치도 컴파일 및 생성기
프로젝트 1단계의 마지막 수순으로 이제 이렇게 생성한 배치도를 컴파일하고 검증하여 필요하다면 PNG 형식으로 배치도를 내보내는 도구를 작성하는 일만 남았습니다.
현재 완성된 도구는 다음과 같은 사항을 검증합니다.
- 블록 정의에 포함되지 않은 블록 ID가 존재하는지 여부
- 블록의 위치가 그리드 영역을 벗어나는지 여부
- 블록 회전 정보가 올바른지 여부
- 이미지 에셋의 해상도가 올바른지 여부
- 배치된 블록의 위치가 중복되는지 여부
특히 1×2나 2×1 크기의 블록이 있을 경우 딱히 위치를 정의하지 않았더라도 인접 그리드를 차지하고 있을 수 있는데 이 항목도 검증 - 필자처럼 여러 개의 제품을 조합할 수 있으므로 블록 수에는 제한이 없음
컴파일러는 다음과 같이 실행할 수 있습니다.
electroblock_compile -l .\layout_denshibotaru.json -o denshihotaru.png이미지 에셋의 위치와 블록 정의는 위와 같이 생략하여 기본값을 사용할 수 있으며, 여러 개의 이미지 에셋이나 블록 정의가 있다면 특정 파일을 지정할 수도 있습니다.
컴파일 결과 문제가 없다면 다음과 같이 배치도가 정상적으로 생성되었음을 확인할 수 있습니다. 출력되는 메시지는 추후 상세하게 개선할 예정입니다.
OK: saved denshibotaru.png
만약 정의 파일에 오류가 있다면 다음과 같은 오류 메시지를 통해 오류 내용을 확인할 수 있습니다.
E010 UnknownBlockId: placements[0] pos=H2 id=S-T2
E010 UnknownBlockId: placements[13] pos=G4 id=STR-C2오류 메시지의 내용은 추후 더 자세한 내용을 담을 수 있도록 개선할 예정입니다.
마무리
이 글은 어디까지나 혼자서 작업 중인 작은 프로젝트의 시작을 다루고 있습니다. 하지만 Chzzk Downloader Suite의 출발이 단순한 100 라인짜리 스크립트에 불과했듯이, 이 프로젝트도 어느 정도 단단해지면 여러분도 사용하실 수 있게 공개할지도 모르겠습니다.
또한 Chzzk Downloader Suite 버전 2.0도 차근차근 준비하고 있으니 조금만 더 기다려 주시기 바랍니다.
따뜻한 봄날을 만끽하시기 바랍니다.
- 필자의 경우 초판과 9판을 소유하고 있는데 2004년에 인쇄된 9판에는 오류가 정정된 배치도가 실려 있는 것을 확인하였습니다. ↩︎
