maplescouter

1. 프로젝트 소개

메이플스토리 게임 내 캐릭터의 스펙을 객관적으로 제공하고, 효율을 계산해주는 사이트입니다.

넥슨 오픈 API를 통해 사용자의 아이템을 보여주고, 보스 컷을 계산해주는 기능을 갖추고 있습니다. 현재 하루 약 3만 명이 이용 중인 서비스로, 보안상의 이유로 Repository는 Private로 관리되고 있습니다.

2. 기능 명세

홈 : 캐릭터를 검색하고 즐겨찾기한 캐릭터를 확인할 수 있는 페이지
직접 입력 : 상세 스탯을 직접 기입하여 환산 결과를 출력하는 입력 폼 페이지
결과 : 보스컷을 계산하여 출력해주는 페이지
캐릭터 정보 : 넥슨 오픈 API를 통해 가져온 캐릭터 아이템을 상세히 보여주고, 환산 결과를 계산하여 출력하는 페이지
헥사/하이퍼 최적화 : 헥사 스탯과 하이퍼 스탯의 최적화된 값을 계산해주는 페이지
헥사 코어 최적화 : 헥사 코어의 최적화된 강화 순서를 보여주는 페이지
기록실 : TOP100 랭킹을 보여주는 페이지

3. 역할

7개의 페이지에 대한 UI 디자인 및 퍼블리싱 작업
UI/UX 개선 및 반응형 디자인 구현
tailwind CSS로 전체 스타일링 변경
API 로딩, 즐겨찾기, 프로필 이미지 저장 기능 등 추가

4. 기술 선택 이유

tailwind CSS: 기존 styled-component를 tailwind로 변경하여 코드의 일관성과 성능을 개선하고, 반응형 디자인을 더 효율적으로 구현하기 위해 선택

5. 성능 최적화

styled-component에서 tailwind로 변경하여 CSS 로딩 시간을 단축하고, 페이지 렌더링 성능을 개선
UI/UX 개선을 통해 사용자 경험을 향상시키고, 모바일 환경에서의 사용성을 개선

6. 회고

이 프로젝트는 처음에는 스프레드시트로 제작되어 대부분의 사용자가 이용하던 서비스였습니다. 하지만 관리가 점점 어려워지면서 웹 버전이 출시되었고, 사이트에 들어가 보니 어떤 것이 입력란인지, 버튼인지 구분하기 어렵고, 모바일 환경에서는 모달이 잘리는 등 UI/UX 개선이 필요해 보였습니다.

연락할 수단을 찾아 UI/UX 개선을 도와주겠다는 의견을 적극적으로 전달했고, 긍정적인 반응을 얻어 프로젝트에 합류하게 되었습니다.

디자이너가 따로 없었기 때문에 Figma를 통해 직접 디자인 작업을 진행했고, 퍼블리싱 작업을 통해 UI/UX를 개선했습니다. 그리고, 더 나은 성능과 빠른 로딩을 위해 styled-component로 구현된 컴포넌트를 모두 tailwind로 변경하는 작업도 진행했습니다.

회사에서는 보통 디자인팀과 기획팀이 따로 있어 개발자는 Figma를 보고 개발만 하면 되었기 때문에 UX를 깊이 고민할 기회가 없었습니다. 하지만 이번 프로젝트를 진행하면서 실 사용자들의 피드백을 받아 사용자 관점에서 UX를 고민하는 시간을 많이 가졌고, 이는 프론트엔드 개발자로서 매우 가치 있는 경험이었습니다.

보수 없이 진행되는 프로젝트였지만, 그 어느 때보다 열정을 가지고 개발했습니다. 빨리 사용자에게 보여주고 싶은 마음에 아침 7시까지 개발에 집중한 적도 있습니다. 이 프로젝트를 통해 많은 성취감을 느꼈습니다.

메이플 환산 주스탯