Code for Life

[Study-English] 기획

baruna.mark — Sat, 18 Apr 2026 14:43:42 +0900

개인적으로 영어 공부를 좀 해야되는 상황입니다. 여러 좋은 책과 자료는 참 많습니다. 하지만 항상 조금 하다가 포기하고 있는 것 같습니다. 사실 지금은 엄청 급한 상황이라서 공부를 해야됩니다. 특정 상황에 피팅된 학습이라도 해야되는 상황이다 보니 과외를 하면서 스크립트를 만들기도 하고 공부를 하기도 하는데 내 상황과 딱 맞다 라는 생각이 안들고 있습니다.

그래서 우선 영어로 이력서를 작성했습니다. 그리고 그 작성한 문서를 기반으로 스크립트를 생성해봤습니다. 생성하고 나니 뭔가 듣고 써볼만한게 필요해서 만들기 시작했습니다.

사실 이 사이트(https://zafrem.github.io/Study-English/)는 레플리카 랄까? 실제 생성한 스크립트와는 다릅니다.

개발자의 영어 공부 학습자료 구축기

프로그래머 + 영어는 상당히 어울리는 조합이지만 저 같은 레거시 프로그래머중에는 영어를 못하는 경우도 많이 있다고 생각합니다.

모든 개발 문서와 기술문서를 영어로 보는데 정작 영어 면접은 못보는 어이 없는 실력이죠. 이미 늦었다고 생각하기도 되는데... 사실 이 나이에 공부하는게 맞나? 라는 생각도 들긴해요.

어떻든 주제는 기술 면접이나 스탠업 미팅으로 기준으로 생성하려고 합니다.

기술 스팩

왜 다시 '바닐라(Vanilla)'인가? : 성능과 가벼움의 미학
최근 프레임워크 홍수 속에서 저는 Vanilla JS와 Web API만으로 프런트엔드를 구축했습니다.
1. 이유: 기술 면접이나 스탠업 미팅 연습을 위한 도구는 '가벼움'과 '즉각성'이 생명입니다.
2. 핵심 기술: 무거운 라이브러리 대신 Audio API, Speech Recognition, IndexedDB를 직접 제어하여 브라우저 리소스를 최소화했습니다.
3. 비즈니스 가치: 프레임워크 의존성을 제거함으로써 유지보수 비용을 낮추고 로딩 속도를 극대화했습니다.
자동화 엔진: Python과 Google Cloud의 만남 학습 콘텐츠 생성을 위해 src/tts_generator.py를 활용했습니다.
1. Neural2 Voice: 로봇 같은 음성이 아닌, 구글 클라우드의 고품질 신경망 기반 음성을 활용해 실제 엔지니어와의 대화 같은 현장감을 구현했습니다.
2. Makefile 오케스트레이션: TTS 생성 -> 메타데이터 정리 -> 플레이리스트 생성으로 이어지는 전체 흐름을 Makefile 하나로 자동화했습니다. 이는 운영 효율성을 극대화하는 엔지니어링의 핵심입니다.
기술적 고찰: PWA의 'Stale Cache' 문제 해결하기
1. 모바일에서 사용 가능해야됩니다. PWA를 이용합니다.
2. 오프라인에서 사용가능해야되니 캐싱이 가능하게 구성하려고 합니다

이제 하나씩 구현해 가는 과정을 설명드리겠습니다. 저는 제 이력을 만들었으니 다들 각자 이력으로 만들어서 암기하고 배우시기 바랍니다.

[Desk-tools] 업무 도구 모음: 프로젝트 도구 #3

baruna.mark — Sun, 29 Mar 2026 18:05:40 +0900

드디어 Desk-tools 프로젝트의 모든 라인업이 공개되었습니다. 마지막 파트에서는 코드를 정돈하고, 민감한 정보를 보호하며, 심지어 내 컴퓨터 안에서만 동작하는 Local LLM AI 모델까지 연결하는 강력한 기능들을 다룹니다.

Part #1 - Calculator, Converter, Designer
Part #2 - Generator, Developer, Encoder
Part #3 - Formatter, Security, Other, AI

https://zafrem.github.io/Desk-tools/

1. FORMATTER: 가독성이 곧 실력, 정돈의 미학 (5개 도구)

협업의 시작은 깔끔한 코드와 문서에서 나옵니다. 12개 이상의 언어를 지원하는 포맷터 그룹입니다.

Code & SQL Formatter: Prettier와 LSP 엔진을 기반으로 JS, Python, Java 등 주요 언어의 스타일을 자동 교정합니다. 특히 복잡한 SQL 쿼리를 MySQL, PostgreSQL 등 각 방언(Dialect)에 맞춰 정렬해 주는 기능입니다.
Text Case Converter: camelCase, snake_case, PascalCase 등 프로그래밍 컨벤션에 맞게 텍스트를 즉시 변환합니다. 변수명을 지을 때 더 이상 고민할 필요가 없습니다.
Markdown & Markup: 실시간 미리보기를 지원하는 마크다운 에디터와, 마크다운을 Atlassian(Jira/Confluence) 위키 문법으로 상호 변환해 주는 도구입니다. 블로그 글을 사내 위키로 옮길 때의 번거로움을 0으로 만듭니다.

2. SECURITY: 보안 전문가의 '진짜' 도구 상자 (5개 도구)

이 프로젝트의 기획 의도가 가장 잘 드러나는 그룹입니다. 모든 로직은 오프라인으로 동작하여 데이터 유출 위험이 없습니다.

JWT Decoder: OAuth 인증 등에 쓰이는 JSON Web Token을 시각화합니다. 단순히 내용을 보여주는 것에 그치지 않고, Secret Key를 입력하면 시그니처 검증과 만료 시간(exp) 확인까지 수행합니다.
Encryption & Hash: AES-GCM 대칭키 암호화와 RSA-OAEP 공개키 암호화를 지원합니다. 또한 파일의 무결성을 검증하는 다양한 해시(SHA-256, BLAKE2 등)를 생성하고, 거꾸로 해시값의 유형을 식별하고 강도를 분석하는 Hash Analyzer 기능도 포함되었습니다.

3. OTHER: 업무의 빈틈을 채우는 스위스 아미 나이프 (4개 도구)

어느 카테고리에도 속하지 않지만, 없으면 아쉬운 실속형 도구들입니다.

PDF Editor: 외부 서버 업로드 없이 브라우저에서 직접 PDF를 병합, 분할, 암호화하거나 페이지를 회전시킵니다. pdf-lib를 활용해 완벽한 로컬 처리를 구현했습니다.
Character Map & Pomodoro: 1,000개 이상의 특수문자와 이모지를 빠르게 찾아 복사하고, 25분 집중-5분 휴식의 뽀모도로 타이머로 업무 리듬을 관리합니다.
Iframe Viewer: 새 탭을 띄우지 않고도 MDN이나 위키피디아 같은 외부 문서를 작업 창 안에서 바로 참조하거나 테스트를 위한 기능입니다.

4. AI: 내 컴퓨터 속의 비밀 비서 (Ollama Local LLM)

Desk-tools의 화룡점정입니다. 클라우드 AI 서비스(ChatGPT 등)에 회사 코드를 물어보는 것이 불안했던 분들을 위한 솔루션입니다.

AI Chat (via Ollama): 내 로컬 환경에 설치된 Ollama 서버와 통신하여 Llama 3 등의 모델을 브라우저에서 바로 사용할 수 있습니다. 데이터가 외부 서버로 나가지 않는 완벽한 프라이버시 AI 환경을 제공합니다.

Part #3 핵심 요약 및 최종 가이드

그룹	도구 수	핵심 가치	추천 시나리오
Formatter	5개	일관성 & 가독성	코드 리뷰 전, 위키 문서 작성 시
Security	5개	데이터 보호 & 검증	API 인증 디버깅, 파일 무결성 확인
Other	4개	범용성 & 집중력	PDF 편집, 업무 시간 관리
AI	1개	프라이버시 지능	보안이 중요한 로컬 코드 가이드

Desk-tools 58개 도구 설명을 마치며

Desk-tools는 단순한 유틸리티 모음이 아닙니다. "내 데이터가 안전하게 내 브라우저 안에서만 처리된다"는 확신이 주는 자유로움을 목표로 달려왔습니다. 사실 요즘 브라우저는 거의 로컬 PC의 대부분의 기능이 가능하니까요.

웹 개발자라면 REST Client와 Code Formatter를,
보안 담당자라면 JWT Decoder와 Hash Analyzer를,
콘텐츠 마케터라면 SEO Checker와 Markdown Preview를

적재적소에 꺼내 쓰며 여러분만의 업무 생태계를 구축해 보시기 바랍니다. 이 모든 도구는 여러분의 브라우저에서 지금 바로 실행 가능하고 계속 개선을 하려고합니다.

[Desk-tools] 업무 도구 모음: 프로젝트 도구 #2

baruna.mark — Sun, 29 Mar 2026 17:57:59 +0900

지난 Part #1에서 기초 체력을 다졌다면, 이번 Part #2에서는 본격적으로 업무의 속도를 높여주는 '생산성 가속기'들을 소개합니다. 특히 반복적인 코딩 작업을 줄여주는 생성기들과, 외부 툴 없이 내 브라우저에서 즉시 API를 테스트할 수 있는 강력한 기능들을 모았습니다.

Part #1 - Calculator, Converter, Designer
Part #2 - Generator, Developer, Encoder
Part #3 - Formatter, Security, Other, AI

https://zafrem.github.io/Desk-tools/

1. GENERATOR: 단순 반복을 끝내는 13가지 생성 도구

"복사 붙여넣기"도 반복되면 고통입니다. Generator 그룹은 데이터 구조를 코드로 바꾸거나, 복잡한 SEO 설정을 클릭 몇 번으로 끝내는 데 집중합니다.

개발 가속화 (JSON to Code / Schema): JSON 데이터를 넣으면 TypeScript Interface, Python Class, Java Class로 즉시 변환합니다. API 응답 값에 맞게 모델을 정의하는 시간을 80% 이상 단축해 줍니다.
보안 및 식별 (UUID / Password): 암호학적으로 안전한 랜덤 비밀번호와 고유 ID(UUID v1, v4)를 생성합니다. 역시나 서버 통신 없이 로컬에서 생성되므로 절대 유출되지 않습니다.
마케팅 & SEO 최적화:
- QR Code: 링크나 텍스트를 즉시 QR로 변환(PNG 다운로드 가능).
- Sitemap / Robots.txt: 검색 엔진 크롤러를 위한 필수 파일들을 표준 규격에 맞게 생성합니다.
- Schema Markup (JSON-LD): 구글 검색 결과에 별점이나 가격이 나오게 하는 구조화 데이터를 클릭만으로 설계할 수 있습니다.

2. DEVELOPER: 내 브라우저 안의 작은 실험실 (7개 도구)

개발자 그룹은 "이게 왜 안 되지?"라는 의문을 해결하는 데 최적화되어 있습니다. 별도의 프로그램을 설치하지 않고도 복잡한 테스트를 수행할 수 있습니다.

REST API Client & cURL Builder: "브라우저판 포스트맨(Postman)"입니다. GET/POST 요청을 보내고 응답을 확인하며, 해당 요청을 터미널에서 쓸 수 있는 cURL 명령어로 즉시 변환해 줍니다.
Data Explorer: 복잡하게 얽힌 JSON/XML 데이터를 트리 구조로 시각화합니다. 수천 줄의 로그 데이터에서 내가 원하는 필드를 찾는 스트레스를 줄여줍니다.
Regex Tester & Cron Builder:
- 작성할 때마다 헷갈리는 정규표현식을 실시간 매칭으로 테스트합니다.
- 리눅스 스케줄링을 위한 Cron 표현식을 사람이 읽기 쉬운 문장(예: "매주 월요일 정오")으로 풀어서 보여줍니다.
Text Diff: 두 텍스트나 코드의 차이점을 Git Diff 스타일로 명확하게 보여줍니다. 코드 리뷰 전이나 설정 파일 비교 시 유용합니다.

3. ENCODER: 데이터의 안전과 호환성을 위한 5가지 필터

데이터를 전송하거나 보관할 때 발생하는 인코딩 문제는 늘 골칫거리입니다. Encoder 그룹은 이 과정을 투명하고 안전하게 처리합니다.

웹 표준 인코딩 (Base64 / URL / HTML):
- 이미지를 텍스트(Base64)로 바꾸거나, URL에 포함될 특수문자를 안전하게 인코딩합니다.
- HTML Entities는 XSS 공격을 방어하기 위해 특수문자를 치환할 때 필수적입니다.
인코딩 복구 (Encoding Converter): 이른바 '외계어'로 깨진 문자(Mojibake)를 UTF-8, EUC-KR 등 다양한 포맷으로 돌려보며 정상적인 텍스트로 복구합니다. 레거시 시스템의 데이터를 다룰 때 생존 도구와 같습니다.

핵심 요약 비교

카테고리	도구 수	핵심 가치	주요 사용자
Generator	13개	시간 절약 & 표준화	개발자, 마케터, SEO 담당자
Developer	7개	버그 추적 & 성능 검증	백엔드/프론트엔드 개발자, DevOps
Encoder	5개	보안 & 데이터 호환성	모든 IT 실무자

마치며: "만들고, 테스트하고, 보호하라"

Part #2의 도구들은 제가 실무에서 "아, 포스트맨 켜기 귀찮은데", "이 JSON 언제 클래스로 다 만들지?" 싶었던 순간들의 결과물입니다. 모든 도구가 오프라인으로 동작하기 때문에, 사내 보안 규정을 어기지 않으면서도 강력한 개발 환경을 구축할 수 있습니다.

이제 58개 도구 중 절반이 넘는 30개의 도구를 살펴보았습니다. 마지막 Part #3에서는 데이터의 가독성을 높여주는 Formatter, 그리고 보안 전문가의 진가가 드러나는 Security 그룹을 다루며 마무리하겠습니다.

[Desk-tools] 업무 도구 모음: 프로젝트 도구 #1

baruna.mark — Sun, 29 Mar 2026 17:50:13 +0900

사소한 불편함에서 시작했는데, 정신을 차려보니 구현한 도구가 어느덧 50+개에 달하게 되었습니다. 도구들을 한 번에 소개하기엔 양이 너무 많아, 총 3회에 걸쳐 연재해 보려고 합니다. 오늘 그 첫 번째 순서는 업무의 기초 체력이 되는 계산기(Calculator), 데이터의 형태를 바꾸는 변환기(Converter), 그리고 시각적 요소를 다듬는 디자인(Designer) 도구들입니다.

Part #1 - Calculator, Converter, Designer
Part #2 - Generator, Developer, Encoder
Part #3 - Formatter, Security, Other, AI

https://zafrem.github.io/Desk-tools/

1. CALCULATOR: 인프라부터 SEO까지, 영리한 13가지 계산기

단순한 사칙연산은 계산기 앱으로도 충분합니다. 하지만 우리에게 필요한 건 '맥락이 있는 계산'이죠.

인프라 & 네트워크 전용: 보안 담당자와 엔지니어의 필수템인 Chmod 계산기(8진수↔기호 변환)와 IP Subnet 계산기(IPv4/v6 지원)를 탑재했습니다.
금융 & 비즈니스 시뮬레이션: 대출 상환 스케줄을 짜거나 복리 이자()를 계산하여 재무 계획을 세울 수 있습니다. 월급 실수령액 계산기도 빼놓을 수 없죠. (사실 이건 그냥 진짜 개인적인... 이유로 들어가 있습니다.)
콘텐츠 & SEO 전략: 블로그 글을 쓸 때 유용한 키워드 밀도 분석, 메타 태그 길이 검증, 예상 읽기 시간 계산 등 마케팅적 수치를 바로 확인할 수 있습니다.

2. CONVERTER: 데이터 유출 걱정 없는 7가지 데이터 브리지

변환 도구의 핵심은 '보안'입니다. 민감한 로그나 내부 데이터를 외부 웹사이트에 붙여넣는 불안함을 없애기 위해 모든 변환 로직을 클라이언트 사이드(Browser)에 가두었습니다.

포맷 변환의 종결자: JSON, XML, CSV, YAML, TOML 등 개발 환경에서 만나는 거의 모든 형식을 서로 교차 변환합니다.
디버깅의 동반자: Unix 타임스탬프를 날짜로 바꾸거나, 16진수(HEX)와 이진수(Binary)를 오가는 작업, 그리고 문자 깨짐(Mojibake)을 해결하는 인코딩 변환이 가능합니다.
문서 마이그레이션: 마크다운으로 쓴 글을 지라(Jira)나 컨플루언스(Confluence)용 위키 문법으로 즉시 변환해 줍니다.

3. DESIGNER: 무거운 툴 없이 끝내는 5가지 비주얼 작업

디자이너가 아니더라도 아이콘을 만들거나 이미지를 수정해야 할 때가 있습니다. 포토샵 대신 브라우저에서 가볍게 해결하세요.

에셋 자동 생성: 이미지 하나만 넣으면 웹과 앱에 필요한 모든 사이즈의 파비콘과 아이콘을 한 번에 생성하고 다운로드합니다.
빠른 편집: 배경 제거(Background Remover)나 필터 적용, 색상 팔레트 추출 등을 지원합니다.
레트로 감성: 픽셀 단위로 정밀하게 그림을 그릴 수 있는 Pixel Art Editor는 간단한 스프라이트나 아이콘 제작에 탁월합니다.

요약 비교표

그룹	도구 수	핵심 가치	주요 기능 예시
Calculator	13개	정확한 수치 도출	Chmod, IP Subnet, 복리 계산, SEO 분석
Converter	7개	데이터 무결성 & 보안	JSON↔CSV, 타임스탬프, 인코딩 변환
Designer	5개	작업 속도 & 편의성	파비콘 생성, 배경 제거, 픽셀 에디터

마치며: "오프라인도 강력합니다"

Part #1에서 소개한 25개의 도구는 모두 데이터가 외부로 단 1바이트도 나가지 않습니다. 이것이 제가 58개의 도구를 굳이 직접 만든 이유이기도 합니다.

다음 Part #2에서는 개발 효율을 극대화해 주는 Generator, Developer, Encoder 그룹에 대해 다뤄보겠습니다. 58개의 도구가 하나로 뭉쳐 만드는 시너지를 기대해 주세요!

[Desk-tools] 업무 도구 모음 - 기본 기능

baruna.mark — Sun, 29 Mar 2026 17:37:34 +0900

이 프로젝트의 가장 베이스인 부분으로 생각을 하고 구현을 했습니다. 다만 오프라인이다 보니 협업에서 사용하는 툴은 거의 없습니다. 협업보다는 오히려 스스로 작업 계획을 하고, 오히려 인수인계를 위한 자료 같은게 될 것 같습니다.

사실 제가 사용하는 방법도 원맨쇼를 위한 툴에 가깝습니다.

그리고 보면 사실 크게 특별할 것도 없는 기능들입니다. 그리고 굳이 여기 이렇게 만들 필요가 있어? 라고 생각 할 수 도 있는 부분이지만 구현항목을 보면 거의 내가 작업한 히스토리를 남기고 내가 작업하기 조금 편하게 하기 위한 내용들이 대부분입니다.

https://zafrem.github.io/Desk-tools/

작업의 흐름을 한눈에: 칸반보드 (Kanban Board)
- 작업 생성: "New Task" 버튼으로 새 작업 추가
- 진행 상황 추적: 프로그레스 값(progress) 변경으로 진행도 업데이트
- 드래그 앤 드롭: KanbanBoard 컴포넌트에서 구현
- 작업 편집/삭제: 각 작업에 대해 수정 및 삭제 가능
- 데이터 관리: Dexie.js의 ganttTasks 테이블에 저장
- 타임스탬프: createdAt, updatedAt으로 생성/수정 시간 추적
생각의 정리: 메모장 (Notepad)
- 노트 생성: "New Note" 버튼으로 신규 노트 추가
- 마크다운 지원: 링크, 볼드, 이탤릭 등 서식 지원
- 태그 시스템: 노트에 태그 추가로 분류
- 좌측: 노트 리스트 (검색, 삭제 가능)
- 우측: 에디터 (마크다운 프리뷰 지원)
- NoteEditor 컴포넌트: 풍부한 편집 기능
루틴의 관리: 일일 할 일 (Daily Tasks)
- 일일 체크리스트: 매일 반복되는 작업
- 완료 추적: 각 작업의 완료 여부 체크
- 재설정 기능: 매일 자정에 자동 리셋 (또는 수동 리셋)
- 완료율 표시: 오늘 완료한 작업의 진행률
시각적 아이디어: 화이트보드 (Whiteboard)
- 자유형 드로잉: Konva.js + react-konva 사용
- 펜/지우개/색상 선택: 다양한 그리기 도구
- 캔버스 조작: 줌, 팬(이동) 기능
- 도형 그리기: 직선, 사각형, 원 등
- PNG 내보내기: 스크린샷 다운로드
- 캔버스 초기화: 전체 지우기
시간의 재구성: 스케줄 (Weekly Scheduler)
- 주간 그리드: 7일 x 시간대별 셀
- 셀 클릭: 특정 시간에 작업 추가
- 작업 입력: 텍스트 + 소요 시간(duration) 설정
나만의 지식 창고: 용어정리 (Terms Dictionary)
- 용어 추가: "+" 버튼으로 새 용어 등록
- 카테고리 분류: 용어를 그룹으로 관리
- 검색 기능: 용어명, 정의, 카테고리로 검색
- 편집/삭제: 기존 용어 수정 또는 삭제
- 다이얼로그: 입력 폼 다이얼로그
빠른 길찾기: 북마크 (Bookmarks)
- 북마크 추가: URL + 제목 + 설명 입력
- 그룹화: 카테고리별 폴더 구성
- 드래그 앤 드롭: @dnd-kit으로 순서 조정
- 빠른 링크: 클릭으로 즉시 이동
- 아이콘 표시: 웹사이트 파비콘 표시
- 검색: 북마크 검색

마치며: 모든 데이터는 내 브라우저 안에

이 모든 기능은 Dexie.js를 통해 브라우저 내부 DB에 안전하게 보관됩니다. 인터넷 연결이 끊겨도, 혹은 민감한 내부 데이터를 다루고 있어도 안심할 수 있습니다. 필요할 땐 언제든 파일로 출력하여 백업할 수 있는 구조입니다.

특별할 것 없는 기능들이지만, 이 기능들이 한곳에 모여 '나만의 업무 히스토리'가 될 때 Desk-tools는 비로소 완성됩니다. 저와 같이 '나만의 안전한 작업실'이 필요한 분들에게 작은 도움이 되길 바랍니다.

이제 50대 개발자로서 글을 적어보려고 합니다.

baruna.mark — Sat, 21 Mar 2026 15:46:56 +0900

저도 이제 직장생활 20년이 넘어가면서 50대가 되었습니다. 어떻게 보면 한물 간 엔지니어죠... 기술력도 어중간하고, 트렌드도 잘 못 따라가는 것 같고, 행동만 무거워진건 아닌가 하는 생각이 들고 있는 나이입니다. 조만간 은퇴할 시간이 다가오겠죠?

사실 지금은 그래도 재법 괜찮은 직장에서 나름 높은 연봉을 가지고 있습니다. 회사원으로 임원들을 제외하고는 높은 연봉이긴 할겁니다.

하지만 요즘드는 생각은 이제 이것도 길어야 5~6년이고 빠르면 1~2년 안에 아무것도 못할수 도 있겠다는 생각이 들때가 많습니다. 아마 제 나이 또래 엔지니어들은 IT 버블로 인해 커리어 시작했고, 지금가지 커리어를 쌓으신 분들이 많으실거에요. 그렇다 보니 저처럼 재능 보다는 돈을 따라 경력을 쌓으신 분도 많고, 지식보다는 노력으로 지금까지 오신분이 많은 것 같습니다.

그리고 요즘 회사 돌아가는 걸보면 새로운 유입인력이 별로 없습니다. 회사에서는 새로운 유입인력을 키울 생각이 없고, 그냥 잘하는 사람 데려다 쓰는 구조가 되고 있어서 제 연봉은 유지되고, 서서히 오르고 있긴한데....

이것도 경쟁이 치열해 지고 있으니 내가 뭘 더하고, 다른 분들에게 어떤 것을 더 도움을 줄수 있을까? 고민을 많이 하고 있습니다.

저 같은 50대 개발자도 이런 걸 할 수 있으니 다들 힘내서 열심히 살아 남을 방법을 찾아봅시다.

[Desk-tools] 업무 도구 모음 - 프로젝트 기술 스팩 및 설정 기능

baruna.mark — Sat, 21 Mar 2026 15:05:04 +0900

지난 포스팅에서 Desk-tools를 기획하게 된 배경과 '직장인으로서의 고민'을 말씀드렸습니다. 이번에는 그 고민을 실제 어떻게 기술적으로 구현했는지, 프로젝트의 뼈대를 이루는 기술 스택과 설정에 대해 공유하고자 합니다.설계의 핵심: "Zero-Server, Zero-Trust"

이 프로젝트의 가장 큰 기술적 도전은 '백엔드 없이 모든 기능을 브라우저 내에서 완결짓는 것'이었습니다. 
서버가 없다는 것은 관리할 인프라가 없다는 뜻이기도 하지만, 
무엇보다 사용자의 데이터가 외부로 유출될 물리적 통로 자체를 없앤다는 보안적 의미가 큽니다.

이를 실현하기 위해 선택한 기술 스택은 다음과 같습니다.

Framework & Runtime: Next.js & Static Export

가장 현대적이고 안정적인 프레임워크를 선택하되, 사용 방식은 철저히 '정적'인 상태를 지향했습니다.

Next.js (Static Export): Next.js의 강력한 기능들을 사용하면서도 output: 'export' 설정을 통해 모든 페이지를 순수 HTML/JS/CSS로 빌드했습니다. 덕분에 서버 사이드 렌더링(SSR) 시 발생할 수 있는 데이터 노출 위험을 원천 차단했습니다.
React / TypeScript : 최신 라이브러리를 통해 컴포넌트의 재사용성을 높이고, 강한 타입 시스템(TypeScript)을 적용해 데이터 변환 도구에서 발생할 수 있는 런타임 오류를 최소화했습니다.
Node.js (Build-time Only): 서버는 오직 빌드 시점에만 존재합니다. 실제 배포 환경에는 어떤 런타임 엔진도 돌아가지 않는 순수 정적 파일만 존재합니다.

Data & State: "서버 대신 내 브라우저에 저장"

보통 설정이나 작업 내역을 저장하려면 DB가 필요합니다. 하지만 Desk-tools는 서버 DB를 사용하지 않습니다.

Dexie.js (IndexedDB Wrapper): 브라우저 내장 데이터베이스인 IndexedDB를 더 쉽고 안전하게 다루기 위해 Dexie.js를 도입했습니다. 사용자가 설정한 옵션이나 최근 작업 기록은 오직 사용자의 로컬 브라우저에만 저장됩니다. 브라우저를 닫아도 데이터는 유지되지만, 서버로는 절대 전송되지 않습니다.
Fuse.js: 수많은 도구 중 필요한 기능을 빠르게 찾을 수 있도록 'Fuzzy Search' 기능을 넣었습니다. 가벼운 라이브러리로 서버 통신 없이 즉각적인 검색 경험을 제공합니다.

Styling: 일관된 UX와 빠른 인터페이스

다양한 도구가 모여있지만, 마치 하나의 앱처럼 느껴지도록 디자인 시스템을 구축했습니다.

Tailwind CSS & tailwindcss-animate: 유틸리티 우선 CSS를 통해 빠른 스타일링과 부드러운 애니메이션 효과를 부여했습니다.
shadcn/ui: Radix UI 기반의 컴포넌트를 사용해 접근성과 디자인 완성도를 높였습니다. 특히 보안 도구 특성상 자칫 딱딱해질 수 있는 UI를 모던하고 직관적으로 구성하는 데 큰 도움이 되었습니다.

Build & Deploy: 투명한 공개와 자동화

보안 담당자가 만든 툴인 만큼 배포 과정도 투명해야 합니다.

GitHub Pages: 코드를 수정하면 누구나 GitHub 저장소에서 변경 사항을 확인할 수 있습니다. 투명성이 곧 보안인 셈입니다.
GitHub Actions: 코드 푸시 시 자동으로 빌드되어 /out 디렉토리에 정적 파일이 생성되고 배포됩니다.
Base Path 설정: /Desk-tools 경로를 기본으로 설정하여 GitHub Pages 환경에서도 에셋 경로가 꼬이지 않도록 안정적으로 세팅했습니다.

보안을 위해 기능을 포기하거나, 기능을 위해 보안을 타협하지 않는 지점을 찾기 위해 많은 고민을 했습니다. Next.js의 Static Export와 Dexie.js의 조합을 선택했습니다.

자 그럼 간단한 프로그램의 설정 부분을 간단하게 이야기 하겠습니다.

https://zafrem.github.io/Desk-tools/

Export/Import : indexDB를 사용해서 데이터를 저장하다보니 데이터를 옮길수 있게 만들어놓긴 했습니다. 근데 써본적이 없긴하네요.
Github Issue : 추가 기능에 대한 아이디어가 떨어져서 하나 만들어놨습니다. 지금은 아무도 안들어와서... 큰 의미는 없습니다.
언어 설정 : 영어/한국/중국/일본 언어를 넣어놨습니다. (AI 생성으로 넣어놨습니다. 자연스러운지 잘모르겠네요...)
테마 : 그냥 화이트/블랙
설정 : 여러 설정을 위해서 하긴했는데, 지금은 Local LLM 설정이 들어가 있습니다.
도구 창 : 도구창을 Open/Close 하기 위한 버튼으로 사실 모바일에서 쓰려고 만들어놨습니다.

사실 아직 개발 중이라는 표현이 맞긴하겠네요... 지금 쭉 적다 보니 뭔가 부족한 점들이 있어보입니다. 온라인화는 계속 안할거 같긴한데... 다양성을 제외하고 편리함을 좀 생각해봐야겠네요.

[Desk-tools] 보안 담당자가 직접 만든 '안전한' 업무 도구 모음 기획

baruna.mark — Sat, 21 Mar 2026 14:04:17 +0900

1. 서론: '도구'의 홍수 속에서 길을 잃다

현대 직장인, 특히 IT 업계의 '멀티 플레이어'들에게 도구(Tool)는 양날의 검입니다. 클라우드 인프라가 보편화되고 AI가 업무의 깊숙한 곳까지 들어오면서, 우리는 과거보다 훨씬 더 넓은 영역의 일을 혼자서 처리할 수 있게 되었습니다.

저 역시 보안 팀에 소속되어 있지만 개발, 기획, 운영, 심지어는 간단한 디자인 작업까지 병행하곤 합니다. 하지만 업무의 경계가 허물어질수록, 역설적으로 "믿고 쓸 수 있는 도구"를 찾는 일은 점점 더 어려워졌습니다.

2. 기획의 시작: 사소하지만 치명적인 '보안의 빈틈'

Case 1: AI가 그려준 아이콘, 그 마지막 한 끗

최근 프로젝트를 진행하며 AI로 파비콘(Favicon)과 로고를 생성했습니다. 결과물은 훌륭했지만, 실무에 적용하려면 배경 투명화(Remove Background)나 .ico 포맷 변환이 필수적이었습니다.
구글링을 하면 수많은 '무료 변환 사이트'가 나옵니다. 하지만 보안 담당자의 눈으로 본 그 사이트들은 물음표투성이였습니다. "내가 업로드한 이미지가 저들의 서버에 저장되지는 않을까?", "혹시 변환 과정에서 악성 스크립트가 실행되지는 않을까?" 결국 간단한 작업 하나를 위해 포토샵을 켜거나, 신뢰할 수 없는 외부 사이트와 타협해야 하는 상황이 반복되었습니다.

Case 2: 데이터 분석과 '포맷 변환'의 공포

보안 로그나 데이터셋을 분석하다 보면 JSON을 CSV로 바꾸거나, Base64 인코딩/디코딩이 필요한 순간이 매분 매초 발생합니다. 웹상에는 훌륭한 변환기들이 많습니다. 하지만 그 텍스트 박스에 붙여넣는 데이터가 내부 자산인 로그 데이터라면 이야기는 달라집니다.
"웹 브라우저에서 처리되니까 안전하겠지"라고 막연히 믿기에는, 트래픽이 외부 서버로 전송되는지 일일이 개발자 도구로 패킷을 확인해야 하는 피로감이 너무 컸습니다. 보안 담당자로서 "데이터가 단 1바이트도 외부로 나가지 않는다"는 확신이 필요했습니다.

3. 기획 의도: 쉐도우 인프라를 넘어선 'Self-contained' 환경

보안 담당자가 가장 경계하는 것 중 하나가 바로 쉐도우 인프라(Shadow Infrastructure)입니다. 직원들이 업무 편의를 위해 회사에서 승인하지 않은 외부 도구를 사용하는 현상이죠. 저 역시 한 명의 작업자로서 그 유혹을 느꼈기에, 이 문제를 근본적으로 해결하고 싶었습니다.

핵심 가치 1: Zero-Traffic (완벽한 오프라인)

Desk-tools의 모든 기능은 클라이언트 사이드(Client-side)에서만 동작합니다. 사용자가 입력한 데이터나 업로드한 파일은 사용자의 브라우저 메모리 안에서만 머물다 사라집니다. 서버와의 통신이 없으므로 데이터 유출의 가능성을 원천 차단하는 것이 최우선 목표였습니다.

핵심 가치 2: Transparency (투명성)

신뢰는 투명성에서 나옵니다. 이를 위해 GitHub Pages를 선택했습니다.

모든 소스코드는 공개되어 누구나 검증할 수 있습니다.
서버 사이드 로직이 존재하지 않음을 코드로 증명합니다.
별도의 백엔드 서버가 없으므로 운영자의 데이터 수집 의심으로부터 자유롭습니다.

4. 기획 범위: 어떤 도구들을 담을 것인가?

Desk-tools는 '모든 것을 다 하는 툴'이 아닙니다. 제가 멀티 롤을 수행하며 "외부 툴을 쓰기엔 찜찜하고, 직접 만들기엔 번거로운" 지점들을 타격하는 데 집중합니다.

영역 1: 이미지 및 디자인 유틸리티

아이콘/파비콘 변환: AI로 생성한 이미지를 즉시 업무에 투입할 수 있게 돕는 도구들.
이미지 최적화: 화질 저하를 최소화하면서 웹용으로 용량을 줄이는 기능.

영역 2: 데이터 가공 및 분석

포맷 컨버터: JSON, XML, CSV, YAML 간의 상호 변환.
엔코더/디코더: URL, Base64, Hex 등 개발 및 보안 분석 시 필수적인 변환 도구.
텍스트 처리: 중복 제거, 정렬, 정규식 테스트 등 단순하지만 반복적인 작업들.

영역 3: 보안 및 인프라 체크

패스워드 생성기: 암호학적으로 안전한 난수 생성 기능을 활용한 비밀번호 생성.
네트워크 계산기: 서브넷 마스크 계산 등 인프라 아키텍처 설계 시 필요한 도구.

5. 결론: 보안 전문가로써 타협하면서 만든 생산성 도구

클라우드와 AI 시대에 1인의 역할은 점점 비대해지고 있습니다. 우리는 이제 개발자이면서 동시에 운영자여야 하고, 기획자이면서 동시에 보안 검토관이어야 합니다.

Desk-tools는 이 거대한 흐름 속에서 제가 안전하게 헤엄치기 위해 만든 개인용 구명조끼와 같습니다. "혹시 내 데이터가 나가지 않을까?"라는 불안감 때문에 작업의 흐름을 끊지 않아도 되는 환경, 모든 기능이 내 통제 하에 있다는 확신이 주는 안정감이 이 프로젝트의 본질입니다.

앞으로 각 기능별 상세 구현 과정과 보안적 이점에 대해, 저와 같은 고민을 하는 분들과 인사이트를 나누고자 합니다.

https://zafrem.github.io/Desk-tools/