로맨테크

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

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

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

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

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

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

CSS에서 애니메이션이나 전환 효과를 제어할 때 타이밍 함수(가속도 곡선)를 사용한다. 타이밍 함수는 애니메이션이 얼마나 빠르게 또는 느리게 시작하고 끝나는지를 결정하는 수학적인 함수다. 쉽게 말해 애니메이션의 속도 변화를 제어하는 역할을 한다. Tailwind CSS를 사용한다면 ease-in, ease-out, ease-in-out 등 미리 정의되어 있는 유틸리티 클래스를 사용해서 다양한 가속도 곡선을 적용할 수 있다.Button A 예를 들어 ease는 부드럽게 시작해서 부드럽게 끝나고(일반적인 가속도 곡선), ease-in은 느리게 시작해서 빠르게 끝나는 효과를 줄 때 사용한다. 사실 ease, ease-in, ease-out, ease-in-out 등은 CSS에서 기본적으로 제공하는 타이밍 함수..

TL;DRasync/await는 비동기 코드를 동기 코드처럼 작성할 수 있도록 해주는 문법적 설탕(Syntax Sugar)이다. 내부적으로는 async 함수 실행을 일시 중단했다가 프로미스가 처리되면 마이크로태스크 큐를 통해 다시 재개 하는 방식으로 논블로킹을 유지한다. async/await는 함수 실행을 중단/재개할 수 있는 제너레이터와 프로미스를 활용해서 구현되어 있으며, await 이후의 코드는 사실상 .then() 메서드의 콜백 함수라고 볼 수 있다.promise.then(() => { /* await 이후의 코드 */ }) async/await 내부 메커니즘async 함수를 호출하면 await 키워드를 만나기 전까지 일반 함수처럼 동기적으로 실행async 함수 실행 중 await 키워드를 만나..

grid-row-start, grid-row-end 속성은 그리드 아이템이 어느 행 라인부터 시작하여 어느 행 라인에서 끝날지 지정할 때 사용한다. 이 속성은 그리드 아이템(그리드 컨테이너의 직계 자식 요소) 자체에 적용한다. 참고로 그리드 라인은 컨테이너 시작 지점부터 1, 2, 3, … 양수 번호가 부여되고, 컨테이너 끝 지점부터는 -1, -2, -3, … 음수 번호가 부여된다./* 그리드 아이템이 1~2번 라인 차지(첫 번째 행 트랙) */grid-row-start: 1; grid-row-end: 2; span은 그리드 아이템이 차지할 트랙의 개수를 지정할 때 사용한다. 여기서 트랙(track)이란 두 그리드 라인 사이의 공간을 의미한다. 그리드 셀 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개 이상 데이터 센터로 구성된 글로벌 네트워크..