ux dev

블로그, 유튜브, 광고, 앱/웹 랜딩 페이지에 넣을 B-roll(보조 영상)이나 배경 영상이 필요할 때 가장 먼저 고민되는 게 “저작권”입니다. 아래 사이트들은 무료로 다운로드할 수 있는 영상이 많고, 비교적 라이선스가 명확해서 작업에 바로 쓰기 좋습니다.단, “완전 무료”처럼 보여도 사이트마다 금지 항목/예외(상표·초상권·재배포 금지 등)가 있으니, 아래에서 라이선스 체크 포인트까지 같이 정리해둘게요.1) Pexels Videos링크: https://www.pexels.com/videos/ oai_citation:0‡Pexels특징: 검색/다운로드 UX가 “Unsplash 느낌”에 가장 가깝고, 퀄리티도 안정적입니다.라이선스 포인트: 상업적 사용 가능하다고 안내하지만(무료), 영상에 등장하는 브랜드/로..

회의록 자동 정리나 자막 생성 도구는 많지만, “어디서든 말하면 곧바로 글이 입력되는” 시스템 전역 받아쓰기 앱은 일할 때 체감 효율이 큽니다. 이메일 초안, 메신저 답장, 문서 작성, 코드 주석 작성까지 손이 느리거나 피곤한 순간에 특히 강력합니다.이번 글에서는 최근 자주 언급되는 Superwhisper와 Aqua Voice를 중심으로, 시장에서 많이 쓰이는 받아쓰기 도구들을 함께 정리해 봅니다.1) Superwhisper: 워크플로우를 커스터마이징하는 “파워 유저형” 받아쓰기Superwhisper는 “받아쓰기”를 단순 음성→텍스트 변환으로 끝내지 않고, 모드(Mode)라는 개념으로 확장하는 쪽에 강점이 있습니다. 예를 들어 이메일 톤으로 정리, 짧게 요약, 특정 용어를 우선 반영 같은 규칙을 모드로 ..

Figma는 기본 기능만으로 JPG/PNG 같은 래스터 이미지를 “자동 벡터화(트레이싱)” 하는 기능이 강하지 않은 편이라, 이미지→벡터 변환이 필요할 때 플러그인을 많이 씁니다. 그중 Image Tracer는 이미지를 벡터 레이어로 변환해주고, 컬러 레이어 추출/마스크용 트레이싱 같은 작업을 빠르게 처리하는 용도로 자주 사용됩니다. oai_citation:0‡image-tracer.com1) 다운로드(설치) 방법방법 A: Figma Community에서 설치Figma Community에서 “Image Tracer”를 검색플러그인 페이지에서 Install을 눌러 설치(설치 후에는 내 플러그인 목록에서 바로 실행할 수 있습니다.) oai_citation:1‡Figma Help Center방법 B: 파일 안..

음악 서비스(검색, 아티스트/앨범/트랙 정보, 플레이리스트, 추천, 차트 등)를 만들 때 핵심은 “어떤 데이터 소스를 쓰느냐”입니다.특히 한국 음악(K-pop 포함)까지 폭넓게 가져오려면, 글로벌 카탈로그 + 오픈 메타데이터 + 영상(뮤비) 생태계를 적절히 조합하는 게 현실적입니다.아래는 무료로 시작할 수 있고 한국 음악도 잘 포함되는 API 옵션들을 목적별로 정리한 글입니다.1) Spotify Web API: 메타데이터 + 오디오 특성까지 한 번에Spotify Web API는 트랙/앨범/아티스트 메타데이터 검색부터 오디오 특성(예: audio features) 같은 정보까지 폭넓게 제공합니다. 무엇보다 앱에서 “음악 데이터”를 다루기 좋은 구조라 실무에서 많이 씁니다. oai_citation:0‡Spo..

영화/TV 정보(제목, 개봉일, 장르, 줄거리, 포스터, 출연/제작진, 시즌·에피소드 등)를 앱이나 웹서비스에 붙이고 싶을 때 가장 먼저 찾게 되는 게 “어떤 API를 쓰면 되지?”입니다.문제는 “무료”라고 해도 실제로는 제약이 많거나, 비공식/불안정한 소스인 경우가 꽤 있다는 점입니다.아래는 무료로 시작할 수 있고, 실무에서 비교적 많이 쓰는 영화/TV API들을 목적별로 정리한 리스트입니다.1) TMDB (The Movie Database) API — 영화/TV API의 사실상 표준추천 이유:영화 + TV + 인물(배우/감독) + 이미지(포스터/백드롭) + 트렌딩/디스커버리까지, 대부분의 기능을 한 번에 커버합니다. 커뮤니티 기반이지만 데이터 양이 많고, 개발 자료도 잘 정리되어 있어 “처음 붙이기”..

책 검색 기능, 독서 기록 앱, 서점/도서관 기반 서비스 등을 만들다 보면 가장 먼저 부딪히는 게 “도서 데이터(제목, 저자, ISBN, 표지, 출판사 등)를 어디서 가져오지?”입니다.게다가 한국 도서까지 폭넓게 포함하려면 해외 중심 API만으로는 한계가 있습니다.아래는 무료로 사용할 수 있으면서 한국 도서 커버리지가 좋은 API들을 목적별로 정리한 리스트입니다.1) 국립중앙도서관(NLK) Open API — “한국 도서 커버리지” 최우선추천 이유: “대부분의 한국 도서”를 최대한 폭넓게 다루려면, 국가 단위 서지 데이터가 가장 강력합니다. NLK는 서지(메타데이터) 기반이라 신뢰도가 높고, ISBN 중심으로 정리하기 좋습니다.주요 활용 예ISBN으로 도서 상세 정보 조회정식 서지 데이터 기반의 정확한 ..

Cloudflare를 네임서버로 쓰고 있다면, 별도의 서버 없이도 특정 서브도메인을 다른 주소로 301 리다이렉트(영구 이동) 시킬 수 있습니다.그런데 대시보드에서 “Redirect Rules” 메뉴가 보이지 않는 경우가 있습니다. 이럴 땐 대부분 Page Rules로 동일하게 처리할 수 있어요.이 글에서는 예시 도메인을 사용해서, 아래 같은 리다이렉트를 만드는 방법을 설명합니다.promo.example-site.com → promo-2026.example-site.com그리고 /path 같은 경로도 그대로 유지1) 먼저 확인: 리다이렉트는 “프록시(오렌지 구름)”가 필수Cloudflare에서 Page Rules 리다이렉트는 “Cloudflare를 실제로 통과하는 요청”에만 적용됩니다.즉, DNS에서 해..

HandBrake로 MOV 파일을 MP4로 간단하게 변환하는 방법동영상 포맷을 변환해야 할 때 가장 많이 사용되는 무료 프로그램 중 하나가 HandBrake입니다. 이 글에서는 HandBrake 설치부터 MOV 파일을 MP4로 변환하는 방법까지 핵심만 간단하게 정리합니다.HandBrake 설치하기HandBrake 공식 사이트로 이동한다.https://handbrake.fr운영체제에 맞는 설치 파일을 다운로드한다.(Windows, macOS, Linux 지원)설치 프로그램을 실행하고 기본 설정대로 설치를 완료한다.프로그램 실행 및 파일 불러오기HandBrake를 실행한다.첫 화면에서 Open Source 버튼을 클릭한다.변환할 MOV 파일을 선택한다.선택하면 자동으로 기본 프리셋이 적용된다.출력 포맷을 M..

웹 개발을 하다 보면 그림자를 넣을 때 box-shadow 와 filter: drop-shadow 두 가지 방법을 자주 접하게 됩니다. 하지만 이 둘은 비슷해 보이면서도 실제로는 다른 방식으로 동작합니다. 이번 글에서는 두 속성의 차이와 활용 방법을 정리해 보겠습니다.1. 렌더링 방식의 차이box-shadow요소의 박스(box) 영역에 그림자가 적용됩니다. 즉, width, height, border, border-radius로 정의되는 직사각형 영역을 기준으로 그림자가 생깁니다. 요소 내부의 투명 픽셀은 무시됩니다.filter: drop-shadow요소가 렌더링된 실제 픽셀 단위를 기준으로 그림자가 적용됩니다. 즉, 투명 영역을 제외하고 눈에 보이는 부분에만 그림자가 따라붙습니다. PNG, SVG, 텍..

해외 쇼핑몰에서 주문할 때, 국제 배송을 위해 영문 주소가 필요하거나, 반대로 영문으로 된 한국 주소를 읽어야 할 때 어려움을 겪어본 적이 있으신가요? Simple Address Converter는 바로 이런 문제를 해결하기 위해 만들어진 웹 애플리케이션입니다.🔗 *Simple Address Converter 실행하기🚀 주요 기능✅ 양방향 주소 변환한국어 → 영문: 서울특별시 강남구 역삼동 123-45 → 123-45 Yeoksam-dong, Gangnam-gu, Seoul, South Korea영문 → 한국어: 123-45 Yeoksam-dong, Gangnam-gu, Seoul, South Korea → 서울특별시 강남구 역삼동 123-45🎯 스마트한 변환 로직서울 주요 25개 구 및 인기 동 ..