# 웹·SEO - 트렌드브리프 글 (12건) - [UI 컴포넌트 이름, 헷갈리는 요소의 표준 명칭 찾기](https://trendbrief.news/articles/ui-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EC%9D%B4%EB%A6%84-%ED%97%B7%EA%B0%88%EB%A6%AC%EB%8A%94-%EC%9A%94%EC%86%8C%EC%9D%98-%ED%91%9C%EC%A4%80-%EB%AA%85%EC%B9%AD-%EC%B0%BE%EA%B8%B0.md) — 2026.07.18: UI 컴포넌트 이름은 W3C ARIA APG, 구글 머티리얼, 애플 HIG 세 공식 문서가 기준이다. 토스트와 스낵바, 아코디언과 디스클로저처럼 자주 뒤섞이는 짝을 출처별로 구분하고 이름 찾는 순서를 정리했다. - [패스키 로그인 원리와 구글·애플 계정 설정법](https://trendbrief.news/articles/%ED%8C%A8%EC%8A%A4%ED%82%A4-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EC%9B%90%EB%A6%AC%EC%99%80-%EA%B5%AC%EA%B8%80-%EC%95%A0%ED%94%8C-%EA%B3%84%EC%A0%95-%EC%84%A4%EC%A0%95%EB%B2%95.md) — 2026.07.17: 패스키는 비밀번호 대신 기기의 지문·얼굴로 로그인하는 FIDO2·WebAuthn 표준 자격 증명이다. 공개키 암호로 동작하는 원리부터 구글 계정에서 패스키를 만들고 삭제하는 방법, 아이폰·네이버의 지원 방식까지 개발자 시선으로 짚었다. - [WebAssembly 3.0, 무엇이 바뀌었고 실무에서 어떻게 쓰나](https://trendbrief.news/articles/webassembly-3-0-%EB%AC%B4%EC%97%87%EC%9D%B4-%EB%B0%94%EB%80%8C%EC%97%88%EA%B3%A0-%EC%8B%A4%EB%AC%B4%EC%97%90%EC%84%9C-%EC%96%B4%EB%96%BB%EA%B2%8C-%EC%93%B0%EB%82%98.md) — 2026.07.15: WebAssembly는 C·러스트 코드를 브라우저에서 네이티브에 가까운 속도로 실행하는 바이너리 포맷이다. 2025년 9월 완성된 Wasm 3.0의 가비지 컬렉션·64비트 메모리 변화와 브라우저 실행법, Emscripten 컴파일, WASI 서버 활용을 실무 관점에서 정리했다. - [대규모 웹 검색 엔진의 해부학, 구글 원형을 설계한 1998년 논문](https://trendbrief.news/articles/%EB%8C%80%EA%B7%9C%EB%AA%A8-%EC%9B%B9-%EA%B2%80%EC%83%89-%EC%97%94%EC%A7%84%EC%9D%98-%ED%95%B4%EB%B6%80%ED%95%99-%EA%B5%AC%EA%B8%80-%EC%9B%90%ED%98%95%EC%9D%84-%EC%84%A4%EA%B3%84%ED%95%9C-1998%EB%85%84-%EB%85%BC%EB%AC%B8.md) — 2026.07.15: 1998년 브린과 페이지가 구글 원형을 공개한 논문을 개발자 눈높이로 정리한다. 링크를 순위로 바꾸는 PageRank, 앵커 텍스트 색인, 크롤러부터 검색기까지 이어지는 검색 엔진 구조를 다룬다. - [Article 구조화 데이터로 저자·발행일·이미지 마크업하기](https://trendbrief.news/articles/article-%EA%B5%AC%EC%A1%B0%ED%99%94-%EB%8D%B0%EC%9D%B4%ED%84%B0%EB%A1%9C-%EC%A0%80%EC%9E%90-%EB%B0%9C%ED%96%89%EC%9D%BC-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EB%A7%88%ED%81%AC%EC%97%85%ED%95%98%EA%B8%B0.md) — 2026.07.15: 구글 공식 문서 기준 Article 구조화 데이터에는 필수 속성이 없다. JSON-LD로 headline·author·datePublished·image를 채우고 리치 결과 테스트로 검증하는 방법을 개발자 눈높이로 정리했다. - [에이전트가 읽는 Meta 디자인 시스템, Astryx](https://trendbrief.news/articles/astryx-meta-%EC%98%A4%ED%94%88%EC%86%8C%EC%8A%A4-%EB%94%94%EC%9E%90%EC%9D%B8-%EC%8B%9C%EC%8A%A4%ED%85%9C%EC%9D%98-%EA%B5%AC%EC%84%B1%EA%B3%BC-%EB%8F%84%EC%9E%85.md) — 2026.07.13: Astryx는 Meta가 공개한 React·StyleX 기반 오픈소스 디자인 시스템이다. 공식 README 기준 사내 8년·1만3천여 앱에서 쓰인 컴포넌트와 테마, CLI를 MIT 라이선스로 개방했다. 구성과 설치 방법을 정리했다. - [코어 웹 바이탈 LCP·INP·CLS 기준과 개선법](https://trendbrief.news/articles/%EC%BD%94%EC%96%B4-%EC%9B%B9-%EB%B0%94%EC%9D%B4%ED%83%88-%EC%B5%9C%EC%A0%81%ED%99%94-%EC%84%B8-%EC%A7%80%ED%91%9C-%EB%B3%91%EB%AA%A9%EA%B3%BC-%EA%B0%9C%EC%84%A0-%EB%B0%A9%EB%B2%95.md) — 2026.07.13: 코어 웹 바이탈은 로딩(LCP)·반응(INP)·안정성(CLS)을 재는 구글의 웹 성능 지표다. 실사용자 데이터로 병목을 찾아 이미지 우선 로딩, 자바스크립트 작업 분할, 레이아웃 자리 예약으로 지표별 개선하는 방법을 정리했다. - [하나의 Clarity Project ID로 Android·iOS 통합 분석](https://trendbrief.news/articles/clarity-project-id-%ED%95%98%EB%82%98%EB%A1%9C-android-ios-%ED%95%A8%EA%BB%98-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0.md) — 2026.07.10: 마이크로소프트 Clarity는 SDK 초기화 때 같은 ID를 넣으면 Android와 iOS 앱을 Project ID 하나로 함께 수집한다. 설정 순서와 통합·분리 판단 기준, 마스킹 점검까지 정리했다. - [세션 녹화·히트맵을 무료로, Microsoft Clarity 시작](https://trendbrief.news/articles/microsoft-clarity%EB%A1%9C-%ED%9E%88%ED%8A%B8%EB%A7%B5%EA%B3%BC-%EC%84%B8%EC%85%98-%EB%85%B9%ED%99%94-%EB%B6%84%EC%84%9D-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0.md) — 2026.07.10: Microsoft Clarity는 마이크로소프트가 무료로 제공하는 웹 행동 분석 도구다. 히트맵과 세션 녹화로 방문자의 실제 클릭과 스크롤을 보여주며, 추적 코드 한 줄만 넣으면 데이터가 쌓인다. - [웹마스터 도구란? 색인과 크롤링을 점검하는 콘솔](https://trendbrief.news/articles/%EC%9B%B9%EB%A7%88%EC%8A%A4%ED%84%B0-%EB%8F%84%EA%B5%AC%EB%A1%9C-%EC%82%AC%EC%9D%B4%ED%8A%B8-%EC%83%89%EC%9D%B8%EA%B3%BC-%ED%81%AC%EB%A1%A4%EB%A7%81-%EC%A0%90%EA%B2%80%ED%95%98%EA%B8%B0.md) — 2026.07.10: 웹마스터 도구는 검색엔진이 사이트를 어떻게 크롤링하고 색인하는지 보여주는 무료 콘솔로, 소유권 확인과 사이트맵 제출, 색인 오류 점검, 검색 유입 분석에 쓴다. - [ROAS란? 계산 공식과 데이터를 어디서 가져오나](https://trendbrief.news/articles/roas-%EC%B8%A1%EC%A0%95-%EA%B0%9C%EB%B0%9C%EC%9E%90%EA%B0%80-%EC%A7%9A%EC%96%B4%EC%95%BC-%ED%95%A0-%EB%8D%B0%EC%9D%B4%ED%84%B0-%ED%9D%90%EB%A6%84.md) — 2026.07.10: ROAS는 광고비 대비 매출 비율이다. 개발자는 결제 시점에 정확한 매출 값을 전환 이벤트로 실어 보내 이 지표를 만든다. 이벤트 시점, 금액 기준, 중복 제거를 어떻게 다뤄야 하는지 실무 관점에서 정리했다. - [JSON-LD란? 구조화 데이터로 리치결과 얻기](https://trendbrief.news/articles/json-ld-%EA%B5%AC%EC%A1%B0%ED%99%94-%EB%8D%B0%EC%9D%B4%ED%84%B0-%EC%9B%B9%ED%8E%98%EC%9D%B4%EC%A7%80-%EC%A0%81%EC%9A%A9%EB%B2%95%EA%B3%BC-%EA%B2%80%EC%83%89-%ED%9A%A8%EA%B3%BC.md) — 2026.07.09: JSON-LD는 웹페이지 정보를 검색엔진이 읽도록 JSON으로 정리하는 구조화 데이터 방식이다. HTML에 별도 블록으로 넣고 Schema.org 타입을 따르며, 리치 결과 노출 가능성과 적용 시 주의점을 함께 정리했다. --- [홈](https://trendbrief.news/index.md) · [llms.txt](https://trendbrief.news/llms.txt)