*이 글은 토스터 부스 한 달 차에 짧게 적어놨던 회고를 뒤늦게 다시 퇴고하면서 여러 시점이 섞여있을 수 있습니다...~ 토스터부스 운영 한 달차 회고토스터부스를 시작한 지 한 달이 되어간다.누적 사용자는 900명에 가까워졌고, 따로 홍보를 하지 않아도 매일 10명 안팎의 사용자들이 꾸준히 서비스를 이용해주고 있다.최근 WAU도 42 정도로 유지되고 있는데 내 기준에서는 꽤 멋진 수치다. 예전부터의 작은 꿈은 “매일 5명이라도 꾸준히 사용하는 서비스를 만드는 것”이었다.지금은 10명. 큰 서비스처럼 거대한 숫자는 아니지만, 이 수치는 나에게 정말 소중하다. 특히 블로그나 인스타그램을 통해 종종 도착하는 디엠과 댓글은 나를 계속 움직이게 만든다.주변 사람들의 피드백부터 나와 전혀 관련 없는 분들이 보내주..

✅ 단순한 장학금 신청 시스템에서 성장 기록 도구로 캡스톤 디자인 프로젝트의 시작은 간단했습니다기존 불편했던 사이트를 전면 개편해서 학생들이 더 간편하게 마일리지를 확인하고 신청하게 하자! 이 목표로 ‘마일리지 장학금 시스템’이라는 이름의 웹서비스를 개발했습니다.학생들은 기존보다 훨씬 직관적인 UI로 마일리지를 조회하고 장학금을 신청할 수 있게 되었습니다! 자세한 기존 사이트가 궁금하시다면? >> 🏆 마일리지 장학금 신청 서비스 개발기: 한달간의 성장 일지 이 시스템은 실제로 교내 서비스로 채택되어 3월 초 운영되었고 장학금 신청 기간 동안 약 520명이 사용해주셨습니다. 약 100명에게 만족도 조사를 진행한 결과 92%가 “개편된 사이트에 만족한다”라고 답해주었습니다. 프로젝트를 운영하면서 이제 학..

토스터 부스에서는 사용자가 촬영한 네컷 사진을 PNG로 다운로드할 수 있도록 dom-to-image 를 사용하고 있었습니다.(( 그 전에는 html2Canvas 도 고려해봤으나 해당 라이브러리는 filter css 를 호환하지 않고, 우리 서비스는 보정 필터가 핵심 기능이라 dom-to-image 로 변경한 이력이 있음. )) 그러다 최근 디버깅 중 dom-to-image 는 사파리 브라우저를 호환하지 않는다는 걸 발견한 후 html-to-image 로 변경하였습니다.첫 MVP에서는 노트북 환경을 우선적으로 작업하다보니 사파리에서 작동 안하는 이슈를 캐치하지 못하는 불찰이 있었습니다.. 이후 html-to-image의 toBlob() 함수를 사용하여 작업을 진행했습니다. 그런데 테스트 도중 Safari ..

따뜻한 봄날, 무료한 일상을 담고 싶다면?토스터기로 굽는 네 컷 사진, 어떠세요? Toaster Booth는 토스터기를 사진기로 삼아,잼처럼 감성을 입히고, 프레임으로 꾸미는 특별한 네 컷 사진 서비스입니다.🤔 왜 '토스터'인가요?우리는 사진을 굽는다 고 상상해봤어요.그리고 생각했죠. 토스터기에서 ‘찰칵’ 나오는 빵과,카메라에서 ‘찰칵’ 나오는 사진, 뭔가 닮지 않았나요? 그래서 우리는 카메라 대신 토스터기를 꺼내 들었고,그 위에 잼 필터를 발라주고,다양한 프레임으로 꾸밀 수 있는 서비스를 만들었어요. 사진 한 장 한 장이, 마치 따뜻한 토스트 한 조각처럼 느껴지길 바랍니다! ✨ 어떤 기능들이 있나요?📷 네 컷 촬영: 웹캠으로 4컷을 순차적으로 촬영할 수 있어요. (타이머도 지원!)🍓 잼 필터: 블..

토스터 프로젝트에서 네컷 사진을 촬영한 후, 사용자가 새로고침하게 되면 사진이 날아가는 이슈가 있었다.찍은 사진이 저장도 전에 날아가면 너무 치명적이니 이 사진이 그대로 유지하도록 작업하기로 했다. 단순한 기능처럼 보였지만, 이 과정에서 꽤 다양한 삽질과 학습이 있었다.🧨 문제 발생: 새로고침하면 사진이 사라진다!사진을 4컷 다 찍은 후 실수로 새로고침을 누르면...😱 "아놔.. 사진 다 날아갔어..." 처음에는 이 상태를 React Context API로 관리하고 있었기 때문에, 새로고침 시 상태가 초기화되는 건 너무나 당연한 결과였다.그래서 가장 먼저 떠오른 해결책은 바로...💾 시도 1: localStorage에 저장하자!useEffect(() => { localStorage.setItem(..

토스터 (aka 웹캠네컷) MVP 1차를 완성하고 나서, 주변 개발자 친구들에게 자랑을 했었다. ((도파민 중독))그 반응은? 예상보다 훨씬 좋았다! 그중 한 명, 개발자이자 카카오 이모티콘 작가인 리버가 “너무 귀엽다, 인터랙션 내가 해보고 싶다!”라고 했을 때, 이게 바로 천사의 강림 아니겠나. 디자인에 조금 지쳐가던 나에게 리버는 하늘에서 내려온 디자이너였다.내가 생각한 서비스 방향과 추구하는 컨셉을 설명했고, 리버는 바로 디자인 작업에 들어갔다. 기존 MVP를 만들면서 느낀 점은, 아무리 노트북 웹캠 화질이 좋아져도 포토이즘이나 인생네컷 같은 프린트된 물리적 사진 퀄리티는 못 따라간다는 거였다. 어차피 완벽한 화질은 힘들다면, 이 한계를 컨셉으로 녹이자. 그렇게 선택한 무드는 Y2K, 빈티지, 모..

마일리지 서비스가 성공적으로 운영되던 시점운영을 시작한 지 일주일이 지나면서 서비스가 안정적으로 자리 잡아갔다. 덕분에 나도 조금 여유를 가질 수 있었다. 그래서 이 시간을 활용해 개발 서적을 빌려 읽고, 매일 출근해서 공부하며, 코딩 테스트를 풀며 전기세를 낭비하면서 등록금을 열심히 탕진(?)하고 있었다.  웹캠네컷 아이디어의 시작나는 맥북 포토부스를 활용해 사진이나 영상을 남기는 걸 좋아하는데, 이게 쌓이다 보니 저장 용량만 20GB가 넘어가 버렸다. 인생네컷 같은 셀프 사진관도 자주 갔는데, 친구들이 졸업한 후에는 혼자서 맥북 포토부스로 찍는 게 유일한 취미가 되어버렸다. (ㅜㅜ) 그러다 문득 떠올랐다.'인생네컷을 브라우저에서 바로 찍고 저장할 수 있지 않을까?' 말 그대로 웹캠네컷인 셈이다.이 아..

📋 프로젝트 개요저희 학부의 마일리지 장학금 서비스는 학생들이 지난 학기의 마일리지 내역을 확인하고, 등록 후 장학금을 신청할 수 있도록 돕는 시스템입니다. 핵심은 간소화: 학생들이 번거롭지 않게 신청할 수 있는 환경을 구축하는 것이 목표였습니다.특히 기간이 매우 중요했는데 학기 초 3월에 신청받아야 하는 프로젝트이다 보니 개발 시작이었던 2월에서 약 한 달의 기간 안에 작업해야하는 프로젝트였습니다. 🚀 개발 동기와 시작오래된 시스템, 새롭게 재탄생하다 이 프로젝트의 출발은 그리 새롭지 않았습니다.기존에는 PHP로 만들어진 구식 사이트가 운영되고 있었는데, 오래된 UI부터 사용하기 불편한 데다 유지보수도 어려운 상황이었습니다.매년 캡스톤 팀들이 마이그레이션을 시도했지만 끝내 완성하지 못한 프로젝트였습..

1. 프로젝트 개요 📝프로젝트 이름: EYE CARE간략한 설명: 눈 건강을 위해 20분마다 알림을 보내주는 크롬 익스텐션개발 동기 및 목표: 개발자들은 하루의 대부분을 노트북 앞에서 보내기 때문에, 눈의 휴식이 중요하지만 잊기 쉽습니다. 이 프로젝트는 라섹 수술 후 눈 건강을 지키기 위한 개인적인 필요에서 출발했습니다.💡 바른 자세와 눈의 휴식을 챙기기 위해 EYE CARE 시스템을 개발하게 되었습니다.  Eye Care - Chrome 웹 스토어눈 건강을 위해 20분마다 휴식을 알려줍니다.chromewebstore.google.com 2. 아이디어 출발 💡눈 건강을 위한 작은 도우미이 프로젝트는 1월에 받은 라섹 수술 이후 노트북 사용이 필수였던 상황에서 시작되었습니다. 의사 선생님이 "눈을 자..