토스터 부스에서는 사용자가 촬영한 네컷 사진을 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월에 받은 라섹 수술 이후 노트북 사용이 필수였던 상황에서 시작되었습니다. 의사 선생님이 "눈을 자..

우아콘2024 듣고 감명받은 "우아한플레이그라운드" 제작기 따라 해보기 (2편) 첫 번째 작업 이후 두 번째 업데이트입니다~!!그동안 자잘한 작업들을 해보긴 했지만, 중간에 `방끗` 런칭과 면접 준비 등 여러 일이 겹쳐 이제야 2편을 작성합니다. 지난 1편에서는 에디터와 프리뷰를 사용해 코드를 띄우는 작업까지 진행했습니다.  이번에 이어서 진행할 단계는 npm 라이브러리 로드입니다.  많은 라이브러리를 사용하고, 특히 디자인 시스템을 보여주는 에디터라면 라이브러리 로드는 필수적인 세팅입니다.브라우저에서의 module resolution을 해결하기 위해, 저도 세션과 동일하게 ESM 기반의 CDN인 esm.sh을 활용해 npm 라이브러리를 로드했습니다.  먼저, 간단하게 esm 코드를 사용해 임포트를 시도..

우아콘 2024 후기 - "우아한플레이그라운드" 제작기 따라 해보기지난 10월 말, 운 좋게도 우아콘 2024에 당첨되어 올해 우아한형제들의 다양한 인사이트를 직접 들을 수 있었다.그중에서 가장 기억에 남는 세션은 추용혁(솔로스타) 님의 "디자인 시스템 문서를 생동감 있게 만들기 위한 ‘우아한플레이그라운드’ 제작기"였다. 처음엔 솔로스타 님이 우테코 선배이셔서 어떤 발표를 하실지 궁금했었는데, 발표 내용이 흥미로워 점점 더 빠져들었어요.솔로스타 님은 배민을 위해 제작한 플레이그라운드라는 디자인 시스템 문서를 어떻게 생동감 있게 만들었는지에 대해 이야기해 주셨습니다. 왜 우아한플레이그라운드를 만들었을까?솔로스타 님은 입사 후 공통 컴포넌트의 사용법을 찾는 과정에서 겪었던 불편함을 해결하기 위해 우아한플레이..