웹 개발에서 살아남기

웹페이지에서 전화번호를 눌렀을 때 바로 통화가 걸리게 하거나, 이메일 주소를 눌렀을 때 메일 작성 창이 뜨게 하려면 태그의 tel과 mailto 스키마를 사용해야 한다. 하지만 단순히 링크만 건다고 끝이 아니다. 데스크톱에서의 UX 문제, 특수문자 인코딩, 그리고 이메일 무단 수집(스팸)을 방지하는 실무적인 전략을 상세히 알아본다. HTML a 태그로 전화(tel)와 메일(mailto) 연결하기: 기능 구현과 스팸 방지 전략모바일 웹사이트를 이용하다가 고객센터 전화번호를 발견했다. 만약 사용자가 이 번호를 외워서 다이얼 앱에 직접 입력해야 한다면? 아마 대부분은 귀찮아서 포기할 것이다.웹 접근성과 사용자 경험(UX)을 높이기 위해서는 클릭 한 번으로 네이티브 앱(전화, 메일)을 실행시켜 주는 URI ..

웹 브라우저는 보안상의 이유로 요소의 files 속성을 스크립트로 직접 조작하는 것을 엄격히 제한한다. 사용자의 로컬 파일 시스템 보호를 위한 브라우저의 설계 원칙과, 수정 페이지에서 기존 파일 데이터를 처리하는 올바른 UI/UX 패턴을 정리한다. input type="file"에 값을 설정할 수 없는 이유와 수정 페이지 구현 전략게시글 수정 페이지를 개발하다 보면 흔히 마주치는 요구사항이 있다. "기존에 업로드된 이미지를 input 태그에 미리 채워 넣어줄 수는 없나요?"텍스트(type="text")는 defaultValue나 value로 서버에서 받아온 값을 넣어주면 그만이다. 하지만 파일 인풋은 서버에서 받아온 이미지 파일 객체(Blob/File)가 있어도, 이를 input.files에 할당하려..

웹 사이트의 품질을 결정하는 기준인 웹 표준(Web Standards)의 정확한 정의와 4가지 핵심 이점을 정리한다. 또한 실무에서 표준 준수 여부를 점검하고 품질을 높일 수 있는 W3C Validator, Lighthouse, Can I Use 등 필수 검증 도구 5가지를 소개한다. 웹 표준(Web Standards) 가이드: 정의부터 필수 도구 5선까지"제 로컬(Chrome)에서는 잘 되는데요?"주니어 시절, QA 팀으로부터 크로스 브라우징 이슈 리포트를 받았을 때 가장 먼저 했던 변명이다. 하지만 사파리(Safari)나 구형 모바일 기기, 혹은 인앱 브라우저에서 레이아웃이 깨지거나 버튼이 눌리지 않는 문제는 현업에서 매우 빈번하게 발생한다. 웹사이트는 단순히 내 화면에서 '작동'하는 것을 넘어, ..