로맨테크

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

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

요소는 과 함께 사용하여 옵션을 선택할 수 있는 드롭다운을 표시한다. 우측에 있는 드롭다운 화살표 아이콘은 브라우저마다 스타일이 조금씩 다르다. 어떤 브라우저에서든 똑같은 아이콘으로 표시하고 싶다면 background 스타일 속성을 이용해서 변경할 수 있다.Select your device Apple Oppo Xiaomi appearance 속성 수정appearance CSS 속성은 운영체제의 테마를 기반으로 하는 UI 컨트롤의 기본 외형(appearance)을 제어할 때 사용한다. appearance: none 속성을 적용하면 input progress 등의 요소가 기본적으로 가지는 스타일을 해제할 수 있다. select 요소에 사용하면 우측 화살표 아이콘이 사라진다.select[id="sele..

홍보 포스터, SNS 이미지 등을 제작할 때 어떤 폰트를 사용하냐에 따라 분위기가 확 달라진다. 전달하려는 메시지와 톤앤매너에 잘 맞는 폰트를 선정하는 건 그만큼 중요하다. 한글 폰트는 조금만 검색해보면 다양한 정보를 얻을 수 있지만 의외로 중국어 폰트 관련 정보는 별로 없다. 오늘은 중국 마케팅 등에 유용하게 쓸 수 있는 유료/무료 중국어 폰트를 소개하고자 한다. 1. 무게감 있는 중국어 폰트 📺 优设标题黑 (UISDC - 표제흑체) 폰트 이름: 优设标题黑 폰트 제작사: UISDC 폰트 키워드: 속도감, 무게감 라이선스: 무료, 상업적으로 사용 가능 글리프 개수: 7194 다운로드 : 링크 优设标题黑는 에너지를 발산하는 듯한 스타일의 폰트다. 중문 Simhei(黑体) 서체를 바탕으로 획에 굵기를 주고 ..

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

얼마 전 6년간 사용했던 Western Digital 하드디스크가 사망했다. 처음엔 볼륨 충돌 관련 메시지가 뜨더니, 결국 인식조차 안 되는 상태에 이르렀다. 다행히 메인 하드디스크(1번 드라이브 베이)가 아니라서 DSM은 문제없이 사용할 수 있었다. 메인 하드디스크 용량은 4TB 밖에 안 돼서 항상 부족하다고 느꼈었는데, 이 참에 훨씬 큰 용량의 하드디스크로 바꿔줬다.  DSM 설정, 파일 등 기존 데이터는 그대로 유지하면서 하드디스크를 교체하려면 하드디스크 복사기(HDD 도킹스테이션)를 이용한 방법이 가장 깔끔하다. 하드디스크 복사기는 2~3만원이면 구매할 수 있고 복사 과정도 버튼 한 번만 누르면 되는 정도로 쉽다. 오늘은 DSM 메인 하드디스크 교체 과정을 소개해보려고 한다.   하드디스크 복사?..

Cache-Control 헤더: 클라이언트와 중간 서버(Proxy, CDN 등)가 어떤 방식으로 응답을 캐싱할지 지정하는 헤더(특정 응답을 얼마동안, 어떻게 캐싱할지 지정). 정적인 리소스잘 변하지 않는 정적인 리소스는 장기간 캐시Cache-Control: public, max-age=31536000, immutablepublic: 브라우저와 중간 서버(프록시, CDN 등) 모두 응답을 캐싱할 수 있도록 허용.max-age=31536000: 캐시 생성 후 1년(31, 536,000초) 동안 fresh 상태 유지.immutable: 한 번 캐시 된 후 변경되지 않음(불필요한 재검증 요청 방지).  동적인 리소스동적인 리소스는 항상 최신 상태를 유지할 수 있도록 매번 서버에 재검증Cache-Control: ..

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..

일반적으로 칸반 보드는 드래그 앤 드롭을 통해 컬럼이나 태스크 카드의 순서를 자유롭게 변경할 수 있다. 이러한 드래그 앤 드롭 상호작용은 dnd-kit 이라는 라이브러리에서 제공하는 Sortable 프리셋을 이용하면 더 쉽게 구현할 수 있다. dnd-kit은 코어 크기가 10kb 정도로 가볍고 외부 의존성이 없는 장점이 있다. 드래그 제한, 애니메이션, 충돌 감지 등을 커스터마이징 할 수도 있다. dnd-kit을 이용해 칸반 보드를 구현하면서 비교적 까다롭다고 느꼈던 부분들을 정리해 봤다. 코드는 아래 레포지토리에서 확인할 수 있다.레포지토리: https://github.com/romantech/simple-kanban데모 페이지: https://kanban.romantech.net    칸반 데이터 모..

브랜디드 링크는 도메인을 활용한 맞춤형 단축 URL이다. 예를 들어 abc.com/123... 같은 긴 주소를 자신의 도메인을 이용해 짧고 직관적인 링크로 변환할 수 있다. bit.ly 같은 주소 단축 서비스에서도 브랜디드 링크 기능을 제공하지만, Growth 유료 플랜(월 $29) 이상에서만 사용할 수 있다. Cloudflare에 도메인을 등록했다면 Sink 라는 무료 오픈소스를 통해 자신만의 짧은 주소 서비스를 구축할 수 있다. 브랜디드 링크뿐만 아니라 애널리틱스, 링크 유효기간 설정 등 다양한 기능을 제공하며, 현재도 활발하게 개발이 진행 중인 프로젝트다.  브랜디드 링크 - 도메인 연동 및 맞춤형 단축 URL 생성애널리틱스 - 방문수, 리퍼러, 지역, 디바이스, 언어, OS 등 통계 제공링크 유효..

와일드카드 인증서는 단일 도메인과 모든 하위 도메인을 보호할 수 있는 SSL/TLS 인증서로(*.domain.com), 여러 서브도메인을 한 번에 관리할 수 있다. 와일드카드 인증서를 발급하려면 DNS-01 챌린지를 통해 도메인 소유권을 인증해야 한다. 아쉽게도 시놀로지 나스의 기본 기능만으로는 DNS 레코드를 직접 조작할 수 없기 때문에 와일드카드 인증서를 발급할 수 없다. 이 문제는 acme.sh를 사용하면 해결할 수 있다. acme.sh는 DNS 인증 과정을 자동화하여 와일드카드 인증서를 손쉽게 발급하고 갱신할 수 있도록 지원한다. 특히, 시놀로지 나스에서 인증서를 갱신하려면 80/443 포트를 개방해야 하지만, acme.sh는 이러한 포트 개방이 필요 없어서 보안상 훨씬 유리하다. acme.sh의..