로맨테크

노션에선 @(골뱅이)이나 /Link 단축키를 입력하여 기존에 작성했던 노션 페이지를 바로 링크할 수 있다. 예전에 작성해둔 노션 페이지의 제목이 정확히 기억나지 않아도 키워드만 입력하면 연관 페이지들이 뜨기 때문에 편리하다. 노션을 사용하면서 가장 마음에 드는 기능 중 하나다. 오늘은 노션의 링크 삽입과 관련한 소소한 팁 3가지를 소개하고자 한다. 💡 팁 1. @ 단축키로 노션 페이지 링크 걸기 일반적인 서비스에서 @(골뱅이, at)는 보통 특정 사람을 호출할 때 사용한다. 하지만 노션에선 사람은 물론 날짜(Date), 노션 페이지(Page)까지 링크할 수 있다. ❶@ 입력 후 ❷링크하고 싶은 페이지 제목/키워드를 입력하면 연관 페이지들이 나타난다. ❸위/아래 방향키로 원하는 페이지를 선택한 뒤 ❹엔터(..

얼마 전 Windows 11 부팅 USB를 사용할 일이 생겼다. 윈도우를 사용한다면 공식적으로 제공되는 설치 미디어 만들기(Windows Media Creation Tool) 도구를 사용하면 쉽게 만들 수 있지만, 아쉽게도 맥(macOS) 사용자를 위한 도구는 따로 제공하지 않는다. 패러렐즈(Parallels)로 윈도우 설치 미디어 만들기 도구를 실행해 봤지만 USB를 인식하지 못하는 문제가 있었다. 그러던 중 WinDiskWriter라는 유용한 도구를 발견해서 소개해볼까 한다.  가장 눈에 띄는 기능은 TPM 우회와 설치 이미지 자동 분할이다. 맥에 내장된 디스크 유틸리티는 기본적으로 HFS+, FAT32, ExFAT만 지원하며, 윈도우에서 사용하는 NTFS 형식의 포맷은 읽을 수는 있지만 쓰기를 지원..

원격(외부) 네트워크에서 SMB에 접속하려면 139, 445(맥북 연결 시) 등의 포트를 개방해야 된다. 하지만 이러한 포트들은 보안에 취약하기 때문에 기본적으로 SMB 프로토콜은 로컬 네트워크에서만 사용하는 것을 권장한다. 보안 취약성을 최소화하면서 원격에서 접근하려면 로컬 네트워크에 VPN을 구축하는 것이 좋다. OpenVPN, WireGuard 등 사설 VPN을 구축하는 여러 가지 방법이 있는데 Tailscale을 사용하는 게 가장 편리하다. Tailscale은 WireGuard를 이용한 사설 Mesh Network 서비스다. Tailscale에 연결된 장치는 같은 네트워크에 있는 것처럼 작동한다. Tailscale은 설정이 거의 필요 없고 SSO 로그인을 사용하므로 보안 문제가 발생할 일도 적다...

레딧의 노션 커뮤니티를 둘러보면 노션 홈에 위젯을 설치해둔 해외 유저들이 꽤 많이 보인다. HTML 임베드를 지원하는 노션의 장점을 활용해 페이지 성격에 맞는 위젯을 삽입한 것이다. 위젯을 제공하는 대부분의 서비스는 배경/폰트 색상 등을 커스터마이징 할 수 있기 때문에 노션 페이지 스타일에 잘 어울리도록 구성한다면 그럴싸한 홈페이지처럼 꾸밀 수 있다. 그래서 필자도 외부에 공개한 노션 페이지(위 이미지)에 날씨 위젯을 설치해봤다. 위젯을 투명 배경으로 설정했지만 노션에서 임베드하면 회색 배경으로 자동 변경되는 것 빼곤 큰 이질감 없이 깔끔하게 표시된다. 날씨 외에도 TradingView의 주식, 환율이나 오늘의 명언 같은 위젯도 설치할 수 있다. 설치 방법 역시 간단하니 아래 가이드에 따라 차근차근 따라..

노션의 replaceAll, length 함수를 응용해 Person 속성(Property)에 추가한 Member(사람) 숫자만큼 통계를 내어 간단한 투표 시스템을 만들 수 있다. 이를 이용해 아이디어, 장소 투표 등 다양한 상황에서 활용할 수 있다. 🔎 투표 시스템 완성본 예시 🔎 설정 방법 Table 포맷의 Database 생성 (/table 입력) 투표 항목(Name), 예산(Number), 투표자(People), 득표수(Formula) 속성 추가 득표수(Formula)에 아래 수식 복사 → 붙여 넣기 if(empty(prop("투표자")), "❗️투표해주세요!", format(length(replaceAll(prop("투표자"), "[^,]", "")) + 1)) 📌 투표 템플릿 퍼가기 ✏️ For..

노션을 사용하다 보면 2개 이상의 페이지를 한 개 페이지에 병합해야 될 경우가 생긴다. A 페이지 내용을 복사해 B 페이지에 붙여 넣기 할 수도 있지만 페이지가 2개 이상이라면 이런 단순 복사→붙여 넣기 작업은 매우 번거롭다. 사실 아주 간단한 방법으로 여러 개의 페이지를 1개 페이지에 합칠 수 있다. 🔎 방법 새로운 빈 Page 생성 (/Page) 병합하고 싶은 Page들을 방금 생성한 Page로 옮기기 (마우스 드래그 or 마우스 우클릭 Move to) 병합할 Page를 모두 선택 후 마우스 우클릭 → Turn Into → Heading 1 선택 완료 Heading 1~3 중 아무거나 선택해도 되지만 페이지 구분을 쉽게 하기 위해 Heading 1 변환을 추천한다. 병합할 페이지 선택 후 마우스로 일..

TL;DRETag(엔티티 태그; Entity Tag)는 HTTP 응답 헤더 중 하나로, 웹 리소스의 특정 버전을 식별하기 위한 고유한 식별자다. 클라이언트는 ETag를 이용해 리소스 변경 여부를 서버에 검증하고, 변경되지 않았으면 캐시 된 콘텐츠를 재사용함으로써 대역폭을 절약하고 성능을 개선할 수 있다. 작동 방식클라이언트가 특정 리소스를 처음 요청하면, 서버는 응답 헤더에 ETag 값을 포함하여 리소스와 함께 전달클라이언트는 응답으로 받은 ETag 값 저장이후 동일한 리소스 재요청 시 If-None-Match 요청 헤더에 ETag 값을 담아서 서버로 전송서버는 전달받은 ETag 값과 현재 리소스의 ETag 값 비교값이 일치하면 본문(body)은 생략하고 304 Not Modified 반환값이 일치하지..

이미지 비교 슬라이더는 핸들을 좌우로 움직여서 두 이미지를 비교할 수 있는 UI 패턴으로 쇼핑몰이나 제품 소개 페이지 등에서 자주 볼 수 있다. 이러한 이미지 비교 슬라이더는 range 타입의 input 태그와 6줄 정도의 자바스크립트 코드만으로 구현할 수 있다. range 타입의 input은 슬라이드바를 조정하여 범위 내 숫자 값을 선택할 수 있는 입력 필드다. 기본적으로 브라우저에서 제공하는 스타일이 적용되어 있다. 이 기본 스타일을 모두 제거하고 이미지의 너비/높이만큼 크기를 확장하면, 슬라이더 영역을 클릭 혹은 드래그할 때마다 (스타일을 제거해서 화면에 보이지 않는) 핸들이 해당 위치로 이동해서 값이 변경된다. 기본적인 구현 방법은 다음과 같다.이미지 1, 이미지 2를 감싸는 마스크 요소, ran..

이미지 호스팅은 이미지 파일을 웹 서버에 저장하고 인터넷을 통해 접근할 수 있도록 해주는 서비스다. 이미지를 저장/관리/공유하거나 블로그/웹사이트를 운영한다면 이미지 호스팅이 필요할 수 있다. 기존 클라우드 서비스나 전문 이미지 호스팅 서비스는 용량이 늘어날수록 비용 부담이 증가하고 이미지 최적화를 위한 별도의 관리가 필요하다. 서비스 제공업체의 정책 변경이나 서비스 종료 같은 위험성도 존재한다. 오늘은 Cloudflare R2, PicGo, WebP Cloud를 이용해 이미지 호스팅을 직접 구축하는 방법을 소개할까 한다. 개인적인 용도로 사용한다면 각 서비스의 무료 요금제(Free tier)로도 충분히 사용할 수 있다. 특히 Cloudflare R2는 330개 이상 데이터 센터로 구성된 글로벌 네트워크..

TL;DRCache-Control은 브라우저와 중간 서버(Proxy, CDN 등)가 어떤 방식으로 응답을 캐싱할지 지정하는 헤더로, 캐싱 가능 여부(public, private, no-store), 캐시 유효 기간(max-age), 재검증 방식(no-cache, must-revalidate) 등을 설정할 수 있다. 정적인 리소스잘 변하지 않는 정적인 리소스는 장기간 캐시Cache-Control: public, max-age=31536000, immutable public: 브라우저와 중간 서버(프록시, CDN 등) 모두 응답을 캐싱하고 재사용할 수 있도록 허용max-age=31536000: 캐시 생성 후 1년(31,536,000초) 동안 fresh 상태 유지immutable: 유효 기간 내 리소스가 변..

Perplexity는 AI 기반 검색엔진으로 입력한 질문과 연관된 자료를 실시간으로 검색한 뒤 이를 바탕으로 답변을 생성한다. 모든 답변은 출처와 함께 제공되므로 올바른 정보인지 여부를 쉽게 검증할 수 있다. 요즘엔 구글 검색보다 Perplexity를 먼저 찾을 정도로 편리하다. Perplexity 요금제는 크게 Free/Pro로 나뉜다. Pro 회원은 하루 300회 이상 프로 검색(복잡한 쿼리 처리)을 이용할 수 있고, Claude 3.7 Sonnet, o3-mini 같은 고급 모델을 선택할 수 있다. 덤으로 월 $5 API 크레딧도 제공한다. 실시간 검색 결과는 선택한 AI 모델을 통해 처리되기 때문에 어떤 모델을 선택했느냐에 따라 답변 퀄리티가 달라진다.  Perplexity Pro 가격은 한 달 ..

OpenAI 같은 LLM(대형 언어 모델) 기반 API로 기능을 개발하다 보면, 자연스럽게 사용량 제한이 필요해진다. Unkey라는 API 관리 플랫폼을 이용하면 API 키 관리, 요청 빈도 제한, 사용량 분석 같은 기능을 손쉽게 구현할 수 있다. API 엔드포인트별로 요청량을 제한하거나 사용자마다 다른 제한 정책을 설정할 수도 있다. Unkey 무료 요금제(Free Tier)는 API 키 1000개, 월 15만 건의 요청까지 사용할 수 있기 때문에 개인 프로젝트에 사용하기 딱 좋다. Next.js를 사용한다면 Unkey에서 제공하는 SDK를 이용해서 더 편하게 통합할 수 있다. 예를 들어 서버 액션이나 API 라우트에 미들웨어처럼 적용하여 인증된 요청만 처리하거나 사용량 제한을 적용할 수 있다. Unk..