요즘 제 주변 친구들이나 동료들 사이에서 가장 뜨거운 대화 주제를 하나 꼽으라면 단연 ‘청년도약계좌’입니다. 매달 일정 금액을 꾸준히 저축하면 정부에서 기여금을 더해주고, 이자에 대해 비과세 혜택까지 주는 파격적인 상품이죠. 하지만 막상 가입하려고 보면 내 연봉에 따라 정부 지원금이 얼마나 나오는지, 5년 뒤에 실제로 내 손에 쥐어지는 돈이 얼마인지 계산하기가 꽤나 까다롭습니다. 그래서 오늘은 이 복잡한 … 더 읽기
안녕하세요! 오늘은 직장인이라면 누구나 가슴속에 품고 사는 ‘사직서’만큼이나 궁금해할 주제를 가져왔습니다. 바로 ‘퇴직금 계산기’입니다. 보통 퇴사를 결심하거나 이직을 준비할 때, “내가 지금까지 일한 대가로 얼마를 받을 수 있을까?”라는 질문이 가장 먼저 머릿속을 스칩니다. 포털 사이트의 계산기를 써도 되지만, 개발자로서 내가 직접 로직을 설계해 보고 실제 노동법 수식을 코드로 구현해 보는 과정은 그 자체로 큰 공부가 … 더 읽기
안녕하세요! 오늘은 [자바스크립트 사다리 타기] 프로젝트에 이어서 웹 페이지에 생동감을 불어넣는 것은 물론, 방문자의 시선을 단번에 사로잡을 수 있는 ‘캔버스 기반의 인터랙티브 JavaScript 마우스 트래커(Visual Particle System)’를 만들어 보았습니다. 그동안 다양한 자바스크립트 프로젝트를 진행하며 기초를 다져왔다면, 이번에는 Canvas API의 심화 기능을 활용해 한 단계 더 높은 수준의 인터랙션을 구현해 볼 차례입니다. 단순히 클릭에 반응하는 단계를 … 더 읽기
안녕하세요! 18번째 포스팅[스크래치 복권 만들기]와 14번째 포스팅[타자 게임]등과 같이 평소 웹 게임 구현에 관심이 많았던 터라, 이번에는 고전적이면서도 로직의 정교함이 요구되는 ‘자바스크립트 사다리 게임’을 주제로 잡았습니다. 단순히 위에서 아래로 내려가는 게임이 아니라, 대각선 경로가 포함된 복잡한 구조를 어떻게 하면 자바스크립트와 Canvas API로 완벽하게 구현할 수 있을지 고민한 기록을 남겨봅니다. 1. 설계: 사용자 경험(UX) 중심의 레이아웃 … 더 읽기
안녕하세요! 어느덧 프로젝트가 [19번째 비디오 플레이어 만들기]를 지나 20번째에 접어들었습니다. 이번에는 마케팅이나 SEO 작업을 할 때 가장 번거로운 과정 중 하나인 ‘키워드 조합’을 자동화해 줄 수 있는 자바스크립트 키워드 조합기를 만들어 보았습니다. 시중에는 이미 수많은 조합기가 존재하지만, 실제 업무에서 사용하다 보면 미세한 불편함들이 발목을 잡곤 합니다. 예를 들어, 조합 순서를 갑자기 바꾸고 싶거나, 특정 항목만 … 더 읽기
우리가 웹 서핑을 하다 보면 수많은 동영상 콘텐츠를 마주하게 됩니다. 하지만 브라우저가 기본적으로 제공하는 비디오 컨트롤러는 기능적으로는 충실할지 모르나, 디자인 측면에서는 항상 아쉬움이 남습니다. 구글 크롬, 사파리, 엣지 등 브라우저마다 제각각인 인터페이스는 블로그나 웹사이트의 전체적인 톤앤매너를 해치기도 하죠. 그래서 저는 이번 프로젝트를 통해 나만의 자바스크립트 커스텀 비디오 플레이어를 직접 제작해 보기로 했습니다. CSS로 버튼의 디자인을 … 더 읽기
안녕하세요! 벌써 18번째 프로젝트까지 달려왔네요. 오늘은 웹 페이지에 생동감을 불어넣고, 방문자들에게 소소한 재미를 선사할 수 있는 ‘자바스크립트 스크래치 복권(Scratch-off Card)’ 기능을 만들어 보려고 합니다. 우리는 어릴 적 문구점 앞이나 이벤트 페이지에서 은색 덮개를 동전으로 긁어 당첨을 확인하던 설렘을 기억합니다. 이 시각적이고 물리적인 경험을 웹 브라우저에서 그대로 재현하는 것은 사용자에게 매우 큰 즐거움을 줍니다. 단순히 클릭 … 더 읽기
안녕하세요! 저번 [15번째 프로젝트: 객체 매핑으로 설계한 자바스크립트 단위 변환기 (Unit Converter)] 글에 이어서 오늘은 자바스크립트 텍스트 분석기를 제작하여 블로그를 작성해보려고 합니다. 우리는 일상 속에서 수많은 텍스트를 마주합니다. 블로그 포스팅을 작성할 때, 자기소개서를 준비할 때, 혹은 중요한 리포트를 제출할 때 우리는 항상 ‘글자 수’라는 물리적인 제약과 ‘단어 선택’이라는 질적인 고민을 동시에 하게 됩니다. 단순히 글자 … 더 읽기
안녕하세요! 그동안 우리는 텍스트 기반의 데이터와 간단한 로직들을 위주로 다뤄왔습니다. 하지만 웹 개발의 세계는 정적인 텍스트를 넘어 역동적인 시각적 결과물을 만들어낼 때 그 진가가 드러나곤 하죠. 이번에 제가 도전한 주제는 바로 ‘자바스크립트 아날로그 시계’입니다. 단순히 현재 시간을 숫자로 보여주는 디지털시계는 누구나 쉽게 만들 수 있습니다. 하지만 시계바늘이 중심점을 기준으로 회전하고, 초침의 움직임에 따라 분침과 시침이 … 더 읽기
안녕하세요! 우리가 웹 서핑을 하거나 해외 직구 사이트를 이용하다 보면 가장 먼저 마주하는 난관이 무엇일까요? 바로 한국과는 다른 ‘단위’ 시스템입니다. 미국의 인치(inch)나 파운드(lb), 혹은 부동산 사이트의 제곱미터(m2)와 평수 사이에서 우리는 늘 계산기를 두드리곤 합니다. 매번 포털 사이트에서 검색하는 번거로움을 해결하기 위해, 이번에는 우리 블로그에 직접 설치해서 언제든 꺼내 쓸 수 있는 ‘나만의 자바스크립트 단위 변환기’를 … 더 읽기