문제의 시작Flutter로 InteractiveViewer를 사용해서 큰 이미지나 콘텐츠를 확대/축소할 수 있는 기능을 구현할 일이 생겼다. 사용자가 2배, 3배로 확대해서 볼 수 있게 하는 건데, 문제는 확대한 상태에서 사용자가 현재 어느 부분을 보고 있는지 알기 어렵다는 것이었다.요구사항은 간단했다: "확대했을 때 현재 보고 있는 영역을 작은 박스로 표시해주세요. 포토샵 네비게이터 패널처럼요."처음엔 "아, 그거 쉽지"라고 생각했는데... 막상 구현해보니 생각보다 복잡했다. 특히 좌표계 변환 부분에서 꽤 삽질을 했다.왜 ViewportIndicator가 필요한가?사용자가 큰 이미지나 영상을 확대할 때의 문제점을 생각해보자:🔍 2배 확대하면 전체의 1/4만 화면에 보임📍 현재 어느 부분을 보고 있는..

Flutter 프로젝트에서 .gitignore가 제대로 동작하지 않을 때 해결하는 방법Flutter 프로젝트를 시작하면서 가장 먼저 마주치는 것 중 하나가 .gitignore 파일 설정이다. 특히 .dart_tool/ 디렉터리는 Dart 도구들이 자동으로 생성하는 파일들이 담겨있어서 버전 관리에 포함할 필요가 없다. 당연히 .gitignore 파일에 .dart_tool/을 추가하면 Git이 무시할 것이라고 생각하기 마련이다. 그런데 여기서 문제가 발생한다.분명히 .gitignore 파일에 .dart_tool/을 추가했는데도 git status를 실행하면 여전히 'untracked files' 목록에 .dart_tool/ 디렉터리가 나타나는 것이다. 이상하다. 분명히 설정했는데 왜 무시되지 않는 걸까?문제..

Dart는 강타입 언어다. 즉, 컴파일 시점에 타입이 결정되므로 런타임에 타입과 관련된 에러가 발생하는 일은 드물다. 단, Dart에는 Typescript에서 제공하는 Any와 비슷한 역할을 하는 dynamic이 존재한다. 최근에는 HTTP 요청을 통해 전송되는 패킷 본문에 보통 JSON 포멧을 많이 사용하는데, 이 JSON 객체 안에 어떤 타입이 들어있는지 정확하게 추론이 불가능하다. 이럴 때 주로 사용되는 것이 바로 dynamic이며, 특히 백엔드는 약타입 언어를 사용하는 경우 API 명세가 정확하게 지켜지지 않으면 이따금 JSON 내부 타입을 파싱하는 과정에서 예외가 빵빵 터지게되는 것이다.JSON 응답의 타입은 어떻게 신뢰할 수 있을까?보통 Dart에서 응답을 받은 데이터를 사용하기 위해서는, 데..

평소에 코딩테스트랑은 담을 쌓고 살던 와중, 어쩌다보니 코딩테스트를 앞두고 소프티어에서 2~3레벨 문제를 풀어보고 있었다. Javascript로 풀어볼 수 있는 문제를 필터링했는데 C, C++, Java, Python, Rust만 사용할 수 있는 이 씁쓸함이란... 아무튼 첫번째로 잡아본 문제는 'CPTI'. 출처 - 소프티어, CPTI Softeer - 현대자동차그룹 SW인재확보플랫폼 softeer.ai 문제는 링크만 남겨놓을까 했었는데, 근시일내에 소프티어 서비스가 종료된다는 공지사항이 떠있길래 부랴부랴 캡쳐해서 백업해뒀다. 아무튼 문제는 다음과 같다. 이진수가 나온 시점에서 비트마스킹 생각이 먼저 떠올라서, scanf()를 사용해서 2진수 문자열을 입력받아 10진수로 변환한 뒤 배열에 저장하는..

때는 바야흐로 지금으로부터 6년 전인 2019년, 한창 비트마스킹으로 스트레스를 받던 시절이었다. 회사에서 출시하는 IoT 장비의 모델이 늘어날 때마다 새로운 기능이 추가되는데, 이 기능이 벌써 32개를 넘어가면서 64비트로 확장하는 업무를 할 때였다. 당시만해도 여러대의 IoT 장비를 관리하는 제품을 만드시는 분은 '설마 기능이 64개까지 늘어나겠냐'면서 단순히 int로 작성된 타입을 int64로 변경하는데 그쳤지만, Javascript를 사용해야하는 나는 그럴수가 없었다. Javascript에서 제공하는 number의 범위는 -(2^53-1) ~ (2^53-1)인데, 이는 64비트를 온전히 표현하지 못한다는 의미가 된다. 따라서 브라우저 콘솔 등에 (1을 출력해보면, 오버플로로 인해 0이 아닌 -2..

영상을 직접 처리하기 위해 카메라로부터 영상을 스트리밍하다보면, 색이 이상하게 표시되는 경우가 있습니다. 영상을 스트리밍할때는 효율적으로 데이터를 전송하기 위해서 YUV 색공간을 사용하는데, 일반적으로 모니터같은 디스플레이 장치는 RGB 색공간을 사용하기 때문이죠. 이번 글에서는 YUV와 RGB 색공간의 차이에 대해 살펴보고, 자주 사용되는 라이브러리에 대해 알아봅니다.YUV 색공간이란?YUV는 인간의 시각적 특성을 고려해 개발된 색상 인코딩 시스템입니다. 우리 눈은 색상보다 밝기 변화에 더 민감하다는 특성을 활용한 것이죠.YUV 색공간은 세 가지 주요 구성 요소로 이루어집니다:Y (휘도): 이미지의 밝기 정보U, V (색차): 색상 정보를 나타내는 두 가지 요소수학적으로 RGB에서 YUV로의 변환은 다..