Portfolio
직접 만든 웹 도구를 문제, 해결 방식, 사용 예, 개인정보 처리 기준과 같이 정리한 허브다.
이 페이지는 외부 앱 링크만 모아둔 목록이 아니다. 각 프로젝트가 어떤 불편에서 시작됐고, 왜 브라우저 안에서 끝나는 정적 도구로 만들었는지, 실제로 어떤 상황에서 쓰는지를 한 번에 확인하는 포트폴리오 허브다.
프로젝트를 볼 때는 완성 화면보다 운영 방식이 더 중요할 때가 있다. 이미지나 문구처럼 개인 정보가 섞일 수 있는 입력값을 서버에 저장하지 않는지, 모바일에서 바로 쓸 수 있는지, 기능을 많이 넣기보다 반복 작업을 줄이는 데 집중했는지를 같이 본다.
아래 요약은 문제, 해결 방식, 주요 기능, 사용 예, 개인정보 처리 기준을 같은 순서로 적었다. 더 자세한 제작 배경과 한계, 다음 개선 방향은 각 상세 페이지와 관련 글에 남겨둔다.
도구를 바로 열기 전에 어떤 기준으로 쓰면 좋은지 먼저 보고 싶다면 아래 글을 보면 된다. 각 글은 특정 프로젝트와 연결되지만, 같은 상황에서 다른 도구를 고를 때도 참고할 수 있게 적었다.
영수증을 쌓아두고 마지막에 송금 횟수를 줄인 정산 결과를 보여주는 더치페이 도구다.
문제: 여행, 회식, 모임처럼 여러 번 돈을 쓰는 상황에서는 누가 얼마를 냈고 누구 몫인지 나중에 다시 맞추는 일이 귀찮다.
해결 방식: 모임, 멤버, 영수증을 한 화면 흐름으로 입력하고 공통 정산 로직으로 받을 사람과 보낼 사람을 매칭해 송금 줄을 줄였다.
주요 기능: 모임 생성, 멤버 관리, 영수증 추가/수정/삭제, 참여자 선택, 정산 계산, 결과 설명, 공유 문구 복사, 공유용 이미지 다운로드를 지원한다.
사용 예: 여행비, 회식비, 동아리 운영비처럼 여러 지출이 쌓인 뒤 단체방에 정산 결과를 공유해야 할 때 쓴다.
개인정보 처리: 로그인, 서버 저장, DB 없이 브라우저 localStorage에 저장하고 전화번호나 계좌번호 같은 민감정보를 받지 않는 구조다.
서버 업로드 없이 브라우저에서 이미지를 가리고 표시하는 정적 이미지 편집기다.
문제: 캡처 이미지를 공유하기 전에 이름, 얼굴, 전화번호, 계정 정보처럼 보이면 안 되는 부분을 빠르게 지워야 하는 일이 자주 있다.
해결 방식: 이미지를 서버로 올리지 않고 브라우저 안에서 바로 열고, 블러와 도형, 텍스트 표시를 얹은 뒤 결과 파일만 내려받는 흐름으로 만들었다.
주요 기능: 드래그 앤 드롭 업로드, 블러 브러시, 펜, 도형, 화살표, 텍스트, 스티커, 색상 선택, PNG/JPG/WebP 다운로드를 지원한다.
사용 예: 블로그 글이나 이슈 리포트에 캡처를 올리기 전 민감한 부분을 가리고, 설명해야 할 위치는 화살표나 박스로 표시할 때 쓴다.
개인정보 처리: 원본 이미지는 현재 브라우저에서만 처리하고 별도 서버나 데이터베이스로 전송하지 않는 구조다.
뭐 먹을지 빠르게 정하는 음식 추천 웹앱이다.
문제: 점심이나 저녁 메뉴를 정할 때 후보가 너무 많으면 결정이 늦어지고, 결국 매번 비슷한 메뉴로 돌아가기 쉽다.
해결 방식: 사용자가 긴 설정을 하지 않아도 바로 추천을 보고, 필요하면 다시 뽑으면서 후보를 줄일 수 있는 단순한 웹앱으로 잡았다.
주요 기능: 빠른 추천, 모바일 우선 화면, 반복 추천 흐름, 음식 후보 관리와 태그 기반 확장 가능성을 염두에 둔 구조를 갖고 있다.
사용 예: 혼자 밥 먹을 때, 팀에서 메뉴를 빨리 정해야 할 때, 배달앱을 열기 전에 큰 방향만 먼저 정하고 싶을 때 쓴다.
개인정보 처리: 회원가입이나 개인 식단 기록을 요구하지 않고, 추천 과정에 필요한 정보도 서버에 저장하지 않는 방향으로 운영한다.
텍스트를 이미지 파일로 뽑는 정적 웹 도구다.
문제: 짧은 공지, 블로그 썸네일, 카드형 문구를 이미지로 만들 때 매번 무거운 디자인 툴을 켜는 건 과하다.
해결 방식: 텍스트를 입력하고 기본 스타일을 조정한 뒤 브라우저에서 바로 이미지 파일로 내려받는 정적 도구로 만들었다.
주요 기능: 텍스트 입력, 줄바꿈 처리, 이미지 포맷 선택, 배경과 글자 스타일 조정, 다운로드 흐름을 중심에 둔다.
사용 예: Naver 블로그나 SNS에 올릴 짧은 공지 이미지, 개발 기록 썸네일, 반복해서 쓰는 문구 이미지를 빠르게 만들 때 쓴다.
개인정보 처리: 입력한 문구는 서버에 저장하지 않고 브라우저 안에서 이미지로 렌더링한 뒤 다운로드하는 방식이다.