TR;DL
- 지도위젯 기능추가
- 메인 광고배너
- TechTalk 쇼핑몰 기술동향 조사
- imweb localization 방법 변경 (Gettext)
- BO Renewal
지도위젯 마커기능 추가
처음 아임웹에 와서 아임웹의 구조를 파악하고 위젯들이 어떻게 동작하는지 알아보는 시간만 1달여정도를 거치고 새로운 기능을 추가했습니다.
지도위젯에서 다양한 마커를 선택해서 보여줄수있도록 변경하는 작업을 제일 먼저 시작하였습니다.
메인 광고배너
아임웹의 외부광고를 아임웹 메인 사이트에서도 효과적으로 노출할 수 있도록 디자이너분의 요구사항을 최대한 전부 구현하였습니다.
요구사항을 전부 충족하기 위해서 따로 분리해서 개발하고 해당 스크립트만 임포트 하는 방식으로 구조를 나눴습니다.
메인 광고 배너는 vite + react로 만들어졌습니다. 그래서 상태에 대한 UI를 좀더 효과적으로 구현할 수 있었습니다.
왜 React를 선택했는가? 상태에 대한 UI들을 관리하기에는 React 같은 라이브러리가 편리한데 지금 아임웹의 기반에는 React가 없습니다. 그렇다고 React와 같이 동작하는 스크립트를 개발하는 것은
바퀴를 다시 개발하는 것과 동일하다 생각해서 React를 선택해서 개발했습니다. 지금 인원들로 유지보수하기에는 어렵겠지만 React는 상당히 유명하고 많은 지식들이 커뮤니티에 있기 때문에 접근하기 쉬울 것이다 판단했습니다.
아쉬웠던 점, 어려웠던 점들은 이폰에서 정책상 지원하지 않는 기능들을 구현했기 때문에 아이폰에서 대응할 수 없던 부분들은 어려웠습니다. 처음부터 모든 디바이스가 적용할 수 있는 UI/UX였다면 어떨까? 생각이 들었습니다.
TechTalk 쇼핑몰 기술동향 조사
프론트엔드는 시시각각 트렌드에 민감하게 반응하고 뷰를 그리는 라이브러리 프레임워크들이 빠르게 변화하고있습니다.
현재는 React로 UI를 만드게 현재 트렌드입니다. 이 트렌드에 대해서 시장조사를하고 기술의 동향을 찾아보았습니다.
그리고 사내에서 작은 TechTalk을 진행하였습니다.
imweb localization 방법 변경 (Gettext)
아임웹에서 작업하면서 몇가지 불편한 점이 있었지만 특히 다국어에 관련된 방법이 불편하여 표준은 아니지만 표준처럼 사용하는 PHP의 Gettext 도입을 고민해보고 방법을 모색하여 현 대만 관련 담당인 정기창, 도움 김광민 주측으로 작업을 하였습니다.
저는 여기서 번역본을 잘 관리할 수 있도록 돕는 시스템인 Weblate를 연구하여 아임웹에 어떻게 적용할지 어떻게 자동화할지 저희 핏에 맡게 설정하여 테스트 서버에서 작업을 완료하였습니다.
그리고 기창님께 인수인계하였습니다.
왜 기창님께 인수인계하였는가?
백엔드에서 널리 사용되고있는 다국어관련 함수의 마이그레이션은 아주 방대하고 해당 함수에 대해서 잘 파악하고 계신분이 기창님이기 때문에 인수인계하였습니다.
Gettext 프로젝트를 시작하고 마무리까지 해야하는데 제가 마무리까지 끌고가지 못했습니다. 프로젝트가 실패했지만 다른 파트의 소속분들과 같이 작업 할 수 있었고 논의 해볼 수 있었습니다.
tailwindcss 도입 & 통계 – 마일리지 대쉬보드
개발을 손쉽게 하기위해서 저희 아임웹의 소스코드에는 jQuery, bootstrap, bootstrap plugin들이 많이 도입되어있습니다. 개인 경험으로 퍼블리싱의 속도를 정말 빠르게 올려주는 tailwindcss를 도입하면 좋을 것같아서 직업 tailwindcss를 도입하기 위해서 프론트엔드의 빌드 과정을 전반적으로 확인해보고 아임웹 소스코드에서는 어떻게 도입하면 좋을지 셋팅하여서 도입하였습니다.
통계 – 마일리지 대쉬보드쪽에 바로 도입하였습니다.
제가 아임웹 UI를 만드는 프로젝트는 처임이어서 이전 프로젝트와 얼마나 개발 속도가 향상되었는지 비교 분석은 하지 못하였지만 상반기 하반기까지 이슈없이 잘 운영되고 있어서 성공적이었다고 생각합니다.
이를 기반으로 프론트엔드 파트 전원에게 사용방법과 어떻게 어떤 방법으로 사용하면 좋은지 기술을 전파하였습니다.
tailwind는 순수한 css 유틸리티 프레임워크이기 때문에 이후 기술 변화에도 빠르게 반영하거나 교체할 수 있습니다.
마일리지 대쉬보드쪽에 속도향상을 위해서 React 기술도 도입하였는데 기존 인원들과 유지보수를 위해서 React 도입은 너무 시기상조인 것같아서 스스로 이 부분은 제거하였습니다.
BO renewal
BO 리뉴얼을 맡으면서 프론트엔드를 구성할 수 있는 인프라부터 배포방식 개발방식까지 모두다 살펴본 프로젝트였습니다. 테스트를 선택적으로 할수있지만 테스트를 할 수있는 최적의 개발환경을 만들고 개발자들이 언제 어디서든 서버가 없더라도 아임웹 BO를 개발할 수 있도록 만드는 것이 목표였습니다.
그리고 프론트의 책임과 역할을 나누면서 추후 사람들이 많아질수록 분리하기 좋은 구조도를 만들었습니다.
디자인 시스템을 만들고 디자인 시스템을 이용한 디자인 템플릿 그리고 각 메뉴별로 웹앱을 만들고 각 팀에서 웹앱을 관리할 수 있도록합니다. 그리고 디자인 시스템을 이용해서 해당 웹앱에서 사용할 디자인 템플릿을 각 팀에서 만들어서 사용할 수 있는 그런 그림을 그리고 BO 프론트를 설계하였습니다.
기술 적인 부분에서 설계를 하고 직접 만들어가면서 부딪힌 것들을 정리하였습니다.