안녕하세요! NewCodes입니다!
발단
사용자에게 피드백을 받고 추가 기능을 구현한 경험을 남겨보고자 한다.
해당 프로젝트는 MapleStorage이다. 내가 코딩을 처음 배울 때 만들었던 웹이다. html, css, js만을 사용하여 외부 라이브러리 도움 없이 만들었었다. github pages를 통해 배포했고, 메이플 커뮤니티에 올려 유저를 모아 반응을 얻기도 했다.
해당 웹의 주요 기능은 아래와 같다.
- 메이플 마을 브금 들려주기
- To do list 작성하기
- 사냥 시 재획에 필요한 타이머 작동
이게 바로 2년 전 일이다!
어느 날, 한 사용자로부터 메일이 왔다. 타이머 작동에 관해 추가 구현을 해달라는 것이었다.
아직도 내 웹을 사용하고 있다는 사람이 있으며 메일까지 주는 사람이 있다는 것에 놀랐다. 정말 기뻤고, 해당 요구사항을 바로 구현하기로 마음을 먹었다.
구현 계획 세우기
사용자의 요구사항은 타이머 창만을 띄우는 것이었다. 기존에는 아래처럼 창의 띄워진다.
타이머가 여러 창과 함께 띄워져 있는 모습이다. 반면에 사용자가 바라는 건 아래와 같다.
아마 게임을 하면서 창을 효율적으로 쓰고 싶은 것으로 해석된다. 메이플과 같은 RPG 게임은 게임 창만 띄우는 게 아니라, 넷플릭스나 유튜브를 함께 띄워두고 하는 경우도 많기 때문이다.
최대한 기존의 기능을 변경하지 않으면서 해당 요구사항을 충족시킬 방법을 생각했다. 기존의 방식처럼 사용하고 싶어하는 사용자도 있을 수 있기 때문이다.
떠오른 방법은 팝업을 띄우는 것이다! 팝업의 장점은 북마크, 탭 등이 없기에 기존의 창보다 더 간결하다. 사용자의 요구사항을 만족시키기에 적절한 수단이라 판단했다.
그렇다면 팝업을 어떻게 띄울 것인가? 나는 두 가지 방안을 생각했다.
1. https://maplestorage.store/timer-popup으로 입력 시 팝업 띄워주고 /로 리다이렉트
2. https://maplestorage.store/에서 't' 단축키 입력 시 타이머 팝업 띄워주기
두 가지 모두 괜찮은 방법이다. 구현하기 어렵지도 않기에 두 가지 모두 구현하고, 사용자에게 편한 방법을 선택하도록 유도하고자 했다.
팝업을 띄우기 위한 과정
우선 팝업과 모달의 차이부터 짚어보자.
팝업은 별개의 창을 하나 더 생성하는 것이고, 모달은 창 위에 레이어를 하나 더 쌓아서 창을 띄우는 것이다. 지금 같은 상황에서는 타이머만 별개로 띄워두는 게 필요하기에 팝업이 더 적절하다.
팝업을 띄우기 위해서는 window.open이라는 함수가 필요하다. window.open은 URL을 바탕으로 새 창, 새 탭을 열 때 사용하는 함수이다. 참고로 window 객체는 브라우저에서 제공하는 최상위 객체로, 웹 페이지와 관련된 다양한 기능을 제공한다.
const popup = window.open(
"timer.html",
"_blank",
"width=500,height=345,toolbar=no,menubar=no,scrollbars=no,location=no"
);
나는 위와 같이 함수를 사용해서 팝업을 띄웠다. 두 번째 인자 _blank는 새창으로 열겠다는 설정이며, 기본 설정이다. 이외에도 현재 페이지를 대체하는 설정(_self)이나, 부모 프레임에 열리는 설정(_parent) 등 다양한 설정값이 있다.
세 번째 인자는 새 창에 대한 여러 옵션을 심어줄 수 있다. 나는 타이머만을 보여주는 게 목적이기에 최대한 no를 외치며 가벼운 팝업을 만들었다.
이제 팝업을 띄웠다면 크기를 조정해야 한다. 나는 아래와 같이 팝업창에 있는 타이머에 대해 크기를 설정했다.
.timer {
aspect-ratio: 430 / 300;
width: clamp(430px, 100vw, 1290px);
height: auto;
...
font-size: max(1.5vw, 8px);
}
이미지의 종횡비를 유지하기 위해서 aspect-ratio를 사용할 수 있다. aspect-ratio를 사용하는 방법은 간단하다. 가로 세로 비율을 지정해주면 된다.
가로 세로 비율을 유지시켰으니, 이제 반응형으로 폭에 따라 타이머가 화면에 꽉 찰 수 있도록 해보자. 이는 clamp를 통해 할 수 있다. 최소 너비는 430px, 최대 너비는 1290px로 지정했다. 그리고 해당 요소의 너비가 뷰포트의 100%가 될 수 있게 설정했다. 참고로 vw는 viewport width의 약자로 브라우저의 너비를 의미한다.
폰트 크기도 이에 맞게 조절했다.
.timer-option-area {
...
font-size: 2em; /* ,timer의 font-size를 기준으로 2배 */
}
em을 사용하여 부모인 timer의 font-size를 기준으로 설정했다. 부모의 값을 기준으로 변경시키는 것이기에 이를 통해 타이머라는 창의 크기가 커지고 작아질 때, 안에 있는 폰트와 같은 요소들이 일관성 있게 커지고 작아지게 할 수 있다.
진행바는 아래와 같이 했다.
.progress-area {
aspect-ratio: 300 / 20;
width: 80vw; /* 뷰포트 너비에 따라 변화 */
...
}
부모를 기준으로 하면 좋겠지만, 빠르게 구현하기 위해 아까 했던 방식을 차용해서 80%의 뷰포트를 차지하게 해줬다.
마지막으로 단축키를 받아주는 이벤트 리스너를 만들고 완성했다!
느낀 점
2년 전에 작성한 코드를 보며 충격을 금치 못했다. 코드 일관성이 전혀 없고, 기본적인 포맷팅도 안 되어 있다. 네이밍도 헷갈리게 해둬서 코드 파악하는 데 시간이 걸리기도 했다. CSS는 너무 주먹구구식으로 때려 넣은 느낌도 났다.
그런데 나도 이번에 수정하면서 빨리 구현하려다보니 주먹구구식으로 수정한 부분도 있다. 지속적으로 관리하는 프로젝트는 아니었다 보니 빠르게 구현하기 위해서 어쩔 수 없이 타협해야 하는 부분이었다.
누군가가 내 서비스를 사용한다는 건 정말 기쁜 일이다! 그게 1명, 10명일지라도 동기부여를 일으키기에 충분하다 ㅎㅎ
앞으로 프론트 공부도 조금씩 해야 할 것 같다. 내가 한 MapleStorage는 백엔드 코드가 전혀 없다. 프론트만으로도 사용자에게 유의미한 경험을 전달할 수 있다. 또, 프론트는 사용자 경험 측면에서 중요한 역할을 하기에 백엔드 개발자라도 알아둘 필요가 있어보인다. 또, AI가 활성화됨에 따라 결국 이것저것 하게 되지 않을까?
여기서 마무리하자!
레퍼런스
https://developer.mozilla.org/en-US/docs/Web/API/Window/open