🖼️ 인포그래픽

🖼️ 4컷 인포그래픽

💡 한 줄 요약

이 글은 암호학의 “직접 만들지 말라”는 원칙을 웹 디자인에 빗대어, 브라우저가 이미 잘 처리하는 스크롤·링크·폼 컨트롤을 임의로 재구현할 때 사용자 경험이 어떻게 나빠지는지 비판한다.

📌 핵심 요약

• 저자는 보안 분야의 “자체 암호 구현을 만들지 말라”는 격언을 출발점으로 삼아, 웹 디자인에도 비슷한 보수적 태도가 필요하다고 말한다.
• 브라우저가 이미 안정적으로 제공하는 스크롤, 링크 이동, 텍스트 선택, 컨텍스트 메뉴, 복사·붙여넣기, 비밀번호 입력, 날짜 선택 같은 기능을 웹사이트가 임의로 대체하면 사용자에게 익숙한 동작이 깨진다.
• 특히 커스텀 스크롤은 마우스·터치패드·키보드 입력에 대한 예측 가능한 반응을 바꾸어 사용자가 페이지 조작 자체를 의식하게 만든다고 지적한다.
• GitHub의 링크 처리처럼 JavaScript가 기본 링크 이동을 가로채는 방식은 때로 현재 탭 이동보다 새 탭 열기가 더 빠를 정도로 불필요한 지연과 복잡성을 만든다고 비판한다.
• 비밀번호 입력 필드와 날짜 선택기 같은 폼 컨트롤을 자체 구현하면 브라우저의 저장, 자동완성, 보안 경고, 접근성, 모바일 키보드 연동, 일관된 조작 방식이 손상될 수 있다고 설명한다.

🧩 주요 포인트

1. 저자는 보안 분야의 “자체 암호 구현을 만들지 말라”는 격언을 출발점으로 삼아, 웹 디자인에도 비슷한 보수적 태도가 필요하다고 말한다.
2. 브라우저가 이미 안정적으로 제공하는 스크롤, 링크 이동, 텍스트 선택, 컨텍스트 메뉴, 복사·붙여넣기, 비밀번호 입력, 날짜 선택 같은 기능을 웹사이트가 임의로 대체하면 사용자에게 익숙한 동작이 깨진다.
3. 특히 커스텀 스크롤은 마우스·터치패드·키보드 입력에 대한 예측 가능한 반응을 바꾸어 사용자가 페이지 조작 자체를 의식하게 만든다고 지적한다.
4. GitHub의 링크 처리처럼 JavaScript가 기본 링크 이동을 가로채는 방식은 때로 현재 탭 이동보다 새 탭 열기가 더 빠를 정도로 불필요한 지연과 복잡성을 만든다고 비판한다.
5. 비밀번호 입력 필드와 날짜 선택기 같은 폼 컨트롤을 자체 구현하면 브라우저의 저장, 자동완성, 보안 경고, 접근성, 모바일 키보드 연동, 일관된 조작 방식이 손상될 수 있다고 설명한다.

🧠 상세 정리

1. 암호학 원칙에서 출발한 웹 디자인 비판

저자는 글을 현대 웹 디자인 관행에 대한 불만으로 시작하지만, 먼저 암호학 세계의 익숙한 원칙을 가져온다. “자체 암호 구현을 만들지 말라”는 말은 누구도 암호 코드를 작성해서는 안 된다는 뜻이 아니라, 민감한 사용자 데이터를 다루는 일반적인 운영 소프트웨어에서 검증되지 않은 사적 구현에 의존하지 말라는 뜻이다. 보안 분야에서는 검토되고 오랜 시간 검증된 알고리즘과 패키지를 사용하는 것이 현재는 표준적인 관행이 되었다. 저자는 과거에 잘못된 RC4 자체 구현을 보았고, 초기화 벡터 문제나 예측 가능한 키스트림, 평문 일부 노출 같은 결함이 사용자 데이터를 위험하게 만들 수 있었다고 회상한다.

2. 브라우저가 잘하는 일을 다시 만들지 말라는 주장

저자는 웹사이트 디자인이 암호학과 같은 종류의 위험을 갖는 것은 아니라고 분명히 한다. 깨진 스크롤바가 깨진 암호화 방식과 같은 수준의 실패는 아니지만, 그래도 웹 디자인에도 비슷한 격언이 있었으면 한다고 말한다. 브라우저가 이미 잘 처리하고 사용자가 매일 의존하는 기능을 웹사이트가 굳이 자체 구현하지 말아야 한다는 것이다. 그 예로 페이지 스크롤, 링크 이동, 텍스트 선택, 컨텍스트 메뉴, 복사와 붙여넣기, 비밀번호 필드, 날짜 선택기를 든다. 저자는 모든 자체 구현을 금지하자는 것이 아니라, 사람들이 실제 업무를 하기 위해 사용하는 진지한 웹사이트에서는 화려한 기능을 넣기 전에 더 보수적으로 판단해야 한다고 말한다.

3. 커스텀 스크롤이 익숙한 조작 감각을 깨뜨리는 문제

저자가 가장 크게 불편해하는 것은 웹사이트의 커스텀 스크롤 동작이다. 사용자는 마우스, 터치패드, 키보드를 사용할 때 페이지가 어떻게 움직일지 이미 몸으로 익히고 있으며, 보통은 그 동작을 의식하지 않는다. 그런데 웹사이트가 브라우저의 기본 스크롤을 덮어쓰고 자체 구현을 적용하면 페이지가 너무 느리거나 너무 빠르게 움직일 수 있고, 키보드 스크롤이 제대로 작동하지 않을 수도 있다. 저자는 이처럼 너무 익숙해서 생각할 필요조차 없던 조작을 낯선 것으로 바꾸는 순간, 사용자가 페이지를 읽는 대신 조작 방식 자체를 다시 생각해야 한다고 비판한다.

4. 링크 이동을 JavaScript로 가로채는 방식에 대한 불만

저자는 커스텀 링크 내비게이션도 큰 불만 사항으로 꼽는다. 웹 브라우저는 애초에 링크를 따라가기 위해 존재한다고 해도 될 만큼 링크 처리를 잘하며, 정상적인 링크 이동은 브라우저의 핵심 기능이다. 그럼에도 일부 웹사이트는 링크 클릭을 JavaScript로 가로채 자체 로직을 실행하고, 저자는 그 대표적인 예로 GitHub를 든다. GitHub에서 파일 링크나 이슈 링크를 클릭하면 브라우저의 개발자 도구에서 확인할 수 있을 정도로 대규모 JavaScript 기능이 클릭 처리를 담당한다고 설명한다. 그 결과 클릭한 링크가 때때로 느리게 열리며, 아이러니하게도 현재 탭에서 기다리는 것보다 새 탭으로 여는 편이 더 빠를 때가 있다고 지적한다.

5. 비밀번호 입력 필드를 대체할 때 생기는 보안과 접근성 손실

저자는 커스텀 비밀번호 입력 필드 역시 위험한 예라고 본다. 다행히 이런 방식은 예전보다 줄었지만, 브라우저가 제공하는 기본 비밀번호 필드는 이미 비밀번호 저장, 이후 자동 입력, 새 계정 생성 시 강한 비밀번호 제안 같은 기능을 지원한다. 또한 안전하지 않은 HTTP 연결에서 비밀번호가 제출될 때 경고할 수 있고, 비밀번호 관리자, 자동완성, 모바일 키보드, 접근성 도구와도 잘 협력한다. 웹사이트가 이를 가짜 입력 필드로 바꾸면 이런 기능들이 깨질 수 있다. 더 나아가 일반 텍스트 필드를 사용해 직접 마스킹하면 브라우저나 운영체제, 보조 기술이 그것을 비밀번호가 아니라 보이는 일반 텍스트로 취급해 의도치 않은 노출이 생길 수도 있다.

6. 날짜 선택기와 잦은 UI 변경이 사용자에게 주는 부담

저자는 커스텀 날짜 선택기도 흔한 성가심이라고 말한다. 기본 날짜 입력이 날짜 범위 선택을 직접 해결하지 못하더라도, 시작일과 종료일을 위한 두 개의 날짜 입력 필드를 제공하면 된다고 본다. 그는 웹사이트마다 다른 방식의 달력 위젯을 익히는 것보다, 자신이 쓰는 브라우저의 일관된 날짜 선택 방식을 사용하는 편이 낫다고 말한다. 어떤 구현은 연도 선택을 위해 월 보기에서 빠져나가야 하고, 어떤 구현은 출생연도를 고르기 위해 이전 연도 버튼을 수십 번 눌러야 하며, 어떤 구현은 날짜를 직접 입력하지 못하게 한다. 글의 마지막에서 저자는 폼 컨트롤을 함부로 바꾸지 말고, 웹사이트 레이아웃과 인터페이스도 몇 달마다 계속 바꾸지 말라고 호소한다. 젊은 사용자는 적응할 수 있어도 나이 든 가족들에게는 매번 새 도구를 배우는 일과 같으며, 이는 기능적 이득 없이 익숙한 것을 다시 배우게 만드는 부담이기 때문이다.

🧾 핵심 주장 / 시사점

• 저자의 핵심 기준은 ‘새롭고 멋진가’가 아니라 ‘사용자가 이미 의존하는 기본 동작을 깨뜨리는가’에 있다.
• 브라우저 기본 기능은 단순한 UI 부품이 아니라 보안, 접근성, 입력 장치, 자동완성, 사용자 습관까지 연결된 생태계라는 점이 강조된다.
• 웹사이트의 잦은 재설계와 커스텀 위젯은 개발자에게는 개선처럼 보일 수 있지만, 일부 사용자에게는 익숙한 작업 환경을 반복해서 빼앗는 비용으로 작용한다.

✅ 액션 아이템

• HP의 GitHub 전략을 Event Listener Breakpoints 기준으로 분해하되, 핵심 anchor(HP, But I, Roll Your Own, Event Listener Breakpoints, GitHub. When, Here I, No. I)가 실제 비용·성과 지표와 어떻게 연결되는지 검증한다.
• But I이 강조한 GitHub. When 맥락이 고객 도입, 보안·운영 요구, ROI 판단에 어떤 우선순위를 만드는지 정리한다.
• In fact, in regulated domains such as payments, healthcare and personal data processing, d 흐름과 I have seen several flawed home-grown RC4 implementations early in my 조건을 함께 놓고, 단기 효율과 장기 경쟁력 사이의 실행 리스크를 점검한다.

❓ 열린 질문

• In fact, in regulated domains such as payments, healthcare and personal data pro이 사실이라면 Roll Your Own에는 어떤 변화가 가장 먼저 나타날까?
• HP가 GitHub를 확장할 때 I have seen several flawed home-grown RC4 implementations early in my 문제는 어떤 지표에서 먼저 드러날까?
• Event Listener Breakpoints 요구가 커질수록 HP의 전략은 클라우드 중심 접근과 어떤 기준으로 달라져야 할까?