안녕하세요! 어느덧 프로젝트가 [19번째 비디오 플레이어 만들기]를 지나 20번째에 접어들었습니다. 이번에는 마케팅이나 SEO 작업을 할 때 가장 번거로운 과정 중 하나인 ‘키워드 조합’을 자동화해 줄 수 있는 자바스크립트 키워드 조합기를 만들어 보았습니다. 시중에는 이미 수많은 조합기가 존재하지만, 실제 업무에서 사용하다 보면 미세한 불편함들이 발목을 잡곤 합니다. 예를 들어, 조합 순서를 갑자기 바꾸고 싶거나, 특정 항목만 … 더 읽기
안녕하세요, 느종입니다. 웹사이트의 퀄리티를 결정짓는 요소 중 하나는 바로 멀티미디어 인터페이스입니다. 하지만 브라우저 기본 컨트롤러는 디자인 수정이 불가능해 사이트의 톤앤매너를 해치곤 하죠. 저 또한 프로젝트를 진행하며 브라우저마다 제각각인 플레이어 디자인 때문에 고민이 많았습니다. 이번 포스팅에서는 자바스크립트 커스텀 비디오 플레이어 제작을 통해 이 문제를 해결해 보려 합니다. 단순히 재생 버튼만 만드는 것이 아니라, 많은 분이 어려워하시는 … 더 읽기
안녕하세요! 벌써 18번째 프로젝트까지 달려왔네요. 오늘은 웹 페이지에 생동감을 불어넣고, 방문자들에게 소소한 재미를 선사할 수 있는 ‘자바스크립트 스크래치 복권(Scratch-off Card)’ 기능을 만들어 보려고 합니다. 우리는 어릴 적 문구점 앞이나 이벤트 페이지에서 은색 덮개를 동전으로 긁어 당첨을 확인하던 설렘을 기억합니다. 이 시각적이고 물리적인 경험을 웹 브라우저에서 그대로 재현하는 것은 사용자에게 매우 큰 즐거움을 줍니다. 단순히 클릭 … 더 읽기
안녕하세요! 저번 [15번째 프로젝트: 객체 매핑으로 설계한 자바스크립트 단위 변환기 (Unit Converter)] 글에 이어서 오늘은 자바스크립트 텍스트 분석기를 제작하여 블로그를 작성해보려고 합니다. 우리는 일상 속에서 수많은 텍스트를 마주합니다. 블로그 포스팅을 작성할 때, 자기소개서를 준비할 때, 혹은 중요한 리포트를 제출할 때 우리는 항상 ‘글자 수’라는 물리적인 제약과 ‘단어 선택’이라는 질적인 고민을 동시에 하게 됩니다. 단순히 글자 … 더 읽기
안녕하세요! 오늘 아홉 번째 프로젝트로 도전해 본 주제는 우리에게 너무나 익숙한 ‘자바스크립트 타이핑 속도 측정기’입니다. 사실 처음 기획할 때는 “글자만 비교하면 끝나는 간단한 로직 아닌가?”라고 가볍게 생각했습니다. 하지만 실제 구현 과정에서 마주친 디테일들은 결코 만만치 않았습니다. 특히 웹 환경에서 ‘한글’이라는 언어가 가진 특수성, 그리고 CSS 레이아웃이 1px 차이로 어긋나는 현상을 해결하며 많은 공부가 되었습니다. 이번 … 더 읽기
안녕하세요! 여덟 번째 프로젝트로 인사드립니다. 그동안 우리는 브라우저 안에서만 작동하는 다양한 도구들([계산기], [그림판], [스톱워치] 등)을 만들어왔습니다. 하지만 진정한 웹 앱의 매력은 외부의 살아있는 데이터를 가져와 사용자에게 실시간으로 전달하는 데 있다고 생각합니다. 그래서 오늘은 자바스크립트 중급자로 나아가는 가장 중요한 관문인 ‘비동기 통신’을 다뤄보려 합니다. 바로 외부 API를 연동한 ‘실시간 자바스크립트 환율 계산기’입니다. 단순히 환율 수치를 계산하는 … 더 읽기
안녕하세요! 어느덧 자바스크립트 미니 프로젝트 시리즈가 일곱 번째 시간에 접어들었습니다. 그동안 [계산기]나 [그림판]처럼 복잡한 로직과 UI를 가진 앱들을 만들어오면서, 가끔은 ‘가장 단순한 기능이 가장 큰 울림을 줄 때가 있다’는 생각을 하곤 했습니다. 그래서 오늘은 아주 클래식하지만, 어떻게 구현하느냐에 따라 서비스의 퀄리티가 천차만별로 달라지는 ‘자바스크립트 랜덤 명언 생성기’를 준비해 보았습니다. 이번 프로젝트에서 제가 집중한 포인트는 ‘데이터의 … 더 읽기
벌써 다섯번째 글을 작성하네요. 이번에는 자바스크립트 달력을 만들어볼까 합니다. 스마트폰이나 윈도우 화면에서 쉽게 확인할 수 있는 달력을 한번 구현해보면서 공부해볼까 합니다. 사실 이미 만들어져 있는 달력 라이브러리들이 많지만, 그래도 직접 구현해보면 공부도 되고, 좋을 것 같아서 시작하게 되었습니다. 1. 설계 ① 월(Month) 구현하기 달력을 만들면서 가장 먼저 당황했던 건 new Date().getMonth() 결과값이었습니다. 분명 지금은 1월인데 … 더 읽기
우리가 웹 서핑을 하다 보면 아이디를 저장하거나, 장바구니에 담은 물건이 다음날에도 그대로 남아있는 것을 볼 수 있습니다. 반면, 우리가 지난번 만든 스톱워치는 페이지를 새로고침하는 순간 모든 기록이 0으로 돌아갔죠. 오늘 만들 자바스크립트 할 일 목록(To-do List)은 바로 이 차이를 해결하는 프로젝트입니다. 앞서 우리가 만든 ‘OX 퀴즈‘와 ‘스톱워치’가 브라우저의 현재 상태(State)를 보여주는 데 집중했다면, 이번 프로젝트는 … 더 읽기