간단한 소감글

롯데백화점 앱은 5개월 동안 구축하고 4개월 정도 유지보수를 했던 나에게는 굉장히 애증이있는 프로젝트다. 처음으로 대규모 인원(개발자만 30명?)과 협업하여 개발하였으며 다양한 기기(키오스크, 앱, 모바일, pc 웹)로 디버깅하며 개발하여야 했다. 을지로 명동 백화점 건물 위에서 파견을 하며 개발을 하였는데, 엘레베이터를 타고 내려가면 푸드코트가 이어지는 신기한 공간이였던 것 같다.

롯데백화점 리뉴얼

롯데백화점 ios,aos,mow,pcw,kiosk 등 화면 단을 구축했습니다.

페이지 퍼블 및 성능 최적화, webview

롯데백화점

지점별 쇼핑정보, 매장안내, 우수고객 제도, 문화센터, 웨딩센터, 롯데갤러리 등 정보제공

https://www.lotteshopping.com/main

✅ 브라우저는 너무 다양하다.

롯데백화점 리뉴얼은 앱의 대부분도 웹뷰 처리를 하였고 특이하게 키오스크도 포함하는 프로젝트였습니다. 모바일과 데스크탑을 나눠서 프로젝트를 개발하기는 하였지만 여러 디바이스를 두개의 프로젝트로 관리하는게 쉽지만은 않았습니다. 다양한 기기라는건 반응형 뿐만 아니라 로직도 달라져야 할 경우가 많습니다. 예를들어 아래와 같은 일이 있었습니다.

고객이 문의를 500자 이내로 작성하는 기능에 복붙을 해도 500자를 넘지 못하게 하는 QA를 수정하던 중 AOS와 IOS 웹에서 maxlength가 상이 한 것을 발견하였습니다.

<textarea placeholder="500자 이내로 입력해 주세요." rows="6" maxlength="500">
</textarea>
<span class="current"></span>
<span class="max"></span>

AOS: 498/500

IOS: 500/500

같은 웹이고 f.target.value.length; 입력값의 길이를 가져올 뿐인데 대체 왜 이러한 일이 일어날까요?

current에 들어가는 길이 값은 문제가 없었습니다. maxLength를 체크하는 부분이 문제인 것이지요.

저는 상이한 부분이 입력값에 “ENTER” 줄바꿈을 쳤을 때 일어나는 것을 알게 되었습니다.

Unix/Linux 스타일 개행 문자: 이것은 \n 문자로 표현되며 Unix, Linux, macOS 등에서 주로 사용됩니다.

Windows 스타일 개행 문자: 이것은 \r\n 문자로 표현되며 Windows 운영 체제에서 주로 사용됩니다.

AOS 개발자, 롯데 개발자 분들과 상의를 해보았으나 다들 뾰족한 수가 없었습니다.

저는 결국 이 문제를 해결하기 위해 아래와 같은 제안을 하였습니다.

<textarea

html에서 제공하는 maxLength 값을 지우고 customMaxLength를 만듭니다.


let currentLength = 0;
let setMaxLength = 0;
        
if(!input.getAttribute('maxLength')){
   target.querySelector('.__count .__max').innerText = "/"+ input.getAttribute('customMaxLength');
   setMaxLength = input.getAttribute('customMaxLength');
 }else{
   target.querySelector('.__count .__max').innerText = "/"+ input.getAttribute('maxLength')
   setMaxLength = input.getAttribute('maxLength');
}

input.addEventListener('keyup',(f) => {
	 currentLength = f.target.value.length;        
	 if(currentLength <= setMaxLength) {
	    target.querySelector('.__count .__current').innerText = currentLength
      f.target.value = f.target.value.substr(0, setMaxLength);
   }else if(setMaxLength < currentLength){
      f.target.value = f.target.value.substr(0, setMaxLength);
   }
})

결국 제 방식은 채택이 되었고 롯데 프로젝트에 참여하고 있는 모든 개발자들과 이를 공유하고 맞추기로 하였습니다.

사실 위 방식이 현재는 좋다고 생각은 하지 않습니다. HTML5 부터는 아래와 같은 input 이벤트를 알게 되었고 이를 사용하면 'keyup', 'keydown', 'change’ 보다 더 실시간으로 입력 내용의 변경을 감지하고 처리할 수 있는 기능을 제공하기 때문입니다.

input.addEventListener('input', (event) => {
    const inputValue = event.target.value;
});

어쩌면 위의 현상이 일어나지 않았을지도 모릅니다.

그럼에도 이 문제를 해결 과정에 쓴 것은 AOS개발자, 롯데 개발자, 백엔드 개발자, 프리랜서 개발자등 다양한 개발자 분들과 소통 하였고 모두에게 만족하는 결과 값을 내었기 때문입니다.

✅ 담당 업무

페이지 퍼블리싱 / 전체 40%

다국어 / 전체 52%