lognal

프로젝트 소개

lognal은 자기 화면에 로그를 보여 줘야 하는 애플리케이션을 위한 로그 뷰어입니다. 웹 페이지 안의 콘솔 패널, Flutter 앱의 디버그 화면, 로그 파일을 읽는 창이 그런 자리입니다. 항목은 평범한 데이터로 들고 있고 캔버스에는 화면에 보이는 줄만 그리므로, 한 프레임의 비용은 기록의 길이가 아니라 화면에 보이는 양으로 정해집니다. 그 아래의 코어, 곧 저장소와 필터, 글자 배치, 레이아웃은 TypeScript와 Dart로 파일 단위까지 맞춰 두 번 작성했습니다. 그래서 줄이 접히는 위치와 너비, 검색에 걸리는 방식이 브라우저와 앱에서 똑같습니다.

런타임이 원래 출력하던 것을 그대로 옮겨 보여 줍니다. 브라우저에서는 console.log, console.table, console.group을, Flutter에서는 print와 debugPrint를 받아 오고, 원래 출력도 계속 동작합니다. 로그 파일은 인코딩을 알아내 읽고, ANSI 이스케이프 코드를 색으로 바꾸며, 계속 늘어나는 파일을 따라갈 수도 있습니다. 객체와 리스트, 맵, 오류는 기록된 순간의 값으로 붙잡아 두고 그 자리에서 펼치고 접습니다. 도구 막대는 새 로그를 따라가고, 글자와 수준으로 걸러 내며, 검색할 때는 나머지를 숨기지 않고 일치하는 곳마다 강조합니다. 입력 줄을 켜면 명령을 처리 함수에 넘기고 그 답을 출력합니다. 한글을 비롯한 넓은 문자는 두 칸을 차지해 격자가 어긋나지 않고, 줄이 접힐 때 한글 단어는 쪼개지지 않으며, 입력 줄은 입력기의 조합이 끝날 때까지 기다립니다. 조작 버튼은 접근 가능한 이름을 가진 실제 버튼이고, 화면에 보이는 항목은 숨은 목록에 한 번 더 담겨 스크린 리더가 읽을 수 있습니다.

npm 패키지에는 런타임 의존성이 없습니다. React는 lognal/react의 컴포넌트를 쓸 때만 필요한 선택적 peer 의존성이고, 스타일시트는 한 번 불러오면 됩니다. Flutter 패키지는 Flutter SDK에만 기대며 Material도 Cupertino도 없이 위젯 계층 위에 만들어져서, 어떤 앱에 넣어도 두 번째 디자인 시스템을 끌고 오지 않습니다. 팔레트 여섯 가지가 기본으로 들어 있고, auto는 시스템의 밝은 화면과 어두운 화면 설정을 따르며, 직접 만든 테마는 CSS 사용자 정의 속성 한 묶음이나 buildTheme 호출 한 번이면 됩니다. JavaScript 패키지는 ESM이고 TypeScript 타입 정의를 함께 담고 있으며, 두 패키지는 버전과 변경 기록을 따로 관리합니다.

기능

• 문서 지원

• TypeScript 지원

• 다국어 지원

• 테스트로 검증됨

• 크로스플랫폼 지원

• 접근성 지원

• 다크 모드

• 트리 셰이킹 지원

• 의존성 없음