들어가며Next.js 환경의 프론트엔드 프로젝트 경험을 되돌아보며, 사전에 좀 더 깊게 고려했으면 좋았을 보안 관련 내용들을 알아보고 정리해 보려 합니다. XSS 공격⬇️ 설명XSS 공격은 가장 흔한 공격 중 하나로 입력 필드나 URL 파라미터 등을 통해 스크립트를 코드에 삽입하고 다른 사용자의 브라우저에서 해당 스크립트가 실행되도록 만드는 공격입니다. 쿠키 탈취, 하이재킹 등 심각한 문제로 이루어질 수 있습니다.XSS 유형을 아래처럼 3가지로 나눌 수 있습니다.Reflected XSS악성 스크립트를 URL 파라미터나 다른 입력값에 포함해 사용자에게 전달하고, 사용자가 이 악성 스크립트가 포함된 URL을 클릭하거나 폼을 제출하면 서버가 해당 스크립트를 응답 페이지에 그대로 포함해 사용자의 브라우저에서 실..

들어가며요즘 유행인 MCP에 대해 소개합니다. MCP (모델 컨텍스트 프로토콜) 이란?MCP(Model Context Protocol)는 AI 모델이 외부 데이터 소스 및 도구와 안전하게 통합될 수 있도록 하는 개방형 프로토콜입니다.AI 시스템이 단순히 텍스트를 생성하는 것을 넘어 필요한 정보를 실시간으로 가져오고 다른 소프트웨어나 데이터 시스템과 협업할 수 있도록 지원하여 AI 모델의 성능과 실제 활용도를 높이는 데 기여합니다.Anthropic에서 오픈 소스로 공개한 이 기술은 AI 모델이 다양한 데이터 소스 및 도구에 표준화된 방식으로 연결될 수 있도록 지원하며, AI 생태계에서 'USB-C 포트'와 같은 역할을 수행합니다.https://www.anthropic.com/news/model-contex..

안녕하세요! pxd & UXR 밋업 블로깅을 맡게 된 인턴 장예원입니다. 저는 최지호 인턴님과 함께 이번 행사를 도왔는데요. 지난 5월 28일, pxd에서는 사용자 리서치에 관심 있는 분들이 모여 경험을 나누고, 인사이트를 교류하는 pxd & UXR 밋업 행사를 열었습니다."이렇게 리서처들이 많이 모여 있는 걸 처음 보네요."밋업은 자기소개와 함께 각자의 새로운 발견을 한 가지씩 공유하면서 시작됐습니다. 그중 참석자 한 분이 공유해 주신 유쾌한 발견이 특히 인상 깊었습니다! 이처럼 다양한 분야의 UX 리서처, 마케터들이 모인 새롭고 재미있는 자리였습니다. 프로그램은 크게 3개의 섹션으로 진행됐습니다.pxd 전성진 대표팀의 "pxd UXR" 소개pxd 한상택 소장님의 "정성조사의 새로운 패러다임" 발표무신..

유튜브 댓글을 통해 알아보는 OTT 사용자의 니즈와 경험OTT 비교 추천 유튜브 영상에는 많은 댓글이 달려 있었는데요. 저희는 이 날것의 데이터를 통해 사용자들이 어떤 OTT 플랫폼을 선호하고, 왜 그렇게 선택했는지를 분석해 보고자 했습니다.1편에서는 어떻게 주제에 맞는 댓글만 골라낼 수 있는지, 전처리 과정을 중심으로 다뤘습니다. 그리고 이번 글에서는, 정제된 데이터를 바탕으로 어떤 분석을 시작할 수 있을지, 즉 리서처가 '질문'을 어떻게 만들어 나갈 수 있는지를 살펴보려고 합니다.프롬프트에 어떤 질문을 담느냐가 분석 결과에 어떤 영향을 줄까요? 하나의 데이터에 대해 다양한 관점으로 인사이트를 도출하는 방법을 소개합니다. 어피니티 버블 만들기어피니티 버블에서는 분석하고자 하는 데이터의 유형을 선택한 뒤..

유튜브 댓글에서 OTT 사용자 목소리 분석하기우리나라에서 10명 중 9명이 OTT를 본다는 사실, 알고 계셨나요? 2024년 한국콘텐츠진흥원 조사 결과에 따르면 10대에서 70대 이상까지의 OTT 이용률은 89.3%에 달합니다.일상 깊숙이 들어온 OTT 플랫폼 시장은 최근 쿠팡플레이 무료화, 배달의민족과 티빙의 제휴, 네이버페이와 넷플릭스의 제휴 등 변화가 끊이지 않고 있습니다. 이렇게 이슈가 될 때마다 SNS, 유튜브 등에서는 사용자 의견이 쏟아져 나옵니다. 이런 자발적인 의견들은 서비스에서 직접 시행하는 조사보다 더 솔직하고 생생할 수 있죠.하지만 그만큼 방대하고, 중요도를 판단하기도 어려운데요. 어떻게 하면 이런 의견들을 쉽고 빠르게 훑어볼 수 있을까요?이번 포스트에서는 "OTT 플랫폼에 대한 사용..

들어가며'KWCAG 2.2 개정'에 새로 추가된 9개 중 지난 2월에 게재한 6개의 항목(https://tech.pxd.co.kr/post/KWCAG-2-2-업데이트-항목의-구체적인-사례-271) 외에 나머지 3개 항목에 대해 추가 게재합니다. 업데이트 항목 중 9개 중 3개의 구체적인 사례 7.2.2. 찾기 쉬운 도움 정보 준수 사례 1 : 최소한 하나의 도움 정보는 해당 페이지에서 동일한 상대적인 순서대로 제공 7.3.3. 접근 가능한 인증 오류 사례 1 : 인증 과정을 인지 기능 테스트에만 의존한 경우 오류버스를 알아야 인증 가능기억해야 인증 가능 준수 사례 1 : 인증 과정은 인지 기능 테스트에만 의존하지 않은 경우 준수 준수 사례 2 : 인증 과정은 인지 기능 테스트에만 의존하지 않은..

들어가며요즘 가장 핫한 키워드 중 하나인 바이브 코딩(Vibe Coding). 디자인 파일만 주면 코딩이 뚝딱 완성된다는 이야기가 들려오면서 프론트엔드 개발자들의 관심을 끌고 있습니다. 하지만 실제로 업무에 적용하려고 하면 과연 어느 정도까지 신뢰할 수 있을까요? 이번 글에서는 저희 내부 프로젝트에서 Next.js + TypeScript + Cursor + Figma MCP 환경으로 바이브 코딩을 실전 적용해 본 경험을 공유하고자 합니다.바이브 코딩이 무엇인지에 대한 개념이 궁금하신 분은 이전 포스팅을 먼저 참고해주세요. 바이브 코딩을 해보게 된 배경바이브 코딩을 제대로 해보고 싶다는 생각은 있었지만 규모가 큰 프로젝트에서 감히 엄두가 나지 않았는데, 내부 프로젝트로 간단하게 마이크로 인터렉션 정도가 있..

들어가며이전 포스트에서 PWA를 활용해 네이티브 앱 못지않은 사용자 경험을 웹에서 구현할 수 있다는 이야기를 했었습니다. 특히 그 중심에 있는 기능 중 하나가 바로 웹 푸시 알림인데요. 이번 포스트에서는 실제 프로젝트에서 직접 구현해 본 웹 푸시 기능을 Next.js 14 App Router 환경 + FCM(Firebase Cloud Messaging)을 중심으로 풀어보려고 합니다.저는 처음엔 단순히 공부 차원에서 시작했는데, 운 좋게도 이어진 프로젝트에서 웹 푸시 기능이 요구되면서 실무에 적용할 기회까지 생겼습니다. 이론만 알았다면 그냥 흘려보냈을 내용들을 실제 API 통신과 서비스워커 등록 등 다양한 과정 속에서 직접 다뤄보면서 제대로 체득할 수 있었고, 웹이 정말 많은 영역에서 네이티브 앱을 대체할..

지난 4월 어도비 Make it. Seoul 2025에 다녀왔습니다. 다양한 세션을 통해 오늘날 콘텐츠의 폭발적인 수요와 그에 맞게 빠르게 생산해야 하는 창작자, 디자이너와 마케터의 어도비 제품군 실무 활용 사례를 총망라하는 시간이었습니다.어도비의 생성형 AI 이미지 툴인 Firefly와 클라우드 기반 협업 플랫폼 Frame.io, 간편한 콘텐츠 제작 편집이 가능한 Adobe Express, 3D를 제작할 수 있는 Project NEO 등 어도비가 지속적으로 업데이트하고 있는 크리에이티브 서비스를 직간접적으로 접했고, 브랜드 디자인과 마케팅 콘텐츠 업무 전반의 워크플로우를 들을 수 있었습니다.그중 인상깊은 세션인 스튜디오 드래곤 서현석 팀장님의 Frame.io 도입기, 이노션의 자체 제작 AI 기반 마케..

들어가며최근 SKT의 해킹 사건으로 유심에 대해 관심이 생겨서 찾아보았습니다. 유심(USIM)은 단순한 칩이 아니다대부분의 사람들은 유심을 단순히 전화번호 저장용 칩 정도로 생각하지만, 실제로는 통신망 인증, 암호화, 위치 정보, 인증 수단 등 다방면에 관여하는 보안 디바이스입니다. 유심에는 뭐가 들어있지?유심 내부에는 가입자 정보를 인증하고 통신을 가능하게 하는 핵심 데이터가 저장돼 있습니다.IMSI (국제 이동 가입자 식별번호): 가입자를 식별하는 고유 번호. (유저 ID 역할)Ki (개인 인증키): 이동통신사만 알고 있는 비밀 키로, IMSI와 함께 기지국에서 인증에 사용됨.전화번호, 통신사 정보SMS/MMS 설정 정보, 일부 주소록eSIM은 동일한 개념을 칩 내장형 소프트웨어 형태로 구현한 것...

얼마 전 고등학생 딸과 함께 LA를 짧게 방문했습니다. 체류하는 동안 함께 웨이모(Waymo)를 2번 타봤는데 그 경험을 공유합니다. Waymo란? 먼저 웨이모는 자율주행 차량 호출 서비스(autonomous ride-hailing service)로 현재 미국 샌프란시스코, LA, 피닉스, 오스틴, 애틀랜타(곧 운행 예정) 지역에서 운행되고 있습니다. 자세한 내용은 웨이모 홈페이지(https://waymo.com)를 참고해 보세요. 지난 글에서 웨이모 탑승 경험에 대해 소개를 했는데요, 이번 글에서는 이 과정에서 자율주행 차량 호출 서비스에서 몇 가지 생각해 볼만한 UX 포인트를 이야기해보려고 합니다. 자율주행 차량 호출 서비스 UX운전자가 없는 차량을 사용자가 타는 경우에 UX 관점에서 생각해 ..

얼마 전 고등학생 딸과 함께 LA를 짧게 방문했습니다. 체류하는 동안 함께 웨이모(Waymo)를 2번 타봤는데 그 경험을 공유합니다. Waymo란? 먼저 웨이모는 자율주행 차량 호출 서비스(autonomous ride-hailing service)로 현재 미국 샌프란시스코, LA, 피닉스, 오스틴, 애틀랜타(곧 운행 예정) 지역에서 운행되고 있습니다. 자세한 내용은 웨이모 홈페이지(https://waymo.com)를 참고해 보세요. Waymo Journey웨이모를 호출해서 탑승을 종료하기까지 다음과 같은 여정이 있었습니다. 이 저니를 바탕으로 느꼈던 경험을 하나씩 나눠 보겠습니다. ‘웨이모를 타도 될까?’ 확신 갖기 LA에 가면 ‘웨이모를 꼭 타봐야겠다’라는 생각을 했지만 불안한 마음은 있..