TECK TANI · TOOLS & NOTES테크타니

복잡한 작업을,
조금 더 쉽게.

온라인 도구 활용법과 개발 기록을 정리합니다.
필요한 도구를 찾고, 일상의 작은 작업을 가볍게.

연봉 3,600만원에서 4,800만원으로 오르면 월급은 얼마나 늘까?
·
돈 계산/급여·세금
이 자료는 Calc Tani 운영자가 제공하는 자체 도구 소개입니다.연봉이 3,600만원에서 4,800만원으로 오르면 통장에 들어오는 돈은 얼마나 늘까요? 연봉 차이는 1,200만원이고 월로 나누면 100만원입니다. 하지만 공제액도 달라지므로 실제 월 입금액 증가분은 다릅니다.다른 조건을 유지하고 연봉만 바꾼 예시에서는 월 실수령액이 2,665,440원에서 3,444,554원으로, 779,114원 늘어납니다. 아래에서 입력 조건과 계산 재현 방법을 확인할 수 있습니다.같은 조건에서 연봉만 바꿔 비교하기두 경우 모두 매월 같은 급여를 받는 표준 직장가입자를 가정합니다. 월 비과세액 20만원은 제시한 연봉 안에 포함되어 있고 실제 비과세 요건을 충족한다고 가정합니다. 퇴직금은 연봉과 별도이며, 근로소득세 원..
혼자도 둘이도, 설치 없이 즐기는 게임타니 플레이 안내
·
프로그램
제가 운영하는 게임 사이트 게임타니를 소개합니다. 브라우저에서 설치와 회원가입 없이 게임을 시작할 수 있고, 현재 41개 게임이 있습니다. 혼자 기록에 도전하거나, 한 기기에서 두 사람이 대전하고 협동할 수 있습니다.게임타니에서 게임 고르기2026-10-10 공개 한국어 홈에서 촬영한 화면입니다. 슈팅, 스포츠, 퍼즐 등 분류를 골라 게임을 찾을 수 있습니다.처음에는 이렇게 시작해 보세요홈에서 관심 있는 게임을 고른 뒤, 게임 페이지에서 인원 모드와 조작 안내를 확인하고 시작하면 됩니다. 혼자라면 1P를, 함께 플레이한다면 해당 게임의 2P 방식을 살펴보세요. 같은 “2P”라도 함께 움직이는 게임과 한 사람씩 차례로 도전하는 게임이 있습니다.짧게 규칙을 익히고 싶다면 2048 러시처럼 90초 동안 타일을..
따옴표와 줄바꿈이 있는 문장을 JavaScript 문자열로 옮기는 방법
·
프로그래밍/개발자 도구
문장을 코드 안의 문자열로 옮길 때는 따옴표를 한 쌍 붙이는 것만으로 끝나지 않을 수 있습니다. 문장 자체에 작은따옴표가 있거나 파일 경로의 역슬래시, 줄바꿈이 들어 있으면 코드가 읽는 방식에 맞추어 표현해야 합니다. 여기서는 문자열의 내용과 그 내용을 감싸는 리터럴을 나누어 살펴봅니다.원문에는 실제 줄바꿈을 넣습니다JS·SQL 문자열 이스케이프에서 문자열 문법을 ‘JavaScript · 단일 따옴표’, 방향을 ‘원문 → 리터럴’로 선택했습니다. 입력에는 아래 두 줄을 넣었습니다. 첫 줄에는 작은따옴표와 역슬래시가 각각 하나씩 있습니다.O'Reilly\notes둘째 줄이 단계에서는 입력 전체를 코드용 따옴표로 감싸지 않습니다. 원문을 넣으면 도구가 선택한 문법에 맞는 바깥 따옴표까지 포함하여 결과를 생성..
XML 들여쓰기 정리하기: 문장 안의 태그와 공백을 함께 확인하는 방법
·
프로그래밍/개발자 도구
설정 파일이나 API 예제에서 XML을 읽다 보면 요소들이 한 줄로 붙어 있어 눈으로 따라가기 어렵습니다. 그렇다고 태그 사이마다 줄바꿈을 넣으면 문장 안의 공백까지 달라질 수 있습니다. XML을 정리할 때는 구조를 보기 좋게 만드는 부분과 텍스트를 유지해야 하는 부분을 함께 살펴보는 것이 좋습니다.요소와 문장이 섞인 예제로 시작합니다모두의도구 XML 포맷터를 열고 ‘들여쓰기 추가’, ‘공백 2칸’을 선택했습니다. 예제에는 내용이 있는 item, 빈 item, 문장 안에 b 요소가 들어 있는 note를 넣었습니다.HelloA bold wordnote의 A 뒤와 word 앞에는 공백이 있습니다. 이 간격을 잃거나 불필요한 줄바꿈을 더하면 문장 내용을 다르게 전달할 수 있습니다. 그래서 정리 결과를 볼 때 ..
한 줄로 붙은 HTML 정리하기: 들여쓰기와 꺾쇠 위치가 달라 보이는 이유
·
프로그래밍/개발자 도구
문서나 코드 예제를 복사하면 HTML이 긴 한 줄로 붙어 있는 경우가 있습니다. 이 상태에서는 목록이 어디서 시작하는지, 강조 태그가 어느 문장을 감싸는지 찾기 어렵습니다. 들여쓰기를 정리하면 구조를 살펴보기 편하지만, 줄바꿈 결과가 익숙한 편집기의 모양과 다를 수도 있습니다.아래에서는 짧은 제목, 문장, 목록 두 항목을 가진 HTML로 실제 결과를 확인했습니다. 화면을 예쁘게 보이게 하는 CSS나 웹페이지 렌더링 결과를 검사한 예제는 아닙니다.원문과 정리 옵션을 넣습니다HTML 포맷터에서 원문을 붙여 넣고 들여쓰기 폭을 ‘공백 4칸’, 권장 줄 너비를 ‘80자’로 선택했습니다. 실제로 입력한 내용은 다음과 같습니다.안내A small example.첫 항목둘째 항목4칸은 들여쓰기 폭에 대한 선택이고, 8..
XML을 JSON으로 바꾸면 문장 사이 공백은? 노드 구조로 변환하고 복원하기
·
프로그래밍/개발자 도구
XML에는 같은 이름의 요소가 여러 번 나올 수 있고, 문장 중간에 태그가 들어가기도 합니다. 이를 단순히 ‘태그 이름: 값’ 형태의 객체로 옮기면 어디에 텍스트가 있었는지, 요소가 어떤 순서였는지 읽기 어려워질 수 있습니다. 문서 구조를 살펴볼 목적이라면 노드를 순서대로 표현하는 JSON이 도움이 됩니다.이 도구의 JSON 형식부터 알아둡니다XML ↔ JSON 변환기는 임의의 업무용 객체를 태그로 추측해 바꾸는 방식이 아닙니다. XML을 type, name, attributes, children 같은 항목이 있는 명시적 노드 JSON으로 표현합니다. 다시 XML로 만들 때도 이 도구의 노드 형식을 사용해야 합니다.예를 들어 {"title":"안내"}라는 객체만 넣으면 title을 어떤 루트 요소로 만들..
JSON을 YAML로 바꿀 때 큰 숫자가 있다면: 설정 예제로 자료형 확인하기
·
프로그래밍/개발자 도구
API 문서에는 JSON으로 적힌 예제가 있고, 설정 파일은 YAML을 요구하는 경우가 있습니다. 눈으로 괄호를 지우고 들여쓰기를 넣을 수도 있지만, 배열이나 따옴표가 섞이면 어느 부분을 바꿨는지 확인하기 어렵습니다. 이런 작업에서는 문서를 변환한 다음 값과 자료형을 함께 대조하는 편이 좋습니다.이번에는 앱 이름, 사용 여부, 태그 두 개, 긴 식별 번호가 들어 있는 작은 설정을 사용했습니다. 실제 계정이나 서비스 정보가 없는 설명용 데이터입니다.먼저 숫자와 문자열을 구분합니다모두의도구 JSON ↔ YAML 변환기를 열고 변환 방향을 ‘JSON → YAML’, 들여쓰기 폭을 ‘공백 2칸’으로 둡니다. 입력에는 JSON 값 하나를 넣으면 됩니다. 키 이름과 문자열에 큰따옴표가 필요하다는 점은 JSON 문법..
이모지 한 글자의 위치가 길어지는 이유: UTF-16·코드포인트·그라페임 비교하기
·
온라인 도구/텍스트·변환
문자열에서 잘라낼 위치를 셀 때 화면의 글자 수와 코드의 길이가 다르면 당황할 수 있습니다. 특히 피부색이 붙은 이모지나 여러 문자가 결합된 글자는 한 덩어리로 보여도 내부 표현은 다릅니다. 글자 수라는 말을 하나로 쓰기보다 어떤 단위로 센 값인지 확인하면 차이를 이해하기 쉽습니다.문장 분할 실험실은 같은 원문을 여러 방식으로 나누고 각 구간의 위치를 비교하는 도구입니다. 브라우저의 단어·문장·그라페임 분할과 두 가지 간단한 규칙을 함께 볼 수 있습니다. 여기서는 한국어와 이모지, 결합 악센트를 섞은 아주 짧은 문장으로 숫자가 어떻게 달라지는지 살펴봅니다.표시된 café의 마지막 글자를 주의해서 넣습니다분석할 원문에 아래의 예제를 붙여 넣고 요청 언어는 한국어 ko를 골랐습니다. 끝의 café는 e 뒤..
한글 세 글자가 9바이트가 되는 이유: 고정폭 레코드의 폭과 채움 문자 확인하기
·
온라인 도구/텍스트·변환
고정폭 텍스트 파일을 만들 때 이름 칸을 몇 글자로 정했다가 실제 바이트 길이와 맞지 않는 경우가 있습니다. 숫자와 영문은 익숙해도 한글이 들어가면 인코딩을 먼저 정해야 합니다. 필드의 시작 위치가 바이트 기준인지 글자 기준인지부터 분명히 해 두면 다음 열이 밀리는 문제를 살펴보기 쉽습니다.고정폭 레코드 설계기는 필드 이름, 바이트 폭, 정렬, 채움 문자를 정하고 여러 행의 값을 같은 명세로 만드는 도구입니다. 이번에는 기본 UTF-8 한글 예제의 화면 결과를 확인하고 이름 필드를 1바이트 줄여 오류가 어떻게 나오는지도 살펴봤습니다.필드 폭을 더하면 한 행의 길이가 나옵니다기본 명세는 code 4바이트, name 9바이트, status 8바이트입니다. code는 오른쪽 정렬과 0 채움, name과 sta..
복사한 HTML의 굵은 글씨만 남기기: 서식과 HTTPS 링크를 따로 정리하는 방법
·
온라인 도구/텍스트·변환
웹에서 글을 복사하면 필요한 문장과 굵은 글씨뿐 아니라 색상, 이미지, 링크 속성까지 함께 붙을 수 있습니다. 내용만 옮기면 중요한 강조가 사라지고, 전체 HTML을 그대로 가져오면 원치 않는 서식이 남습니다. 유지할 서식의 범위를 좁혀서 다시 만드는 작업이 필요할 때 리치 텍스트 정리기를 사용할 수 있습니다.이 도구는 붙여 넣은 HTML을 제한된 허용 태그로 다시 구성해 본문 조각을 만듭니다. 원본의 모든 디자인을 보존하는 변환기는 아닙니다. 아래에서는 문단, 굵은 글씨, 이미지, 링크, 빨간색 스타일을 함께 넣고 무엇이 남는지 비교했습니다. 예제 주소는 기능을 설명하기 위한 합성 값이며 실제 이미지를 가져오지 않습니다.같은 원본으로 두 정책을 비교합니다회의 안내자료 보기원본 HTML 칸에 예제를 넣고..