웹디자인 (HTML,JS)77 728x90 예약 폼 입력 검증, 브라우저와 서버의 역할 나누기 독감 예방접종 예약이 몰리는 시기에는 예약 폼에 입력이 집중됩니다. 생년월일을 비워 보내거나, 연락처에 문자를 넣거나, 같은 요청을 여러 번 보내는 일이 실제로 자주 일어납니다. 그래서 입력값을 어디에서 어떻게 확인할지가 실무에서 자주 문제가 됩니다.이 글에서는 HTML 폼의 JavaScript 검증을 사용성 도구로 두고, 신뢰 판단은 서버에서 다시 하는 기준을 정리합니다. 필수값·형식·길이 검증 예시와 클라이언트 검증만 믿을 때 생기는 우회 문제를 함께 봅니다. 끝까지 읽으면 자사 예약 폼을 점검할 순서를 얻을 수 있습니다.브라우저 검증과 서버 검증은 역할이 다릅니다브라우저의 JavaScript 검증은 사용자가 잘못 입력했을 때 바로 알려 주는 용도입니다. 제출 버튼을 누르기 전에 "연락처를 입력해 주.. 2026. 10. 14. 로그인·결제 폼의 보안 기본 — CSRF 토큰, 자동완성 속성, 비밀번호 입력 UX, 속도 제한 폼은 사용자와 서버가 만나는 자리라서 보안과 UX 가 같은 곳에서 결정됩니다. 그리고 '보안을 위해' 라며 넣은 장치가 오히려 보안을 해치는 경우가 많습니다 — 비밀번호 붙여넣기 금지가 대표적입니다. 로그인·결제·설정 변경 폼을 만들 때 지켜야 할 기본을 정리합니다.1. CSRF — 남의 사이트에서 내 폼을 보내지 못하게CSRF(교차 사이트 요청 위조)는 로그인된 사용자가 다른 사이트의 페이지를 여는 순간 그 사이트가 몰래 우리 서버로 '비밀번호 변경' 같은 요청을 보내는 공격입니다. 방어는 서버가 발급한 토큰을 폼에 넣고 요청 때 확인하는 것이고, 대부분의 프레임워크가 기본으로 제공합니다. 세션 쿠키에 SameSite=Lax(또는 Strict) 를 두면 브라우저 단에서 한 겹 더 막힙니다. 그리고 상태.. 2026. 7. 24. 콘텐츠 보안 정책(CSP) 처음 적용하는 법 — 보고 모드에서 시작해 단계별로 조이기 CSP(Content-Security-Policy)는 "이 페이지는 어떤 출처의 스크립트·스타일·이미지만 실행·표시한다"를 브라우저에 알려 주는 응답 헤더입니다. 제대로 걸리면 XSS 로 주입된 스크립트가 실행 자체가 막히므로 가장 강력한 방어선이 됩니다. 문제는 처음부터 강하게 걸면 사이트가 바로 깨진다는 것. 그래서 보고 모드로 시작해 단계별로 조이는 순서가 정석입니다.1단계 — 보고 모드로 현황 보기Content-Security-Policy-Report-Only: default-src 'self'; report-uri /csp-reportReport-Only 는 아무것도 막지 않고 위반만 보고합니다. 브라우저 콘솔에도 뜨고, /csp-report 로 JSON 이 POST 됩니다. 이 보고를 일주일쯤.. 2026. 6. 10. AI 시대 UX 방향: 화면에서 경험으로 사용자가 아닌 서비스가 먼저 움직인다 화면 설계에서 “의도·행동·신뢰 설계” 시대로2025~2026년 UX(User Experience)의 가장 큰 변화는 단순히 화면이 예뻐지거나 인터랙션이 화려해지는 수준이 아닙니다. 핵심은 “사용자가 직접 조작하는 경험”에서 “서비스가 먼저 이해하고 움직이는 경험”으로 이동하고 있다는 점입니다. 과거 UX가 버튼 위치, 메뉴 구조, 사용 편의성 중심이었다면, 이제는 다음과 같은 질문이 더 중요해지고 있습니다.사용자가 지금 무엇을 하려 하는가?어떤 상황인지 시스템이 이해할 수 있는가?클릭하기 전에 먼저 제안할 수 있는가?최소 행동으로 목표를 달성하게 만들 수 있는가?자동화하면서도 신뢰를 잃지 않을 수 있는가?즉, UX는 더 이상 “UI 설계”만의 영역이 아니라AI데이터행동 분석심리신뢰접근성자동화보안운영 전.. 2026. 5. 23. 웹툰 스토리부터 콘텐츠 랜딩페이지까지 자동 생성하는 아키텍처 설계 왜 지금 ‘콘텐츠 자동화’가 중요한가✔ 기존 방식의 한계디자이너 → 개발자 → 배포 (시간 오래 소요)콘텐츠 제작 비용 높음반복 작업 많음✔ AI 기반 방식👉 “프롬프트 기반 생산 시스템”아이디어 → 자동 생성 → 수정 → 배포👉 결과제작 시간 90% 감소반복 콘텐츠 무제한 생성마케팅 자동화 가능스토리 생성 (LLM)✔ 프롬프트Create a webtoon story:Genre: cybersecurityPanels: 6Include:- scene- emotion- dialogue- camera angle✔ 결과 구조[ { "scene": "dark server room", "emotion": "tense", "dialogue": "We’ve been breached...", ".. 2026. 4. 20. 이전 1 2 3 4 ··· 16 다음 728x90 728x90
