리저브콜드브루의 IT공간

브랜드 색 조합 3가지와 HEX 코드

시작홈페이지나 로고를 만들 때 색 조합을 고르는 단계에서 생각보다 오래 멈추게 된다. 마음에 드는 색을 찾아도, 배경과 버튼에 어떻게 나눠 써야 할지는 또 다른 문제다.현재 직접 운영 중인 색 조합 도구 Palette Compass에서 분위기가 다른 팔레트 세 가지를 골라봤다. 이번 글에서는 각 조합의 HEX 코드와 화면에 적용하는 방법을 함께 정리한다.카페 메뉴판, 회사 소개 페이지, 제품 상세 페이지를 만든다고 가정한 예시다. 실제 브랜드에 적용한 사례는 아니다.이번 글에서 살펴볼 조합카페·베이커리 → 테라코타 크림회사 소개·제안서 → 고요한 신뢰프리미엄 제품 → 미드나이트 골드HEX 코드는 #FFF7ED처럼 색을 지정하는 값이다. 디자인 도구나 CSS의 색상 입력란에 복사해서 사용할 수 있다.1. ..

개미타입투자 습관과 판단 성향을 16타입으로 가볍게 읽어보는 테스트gaemitype.vercel.app 시작전적으로 AI의 도움을 받아 서비스를 만들고, 실제로 배포까지 해보는 경험을 해보고 싶었다.수익까지 연결되면 좋겠지만, 그보다는 기획부터 개발, 그리고 서비스까지 직접 완성해보는 것을 먼저 목표로 잡았다.개발자로 실무 경험은 쌓아왔지만, 하나의 서비스를 처음부터 끝까지 내 손으로 만들어본 경험은 없었기 때문에 더 해보고 싶었다.마침 GPT 유료 버전을 사용 중이었고, Codex가 프롬프트 기반으로 더 편하게 사용할 수 있도록 업데이트되었다는 점도 시작하기에 충분한 동기가 되었다.GPT와 함께 기획 구체화내가 구상한 초기 기획 조건은 단순했다.기간: 일주일 이내아이디어: MBTI처럼 가볍게 즐길 수 ..

5편에서는 팝업에 렌더링된 이미지 카드마다 삭제 버튼을 붙여서,저장된 항목을 하나씩 제거할 수 있도록 만들었다. 크롬 확장 프로그램 Image Cliptray 만들기 5편: popup.js로 개별 삭제 기능 붙이기4편에서는 chrome.storage.local에 저장된 savedImages를팝업에서 카드 형태로 렌더링했다. 크롬 확장 프로그램 Image Cliptray 만들기 4편: popup.js로 저장한 이미지 목록 렌더링하기3편에서는 이미지 우클릭joyshu93.tistory.com 이번 편에서는 그다음 단계로 넘어간다.목표팝업 상단에 전체 삭제 버튼을 추가한다버튼을 클릭하면 확인창을 띄운다확인을 누르면 savedImages를 비운다팝업 목록을 다시 렌더링한다저장된 항목이 없으면 빈 상태 메시지를 ..

4편에서는 chrome.storage.local에 저장된 savedImages를팝업에서 카드 형태로 렌더링했다. 크롬 확장 프로그램 Image Cliptray 만들기 4편: popup.js로 저장한 이미지 목록 렌더링하기3편에서는 이미지 우클릭 메뉴를 통해이미지 URL, 페이지 URL, 페이지 제목, 저장 시간을 chrome.storage.local에 저장했다. 크롬 확장 프로그램 Image Cliptray 만들기 3편: chrome.storage.local로 이미지 정보 저joyshu93.tistory.com 이번 편에서는 그다음 단계로 넘어간다.목표.각 카드에 삭제 버튼을 추가한다삭제 버튼을 누르면 해당 항목만 제거한다chrome.storage.local을 다시 저장한다삭제 후 팝업 목록을 다시 렌더..

3편에서는 이미지 우클릭 메뉴를 통해이미지 URL, 페이지 URL, 페이지 제목, 저장 시간을 chrome.storage.local에 저장했다. 크롬 확장 프로그램 Image Cliptray 만들기 3편: chrome.storage.local로 이미지 정보 저장하기2편에서는 background.js를 이용해이미지 위에서 우클릭했을 때 Image Cliptray에 추가 메뉴가 뜨도록 만들었다. 크롬 확장 프로그램 Image Cliptray 만들기 2편: background.js로 이미지 우클릭 메뉴 만들기크롬joyshu93.tistory.com 이번 편에서는 그다음 단계로 넘어간다.목표팝업이 열릴 때 저장된 이미지 목록을 읽는다저장된 항목을 카드 형태로 렌더링한다썸네일, 제목, 날짜, 링크를 보여준다저장된..

2편에서는 background.js를 이용해이미지 위에서 우클릭했을 때 Image Cliptray에 추가 메뉴가 뜨도록 만들었다. 크롬 확장 프로그램 Image Cliptray 만들기 2편: background.js로 이미지 우클릭 메뉴 만들기크롬 확장 프로그램 Image Cliptray 만들기 1편: manifest.json으로 기본 구조 세팅하고 팝업 띄우기이번 글에서는 Image Cliptray라는 크롬 확장 프로그램의 기본 구조를 만드는 과정을 정리한다.개발 환경joyshu93.tistory.com 이번 편에서는 그다음 단계로 넘어간다.목표는 단순하다.우클릭한 이미지 정보를 객체로 정리한다chrome.storage.local에 저장한다중복 저장을 막는다저장이 실제로 되었는지 확인한다이번 편의 핵심..

크롬 확장 프로그램 Image Cliptray 만들기 1편: manifest.json으로 기본 구조 세팅하고 팝업 띄우기이번 글에서는 Image Cliptray라는 크롬 확장 프로그램의 기본 구조를 만드는 과정을 정리한다.개발 환경 : Window, VS Code, Chrome목표는 단순하다.프로젝트 폴더를 만든다manifest.json을 작성한다popup.html,joyshu93.tistory.com 1편에서는 manifest.json을 작성하고,크롬이 내 폴더를 확장 프로그램으로 인식하도록 만든 뒤,아이콘을 눌렀을 때 팝업이 뜨는 상태까지 만들었다.이번 편에서는 그다음 단계로 넘어간다.목표는 단순하다.background.js를 이용해 우클릭 메뉴를 만든다이미지 위에서만 메뉴가 보이게 한다메뉴를 클릭했..

이번 글에서는 Image Cliptray라는 크롬 확장 프로그램의 기본 구조를 만드는 과정을 정리한다.개발 환경 : Window, VS Code, Chrome목표는 단순하다.프로젝트 폴더를 만든다manifest.json을 작성한다popup.html, popup.css, popup.js를 연결한다크롬에서 확장 프로그램을 로드한다아이콘을 눌렀을 때 팝업이 뜨는지 확인한다아직 이미지 저장 기능은 만들지 않는다.우클릭 메뉴도 없고, 브라우저 저장소도 아직 사용하지 않는다.이번 단계에서 가장 중요한 건 이거다.크롬이 내 폴더를 확장 프로그램으로 인식하게 만드는 것이게 되면 이후 단계에서 기능을 하나씩 붙일 수 있다.1. 프로젝트 폴더 구조 만들기먼저 아래와 같은 폴더 구조를 만든다.image-cliptray/ ..

3줄 요약2026년 맥북은 MacBook Air 13·15형은 M5, MacBook Pro 14형은 M5 / M5 Pro / M5 Max, MacBook Pro 16형은 M5 Pro / M5 Max로 구성이 더 세분화됐습니다. 그래서 이제는 단순히 에어냐 프로냐보다 칩·메모리·SSD·디스플레이·포트를 함께 봐야 제대로 고를 수 있습니다. (Apple)특히 올해는 맥북 에어가 기본 16GB 메모리와 512GB SSD, 최대 32GB 메모리와 4TB SSD까지 지원하고, 맥북 프로는 기본 1TB 또는 2TB 저장공간, 최대 128GB 통합 메모리와 8TB SSD까지 선택할 수 있어 업그레이드 판단이 더 중요해졌습니다. (Apple)또 하나 놓치기 쉬운 포인트가 애플 교육 할인입니다. 한국 애플 교육 스토어 ..

✅3줄 요약Apple 한국 공식 페이지 기준 3월 6일(목) 오전 10시 사전 주문 시작, 3월 11일 출시입니다.국내 Apple Store에선 256GB/512GB + 4가지 색상(실버/블러시/시트러스/인디고) 조합으로 구매 흐름이 잡혀 있습니다.“가성비”는 용량만 보고 결정하면 위험합니다. 포트(USB-C 2개지만 USB3+USB2 구성), Touch ID 유무, 외장 모니터 1대 제한까지 같이 체크해야 합니다.맥북 Neo는 “첫 맥”을 고민하던 사람에게 꽤 큰 사건입니다. 한국 페이지에 사전 주문/출시 일정이 딱 박혀 있고, 스펙도 ‘일상 작업’에 초점을 맞춘 구성으로 정리돼 있어요.다만 사전 주문 당일에 급하게 누르면, 용량/키보드(=Touch ID)/포트에서 후회할 가능성이 큽니다. 오늘 글은 ..

✅ 3줄 요약**13인치(34.5cm)**는 가볍고(1.23kg) 이동이 잦을수록 만족도가 높고, **15인치(38.9cm)**는 작업 공간·스피커 몰입감이 확실히 올라갑니다.두 모델 모두 M5 + 16GB 통합 메모리 + 512GB SSD를 기본으로 시작해 “처음부터 부족함”을 줄였습니다.포트/무선/카메라 같은 뼈대는 동일(Thunderbolt 4 2개, Wi-Fi 7, 12MP Center Stage 등)이라 결국 ‘내 생활 패턴’이 답입니다.맥북 에어를 고를 때 가장 많이 나오는 질문이 딱 하나죠.“13이랑 15… 뭐가 더 좋아요?”이번 **M5 탑재 맥북 에어(13·15)**는 더더욱 헷갈릴 수밖에 없습니다. 기본 사양 자체가 꽤 좋아졌고(16GB/512GB), 성능도 같은 ‘에어’ 라인업 안에서..

M3와 무엇이 달라질까? 출시 전 구매 가이드차세대 iPad Air(M4)에 대한 관심이 빠르게 커지고 있습니다.현재 판매 중인 iPad Air는 M3 칩 탑재 모델이지만, 해외 매체를 중심으로 M4 iPad Air 업그레이드 가능성이 거론되고 있습니다.그렇다면 차세대 iPad Air는 무엇이 달라질까요?그리고 지금 M3 모델을 사는 것이 좋을까요, 아니면 신형 출시를 기다리는 것이 좋을까요?이 글에서는 iPad Air 예상 스펙 중심으로, 구매 예정자가 반드시 알아야 할 변화 포인트만 정리했습니다.✅ 현재 기준: iPad Air M3 스펙 정리차세대 iPad Air를 판단하려면, 먼저 **현행 iPad Air(M3)**를 정확히 알아야 합니다.📌 iPad Air M3 핵심 스펙칩: Apple M3RA..

이 글의 목표Unity로 XR을 만들 때 “기능을 갖다 쓰는 수준”을 넘어서, XR이 엔진 안에서 어떤 계층 구조로 동작하는지를 이해하는 게 목표다.이 글을 다 읽고 나면 아래를 말로 설명할 수 있어야 한다.Unity에서 XR 트래킹/입력 데이터는 어떤 흐름으로 올라오는가?OpenXR Runtime / Unity OpenXR Plugin / XR Subsystem / XRI의 역할 차이는?기기가 없어도 학습/검증이 가능한 이유는?1) 왜 Unity XR 구조를 알아야 할까? (XR 직무 관점)실무/면접에서 많이 나오는 질문들:“Unity XR 구조 설명해보세요.”“OpenXR을 왜 쓰나요?”“XRI는 OpenXR이랑 어떤 관계예요?”“Input System이랑 연결은 어떻게 돼요?”여기서 구조를 설명 못..

들어가며XR 개발을 시작하면 가장 먼저 마주치는 질문이 있다.“Unity로 XR을 만든다는 게 정확히 무슨 의미일까?”많은 초보 XR 개발자들이 튜토리얼을 따라 하며 손과 오브젝트는 움직이게 만들지만, Unity–XR 기기–OpenXR의 관계를 명확히 설명하지 못한 채 넘어간다.1. 왜 OpenXR부터 이해해야 할까?실무 XR 개발에서는 특정 기기 하나만을 대상으로 개발하지 않는다.QuestVivePico처럼 서로 다른 XR 기기를 하나의 코드 구조로 대응해야 한다.이때 핵심 역할을 하는 것이 바로 OpenXR이다.OpenXR는 XR 기기와 엔진(Unity, Unreal)을 연결하는 표준 인터페이스이며, 현재 대부분의 XR 프로젝트에서 기본 전제로 사용된다.즉, Unity XR 개발을 한다는 것은 Ope..

3줄 요약2026년 신학기 노트북의 핵심 기준은 **브랜드가 아니라 칩셋(플랫폼)**이다이미 공식 발표된 Intel Core Ultra, AMD Ryzen AI, Qualcomm Snapdragon X는 모두 온디바이스 AI를 전제로 설계됐다선택의 핵심은 AI 성능 수치보다 호환성·배터리·사용 패턴 적합성이다신학기 노트북을 고르려다 보면 공통된 고민에 부딪힌다. “이번에는 AI 노트북이 좋다는데, 대체 뭘 기준으로 봐야 할까?”라는 질문이다.2026년을 앞둔 지금, 노트북 시장은 명확한 전환점에 들어섰다. 단순히 CPU 성능이나 브랜드를 비교하던 시기를 지나, 어떤 칩셋 기반의 AI PC인가가 가장 중요한 선택 기준으로 떠오르고 있다.이번 글에서는 이미 공식 발표가 완료된 칩셋만을 기준으로, 2026년 ..