Mong dev blog

1. 들어가며OTP 입력창은 인증번호를 입력할 때 가장 흔히 마주하는 UI다. 각 칸에 한 글자씩 입력되도록 설계되어 있어, 사용자는 키보드로 빠르게 인증을 완료할 수 있다.[ apple의 OTP 입력창 동작 예시 ]그러나 이 단순해 보이는 UI를 구현할 때 간과하기 쉬운 부분이 있다. 바로 Delete 키의 처리이다. 대게 입력을 지울 때 Backspace 키를 떠올리지만, Delete 키도 입력 삭제에 사용되므로, Delete 키가 작동하지 않으면 해당 키를 사용하는 사용자는 “버튼이 먹지 않는다”는 의문을 가질 수 있다.그럼, OTP 입력 UI에서 Delete 키를 어떻게 구현해야 할까? 단순히 input 이벤트만으로 처리하면 될까?input 이벤트만으로는 부족하다!OTP 입력창에서는 값이 변경되었..

1. 들어가며현재 우리 서비스는 모바일 환경에서 가상 키패드를 제공하며, 가상 키패드는 click 이벤트로 입력을 처리하고 있다.그러나 특정 상황에서 키패드 입력이 누락되는 문제가 발생하고 있었다.이 문제는 사용자가 입력 버튼을 빠르게 번갈아가며 클릭할 때 발생했는데, 웹 환경에서는 문제가 없었지만, 모바일 환경에서만 이 문제가 나타났다.아래 gif는 문제를 재현한 모습이다. gif상 버튼이 가끔씩 눌리는 것처럼 보이지만, 실제로는 빠르게 번갈아가면서 누르고 있었다ㅎㅎ 도대체 왜 모바일 환경에서만 입력 누락 문제가 발생하는 걸까?이번 시간에는 모바일 환경에서 연속 입력이 무시되는 이유와 click 이벤트와의 연관성을 살펴보겠다.이 글은 아래 목차 순서대로 진행된다.1. 들어가며2. 모바일 환경에서 연속 ..

1. 들어가기 전에…범위 슬라이더(range slider)는 사용자가 특정 범위 내에서 최소, 최대값을 선택할 수 있는 UI 요소이다.이번 포스팅에서는 두 개의 input을 이용해 범위 슬라이더를 구현하는 방법에 대해 알아보았다!이 포스팅을 다 읽고 나면 아래와 같은 형태의 범위 슬라이드를 구현할 수 있다 🙂2. 어떻게 구현할 수 있을까?1) HTML 구조💡 먼저, 범위 슬라이더를 구성할 기본 HTML 구조를 정의해야한다.구조는 두 개의 input 요소와 진행 상태를 표시하는 요소, 두 개의 핸들로 구성된다.(1) 코드보기 요소역할range-slider-container- 최상위 컨테이너slider-track- 슬라이더의 트랙 또는 배경 역할p..

확장자 빼고, 파일명만 말줄임하는 방법1) 미리보기(1) 파일명 말줄임한 예시 See the Pen only-file-name-abbreviation by KumJungMin (@kumjungmin) on CodePen.(2) 커스텀 파일 입력창 + 파일명 말줄임 예시 See the Pen file-input-name-abbreviation by KumJungMin (@kumjungmin) on CodePen.2) 전체 코드보기만약 파일 입력창에 파일명을 표기할 때, 확장자를 제외하고 파일명만 말줄임 하고 싶다면?아래 3가지를 적용하면 된다 🙂(1) 부모요소에 파일명, 확장자 요소를 각각 선언한다. (ex. .name , .extension)(2) 부모의 display에 flex를 적용한..

1. 입력값이 유효한지 알려줘야지~ 우리는 사이트를 방문할 때 여러가지 입력창을 마주하게 된다. 그리고 특정 입력창은 사용자에게 요구하는 입력 데이터 형식이 있다. 만약 사용자가 입력한 값이 형식에 맞지 않다면, 형식에 맞지 않은 값이라는 걸 알려주는 게 중요하다. 💡 그렇다면, 어떻게 해야 사용자에게 값이 유효하지 않은지 알려줄 수 있을까? 이번 시간에는 사용자가 유효하지 않은 값을 입력했을 때, 그리고 값이 허용 범위를 벗어났을 때, 스타일을 달리 적용하는 방법을 알아보았다. 2. 유효성에 따라 스타일링하는 3가지 방법 (1) :invalid, :valid, 값 유효성에 따라 실시간 스타일링 :invalid는 사용자가 입력한 값이 유효하지 않을 때 스타일이 적용된다. :valid는 사용자가 입력한 값..

0. 들어가기에 앞서… 모바일 디바이스 사용자가 늘어나면서, 웹 사이트에서 모바일 입력 폼을 사용하는 경우가 많아졌다. 하지만 용도에 맞지 않는 가상 키보드를 제공하는 경우가 있어, 사용성에 부정적인 영향을 주곤 한다. 예를 들어 전화번호 입력창을 클릭했는데 문자 키보드가 떠서, 사용자가 키보드 탭을 전환해야하는 수고가 발생한다. 이때, inputmode 속성을 사용하면 입력 폼에 적합한 가상 키보드를 사용자에게 제공할 수 있다! 이번시간에는 가상 키보드 모드를 지정할 수 있는 inputmode(공식문서 링크)에 알아보았다. 1. inputmode이란? 1) inputmode는 무엇일까? inputmode는 브라우저가 어떤 키보드를 표시할지 지정할 수 있는 속성이다. 기본값은 inputmode=”text..

이번 시간에는 input [type=”file”]의 스타일을 커스텀해보자! 1. input [type=”file”]? input에 type을 file로 지정하면 파일을 업로드할 수 있는 버튼을 만들 수 있다. 만약 특정 파일 유형만 허용하려면 accept를 사용하면 된다. multiple 속성을 추가하면 2개 이상의 파일을 추가할 수 있다. 이처럼, file은 파일 업로드를 빠르게 구현할 수 있지만, input자체에 스타일을 적용할 수 없는 단점이 있다. 아래 예시는 input에 스타일을 준 모습이다. 앞서 언급했듯이 스타일이 적용되지 않았다ㅜ See the Pen input file not apply style by KumJungMin (@kumjungmin) on CodePen. 2. 스타일 지정하는..