같은 지도, 세 가지 방법: SVG, Rust 그리고 Flutter

EVnSteven은 편안한 위치에 도달했습니다. 플랫폼은 안정적이며 많은 유지보수가 필요하지 않습니다. 이는 우리가 시작할 때 원했던 바로 그 점입니다: 조용히 작동하는 작은 시스템. 이는 약간의 실험 공간을 남겨두었고, 창립자들이 몇 가지 다른 프로젝트를 시작할 시간을 주었으며, 그 프로젝트들은 마지막 부분에서 확인할 수 있습니다.

그래서 우리는 실험을 했습니다. 홈페이지의 지도를 두 번 다시 만들었습니다: 한 번은 Rust로 작성하여 WebAssembly로 컴파일했고, 한 번은 Flutter로 만들었습니다. 이 글은 세 가지 모두를 한 페이지에 올려 비교합니다.

1. 원본: SVG, CSS 그리고 약간의 JavaScript

간단히 말해: 이것은 우리 홈페이지의 지도입니다. 웹 페이지의 나머지 부분이 만들어지는 방식과 같습니다: 브라우저가 이미 표시하고 애니메이션하는 방법을 알고 있는 도형으로 그려진 그림입니다. 세 가지 중 가장 단순하며, 대부분 방문자가 보는 지도입니다.

이것은 하나의 SVG 그림입니다. 브라우저는 대부분의 애니메이션을 CSS에서 실행하며, 나머지는 작은 스크립트가 처리합니다.

장점으로는: 빌드 단계가 없어서 Hugo 템플릿만 있으면 됩니다. 벡터 방식이므로 어떤 크기에서도 선명함을 유지합니다. 44개의 점 모두 키보드로 접근할 수 있고, 각각 화면 읽기 도구용 라벨이 있습니다. 그리고 몇 마디 단어는 모든 언어로 번역되어 있습니다.

단점은 페이지 내 무게입니다. 지도의 마크업은 약 107KB(압축 시 약 30KB)이며, 실행 중에는 약 670개의 요소와 약 200개의 CSS 애니메이션이 있습니다. 로직 또한 테스트하기 어렵습니다: 타이밍이 CSS 키프레임과 페이지 내 스크립트 안에 있기 때문에, 유일한 테스트 방법은 직접 보는 것입니다.

2. Rust와 WebAssembly

간단히 말해: Rust는 빠르고 프로그램이 실행되기 전에 많은 실수를 잡아내는 것으로 알려진 프로그래밍 언어입니다. 여기서는 지도의 “두뇌"를 Rust로 작성하고, 브라우저에서 실행할 수 있는 컴팩트한 형태인 WebAssembly로 패키징하여, 마치 화가가 하나의 캔버스를 초당 여러 번 다시 그리듯 지도를 스스로 그리도록 했습니다. 사용자에게는 동일하게 보입니다.

전체 지도는 WebAssembly로 컴파일된 Rust가 단일 캔버스에 그립니다. Rust 코드는 지도 동작 전체를 소유하며 매 프레임마다 모든 것을 다시 그립니다.

우리가 좋았던 점은 로직이 브라우저와 관련 없는 순수 Rust라는 것입니다: 위치와 변경 시점을 계산하는 수학, 그리고 육지 윤곽선을 읽는 파서가 포함되어 있습니다. 13개의 테스트가 있으며, 이들은 1초의 일부만에 실행되고, 사이클 타이밍이 잘못되면 누군가 이상해 보인다고 알아차리기 전에 테스트가 실패합니다. 약 1,070줄의 Rust 코드 중 약 3분의 1은 이 테스트된 핵심(테스트 포함)이고, 나머지는 캔버스에 그리기와 마우스 이벤트 처리를 담당합니다.

페이지는 매우 가볍게 끝납니다: 하나의 캔버스 요소만 있습니다. 하지만 다운로드 크기는 더 큽니다. 컴파일된 모듈은 약 254 KB(압축 시 약 92 KB)이고, 빌드 도구가 생성하는 약 28 KB의 JavaScript 접착 코드가 추가됩니다. 그리고 작업할 때 느끼는 비용도 있습니다:

• 툴체인. 빌드에는 Rust, WebAssembly 타겟, 그리고 라이브러리 버전과 정확히 일치해야 하는 커맨드라인 도구가 필요합니다. 우리의 빌드 스크립트는 먼저 테스트를 실행하며, 하나라도 실패하면 중단합니다.
• 개별 도시 접근을 위한 키보드나 스크린 리더 지원 없음. 캔버스는 그림입니다. SVG 버전의 44개 포커스 가능한 점들은 사라졌습니다.
• 영어만 지원. 라벨은 프로그램 안에 작성되어 있습니다.
• 블러. 부드러운 그림자 가장자리는 캔버스 블러 필터를 사용하며, 모든 브라우저가 지원하지 않습니다. 우리는 Safari를 테스트하지 않았으며, 그곳에서는 가장자리가 뚜렷할 수 있습니다.

3. Flutter

간단히 말하면: Flutter는 Google에서 만든 툴킷으로, 하나의 코드 세트로 휴대폰, 컴퓨터, 웹에서 실행되는 앱을 만듭니다. 웹 페이지의 자체 빌딩 블록을 사용하지 않고, 모든 것을 직접 그립니다. 여기서 지도는 이 페이지 안에 표시된 작은 앱이며, 우리 충전기 계산기를 구동하는 동일한 툴킷입니다.

이 지도는 커스텀 페인터로 그려지며, 여기 프레임 안에 표시됩니다. Flutter는 동일한 코드로 휴대폰과 데스크톱 앱도 만들 수 있는데, 이것이 주요 장점입니다: 지도를 한 번 작성하면 여러 곳에서 실행할 수 있습니다.

러스트 map과 동일한 논리를 다트로 포팅한 것으로, 11개의 테스트가 포함되어 있습니다. 테스트를 포함하여 약 1,100줄입니다. Flutter는 각 도시를 화면 판독기에 라벨이 붙은 버튼으로 전달하는 반면, 캔버스 버전에는 이 기능이 없습니다(실제 화면 판독기와 얼마나 잘 작동하는지는 확인하지 않았습니다). 또한 가장 큰 다운로드 크기를 가집니다: 앱 크기는 약 1.8MB(압축 시 약 535KB)입니다. Flutter의 드로잉 엔진은 별도의 추가 다운로드이지만, 사이트는 이미 계산기와 엔진을 공유하고 있어서 계산기를 열어본 방문자는 다시 다운로드하지 않습니다. 텍스트는 사이트의 글꼴인 Merriweather로 설정되어 있으며, 브라우저가 실행 시점에 이를 가져옵니다.

우리가 발견한 것

속도에 대한 추가 언급입니다. 저희 확인 결과, SVG 지도와 Rust 지도는 모두 화면 새로고침 속도(테스트 디스플레이에서 약 120프레임/초)로 실행되어 프레임 속도만으로는 구분할 수 없었습니다. Flutter의 프레임 속도는 측정하지 않았고, 배터리나 CPU 사용량도 측정하지 않아 어느 쪽이 휴대폰에서 더 가벼운지 말할 수 없습니다.

우리를 놀라게 한 점들

일부 세부 사항은 잘못 이해하기 쉽습니다. 우리의 첫 번째 클론들은 키와 시계를 지도에서 고정된 비율로 그렸기 때문에 작은 화면에서는 축소되어 원본에 비해 매우 작아 보였습니다. 원본은 페이지의 자체 폰트 단위(rem, 화면 너비에 따라 변함)로 크기를 지정합니다. 클론들은 이제 페이지에서 그 크기를 읽어옵니다. 시계도 다릅니다: 원본의 시계 바늘은 15분 단위로 움직이지만, Rust와 Flutter 버전에서는 연속적으로 회전합니다.

시간대는 내장되어 있지 않습니다. Rust가 WebAssembly로 컴파일되거나 Dart는 “Asia/Dubai"를 아는 시간대 데이터베이스를 포함하지 않습니다. 둘 다 브라우저에 내장된 Intl 서비스를 통해 시간대를 요청하며, 이 서비스는 일광 절약 시간도 올바르게 처리합니다.

세 가지 모두 입력을 공유합니다. Rust와 Flutter 지도는 자신들이 위치한 페이지에서 도시 목록과 육지 윤곽선을 읽어오며, 이는 SVG 지도가 사용하는 동일한 데이터입니다. 도시를 변경하면 세 가지 모두 변경됩니다. 이는 또한 지도가 해당 데이터를 제공하는 페이지에서만 실행될 수 있음을 의미합니다.

Flutter 웹은 기억합니다. Flutter 웹은 자체 캐시를 설치하므로 재빌드 후에도 캐시를 지우기 전까지는 이전 버전을 계속 보게 됩니다.

우리의 결론

SVG 지도는 홈 페이지에 남아 있습니다. 이 크기의 그림에 대해 가장 가볍고, 접근성이 좋으며, 번역되어 있고, 빌드할 필요가 없습니다. Rust는 더 흥미로운 2위 주자입니다: 만약 지도 로직이 증명 가능하게 정확해야 하거나 브라우저에서 무거운 계산을 해야 한다면, 테스트된 Rust 코어가 좋은 방법입니다. Flutter는 지도가 Flutter 앱 내에 포함되어야 할 경우에 적합합니다.

실험은 제품을 변경하지 않아도 실행할 가치가 있습니다. 우리는 각 접근 방식이 드는 비용에 대해 더 명확한 그림을 얻었고, 지도가 어떻게 동작하는지 테스트된 설명을 얻었으며, 세 가지 모두를 직접 볼 수 있는 페이지를 만들었습니다.

우리 창업자들이 다음에 만드는 것들

안정적인 플랫폼은 다른 아이디어를 위한 시간을 남깁니다. EVnSteven 외에도, 우리 창업자들은 다음과 같은 프로젝트에 참여하고 있습니다:

라이드헤일링, 곧 출시 예정 Kimem ↗ (opens in a new tab) 에티오피아 바히르 다르를 위한 라이드헤일링 서비스로, 창업자 Mekonnen Alemu가 개발했습니다. 승객은 예약 전에 요금 예상치를 확인하고, 지도에서 가장 가까운 운전자가 다가오는 모습을 볼 수 있으며, 여행이 끝난 후 미터 요금을 현금으로 지불합니다.

비영리, 오픈 소스 StrayCats ↗ (opens in a new tab) David가 길고양이, 떠돌이 고양이 또는 어떤 고양이든, 심지어 그 고양이가 개일지라도 돌보는 사람들을 돕기 위해 시작한 프로젝트입니다. 아직 아이디어 단계이며 앱은 없습니다. David는 여러분의 아이디어와 피드백을 환영합니다. Saibo, 2010–2026에게 헌정합니다.

현금 추적, 무료, 곧 출시 Effectivo ↗ (opens in a new tab) 현금을 사용하는 사람들을 위한 약간의 변형이 가미된 불완전한 회계 시스템입니다. 몇 번의 탭으로 구매를 기록하고, 지갑에 있는 현금을 세며, 가치 있었던 지출을 되돌아볼 수 있습니다. 변형은 현금을 계속 사용하는 모든 사람이 다른 사람들을 위해 현금을 유지하는 데 도움을 준다는 점입니다. 무료이며 광고가 없고, Android와 iPhone용으로 곧 출시되며, 현재 베타와 웹 데모가 운영 중입니다.