Notes on UX engineering.

• ChatGPT 설정과 Custom Instructions 베스트 프랙티스

  2026-05-14 ChatGPT
• Claude Code Auto-research 이해와 사용법

  2026-05-14 Claude Code
• GitHub SSH 인증키 연결하기

  2026-05-14 GitHub
• 전략적 사고를 활용한 프롬프트 엔지니어링

  2026-05-14 프롬프트 엔지니어링
• DESIGN.md란 무엇인가? AI 시대의 디자인 기준서를 정리하는 새로운 방식

  2026-04-15
• 옵시디언에서 노트 간 연결성 높이기, 프론트매터 작성법까지 한 번에 정리

  2026-04-15
• 바이브 코딩에서 하네스 엔지니어링이란 무엇인가

  2026-04-13 개발도구와 환경
• [Claude Code 꿀팁] 매번 'Yes' 누르기 귀찮다면? 자동 승인 설정하는 3가지 방법

  2026-03-31 개발도구와 환경
• 정보처리기사 실기 - 3일차 (DB, 정규화)

  2026-03-25 웹디자인기능사 실기
• 정보처리기사 실기 - 2일차 (Java/C/Python 기본, 요구사항)

  2026-03-25 웹디자인기능사 실기
• 정보처리기사 실기 - 1일차 (SQL 기본기, 소프트웨어 생명주기, 개발방법론)

  2026-03-25 웹디자인기능사 실기
• 정보처리기사 실기, 한달 안에 직장인도 가능한 현실적인 공부표

  2026-03-24 웹디자인기능사 실기
• 티스토리에 코드 하이라이팅 스타일 라이브러리 설치하는 방법

  2026-03-23 티스토리
• Claude로 Figma 디자인하게 하기

  2026-03-23 개발도구와 환경
• 맥 미니를 Tailscale로 외부에서도 활용하는 방법

  2026-03-23 개발도구와 환경
• Claude Remote Control이란? 모바일에서 내 PC의 Claude Code를 이어 쓰는 방법

  2026-03-23 개발도구와 환경
• CSS `user-select` 완전 이해하기: 텍스트 선택을 어디까지 막을 수 있을까?

  2026-03-13 CSS
• CSS `will-change` 완전 이해하기: 언제 쓰고, 어떻게 써야 할까?

  2026-03-13 CSS
• 국내 개인사업자 D-U-N-S 번호 무료 등록 가이드: 애플 경로로 발급받아 구글·애플에서 같이 쓰기 (단, 구글은 D-U-N-S 없이도 가능)

  2026-03-06 개발도구와 환경
• 특정 도메인 주소의 IP 주소 확인 방법

  2026-03-06 개발도구와 환경
• 처음 하는 사람을 위한 Google Play(플레이 스토어) 배포 절차 한 번에 정리

  2026-03-04 개발도구와 환경
• 무료 스톡 비디오 사이트 추천: Unsplash처럼 “무료로” 영상 소스 구하는 곳 8선

  2026-03-02 디자인 리소스
• 키보드 대신 말로 쓰는 시대: 인기 음성 받아쓰기 앱 비교 소개 (Superwhisper vs Aqua Voice 외)

  2026-02-26 개발도구와 환경
• Figma Image Tracer 플러그인: 설치(다운로드)부터 사용법까지 빠르게 정리

  2026-02-04 피그마 - 무료 플러그인
• 무료로 쓰는 음악 API 추천: 한국 음악까지 커버하려면 뭘 써야 할까?

  2026-02-04 개발도구와 환경
• 무료로 영화·TV 데이터 가져오는 API 추천 (실무에서 쓰기 좋은 것들)

  2026-02-04 개발도구와 환경
• 한국 도서 데이터를 무료로 가져오는 API 추천 (국내 도서 커버리지 중심)

  2026-02-04 개발도구와 환경
• Cloudflare로 서브도메인 리다이렉트 만들기 (Redirect Rules가 안 보일 때: Page Rules로 해결)

  2026-01-29 웹서버
• HandBrake로 MOV 파일을 MP4로 간단하게 변환하는 방법

  2025-12-05 개발도구와 환경
• CSS `filter: drop-shadow` vs `box-shadow` 완벽 비교

  2025-09-05 CSS
• 단순한 한국영문주소 변환기

  2025-08-22 무료 웹 도구
• 컨텍스트7(Context7)이란 무엇인가? 웹 개발 워크플로우에 적용하는 법

  2025-07-25 개발도구와 환경
• Claude Code 'ls, cd, find 등' 기본 커맨드 확인 더 안 묻게 하기

  2025-07-24 개발도구와 환경
• 유튜브 프리미엄 가족 요금제 구독 위한 구글 계정 국가 변경

  2025-07-16 개발도구와 환경
• SigmaOS(시그마OS) 브라우저 리뷰

  2025-06-27 거의 모든 것 리뷰
• Gmail(지메일) 안 읽은 메일 확인하고 정리하기

  2025-05-27 개발도구와 환경
• ChatGPT(챗지피티) 답변 마크다운(Markdown, MD)로 복사하기

  2025-04-29 개발도구와 환경
• 가장 아름다운 웹 브라우저 SigmaOS (시그마오에스)

  2025-04-11 개발도구와 환경
• 링크 주소(URL)에 저장된 카카오톡 썸네일 이미지 초기화하기

  2025-03-11 SEO
• CSS 단위 선택: 실무에서 'rem' vs 'px' 고민

  2025-02-11 CSS
• 무료 3D 아이콘 세트(패키지) 다운로드 웹사이트 소개

  2025-02-05 아이콘
• 무료 3D 아이콘 다운로드를 위한 인기 웹사이트 소개

  2025-02-03 디자인 리소스
• Pure.css(퓨어CSS) 소개 - 무료 CSS 프레임워크

  2024-12-24 디자인 프레임워크
• [CSS] 텍스트 문장의 좌우 크기는 얼마로 잡는 것이 적절할까?

  2024-12-19 CSS - 타이포그래피
• WebP 이미지 포맷: 특징과 웹 개발에서의 활용

  2024-12-17 HTML
• SimpleBar를 사용하여 커스텀 스크롤바 만들기

  2024-12-17 UX - 스크롤 애니메이션
• [이미지] Base64 이미지 소개와 활용 방법 안내

  2024-12-16 HTML
• 테일윈드(TailwindCSS)에서 애니메이션 추가하기

  2024-12-15 CSS - TailwindCSS
• Flexbox에서 width와 flex-basis 비교: 어떤 것을 사용해야 할까?

  2024-12-15 CSS - Flex & Grid
• 바닐라 JS로 UI 핸들링 위한 속성 및 셀렉터 설정 방법 권장안

  2024-12-15 JS
• TailwindCSS로 ::before 및 ::after 의사 요소를 사용한 버튼 만들기

  2024-12-14 CSS - TailwindCSS
• 테일윈드(TailwindCSS)에서 버튼에 배경이미지 넣기

  2024-12-14 CSS - TailwindCSS
• React UI 컴포넌트 라이브러리 추천 (2024)

  2024-12-14 디자인 케이스스터디
• 테일윈드(TailwindCSS)에 커스텀 CSS 배치하기

  2024-12-13 CSS - TailwindCSS
• Streamline(스트림라인) 아이콘 (무료 아이콘 다운)

  2024-12-13 아이콘
• TailwindCSS를 사용하여 SVG 아이콘 색상 변경하는 법

  2024-11-08 CSS - TailwindCSS
• 프론트엔드 개발 정보를 얻을 수 있는 Slack 및 Discord 커뮤니티 추천 (2024년 10월 기준)

  2024-10-02 개발도구와 환경
• [CSS-in-JS] 이모션(Emotion) 라이브러리 소개

  2024-09-27 CSS
• CSS `clip-path`의 기초 알아보기

  2024-09-15 CSS
• 웹에서 쉽게 이미지 압축하는 방법

  2024-09-09 개발도구와 환경
• iPhone Safari 상단 영역의 색상을 변경하는 방법: theme-color 메타 태그 활용하기

  2024-09-09 HTML
• 크롬 성능 모니터 활용하기: 프론트엔드 개발자를 위한 가이드

  2024-09-04 개발도구와 환경
• Blisk 브라우저: 웹사이트의 반응형 테스트를 위한 프론트엔드 개발자 도구

  2024-09-03 개발도구와 환경
• CSS의 position: fixed vs position: sticky 이해하기: 간단 비교

  2024-09-02 CSS
• Safari에서 비디오 자동재생하기 (WeBM 파일 포함 필요)

  2024-08-26 HTML
• 테일윈드(TailwindCSS)에서 z-index 활용하기

  2024-08-25 CSS - TailwindCSS
• 원티드 산스(Wanted Sans) 폰트 (무료 폰트 다운로드)

  2024-08-25 폰트
• CSS의 @layer 소개: 스타일을 조직하고 제어하는 새로운 방법

  2024-08-25 CSS
• 접근성 준수 컴포넌트 - 비디오(Video) (영상용 자막 등 접근성 준수하기)

  2024-07-23 접근성 (A11Y) - 컴포넌트
• 와팔라이저(Wappalyzer) 활용해서 웹사이트에 사용된 기술 스택 확인하기

  2024-07-22 개발도구와 환경
• 피그마(Figma) - 영역 초과하는 텍스트에 말줄임표(...) 넣기(Truncate Text)

  2024-07-22 피그마
• IntersectionObserver를 사용한 스크롤 인터랙션 및 이미지 표시

  2024-07-17 UX - 스크롤 애니메이션
• 마우스에 따라 반대로 움직이는 HTML 요소 만들기

  2024-07-17 UX - 커서 & 클릭 & 키보드
• Ventusky (벤투스카이) : 태풍과 호우 예측 웹사이트

  2024-07-17 거의 모든 것 리뷰
• Hidden Bar 소개: 메뉴 바를 정리하는 필수 Mac 앱

  2024-07-17 개발도구와 환경
• 마우스 홀드(클릭 유지) 이벤트로 애니메이션 구현하기

  2024-07-16 UX - 커서 & 클릭 & 키보드
• 피그마 무료 리소스 - 대한민국 은행 로고 모음

  2024-07-16 피그마 - 무료 리소스
• HTML 테이블(Table)에 모서리 둥글기(border-radius) 적용하기

  2024-07-11 HTML
• Tabler (테이블러) 아이콘 (무료 아이콘 다운)

  2024-07-10 아이콘
• 피그마 (Figma) 무료 템플릿 - 샤드시엔 (shadcn/ui)

  2024-07-09 피그마 - 무료 템플릿
• 피그마 (Figma) 무료 템플릿 - Radix UI (래딕스 UI)

  2024-07-09 피그마 - 무료 템플릿
• CSS에서 z-index의 최소값과 최대값은 얼마일까?

  2024-07-07 CSS
• 피그마 (Figma) 무료 템플릿 - 테일윈드 CSS 스타일 (Tailwind CSS Styles)

  2024-07-07 피그마 - 무료 템플릿
• 접근성 준수 컴포넌트 - 이미지 (테이블 대체 텍스트 만들기)

  2024-07-07 접근성 (A11Y) - 컴포넌트
• HTML, CSS, JavaScript로 커서를 간단히 커스터마이징하기

  2024-07-07 UX - 커서 & 클릭 & 키보드
• 반응형 웹사이트 테스트하기 (모바일 웹, 기기에서 테스트)

  2024-07-06 UX - 반응형 (RWD)
• 맥OS에 마우스 클릭 소리 추가하기 - 키벨(Keybell)

  2024-07-06 개발도구와 환경
• 접근성 준수 컴포넌트 - 앵커 (a, 링크 태그)

  2024-07-05 접근성 (A11Y) - 컴포넌트
• 접근성 준수 컴포넌트 - 이미지

  2024-07-05 접근성 (A11Y) - 컴포넌트
• 접근성 준수 컴포넌트 - 이미지 (텍스트가 많은 이미지)

  2024-07-05 접근성 (A11Y) - 컴포넌트
• 접근성 준수 컴포넌트 - 탭 버튼

  2024-07-03 접근성 (A11Y) - 컴포넌트
• 접근성 준수 컴포넌트 - 테이블 (Table)

  2024-07-03 접근성 (A11Y) - 컴포넌트
• 스크롤 이벤트에 따른 동영상 재생 애니메이션 만들기

  2024-07-03 UX - 스크롤 애니메이션
• 스크롤 애니메이션 활용 CSS 트랜스폼 효과 주기

  2024-07-03 UX - 스크롤 애니메이션
• 웹 접근성 준수 지침 - 인식의 용이성 - 7. 콘텐츠 간의 구분

  2024-07-02 접근성 (A11Y) - 웹 접근성 지침
• 웹 접근성 준수 지침 - 인식의 용이성 - 6. 자동 재생 금지

  2024-07-02 접근성 (A11Y) - 웹 접근성 지침
• 웹 접근성 준수 지침 - 인식의 용이성 - 5. 텍스트 콘텐츠의 명도 대비

  2024-07-02 접근성 (A11Y) - 웹 접근성 지침
• 피그마(Figma) 로 윅스 홈페이지 만드는 무료 플러그인 ‘Figma to Wix Studio’

  2024-06-29 피그마 - 무료 플러그인
• 쉘 스크립트(Bash) - 기호와 특수문자 기본 모음

  2024-06-27 Shell Script (Bash)
• 쉘 스크립트(Bash) - 내비게이팅(브라우징) 관련 기본 명령어 모음

  2024-06-27 Shell Script (Bash)
• 쉘 스크립트(Bash) - 파일 관련 기본 명령어 모음

  2024-06-27 Shell Script (Bash)
• 쉘 스크립트(Bash) - 탐색 및 파일 외 유용한 기본 명령어 모음

  2024-06-27 Shell Script (Bash)
• 쉘 스크립트(Bash) - cd, ls 등 활용 파일시스템 브라우징(내비게이팅) 하기

  2024-06-27 Shell Script (Bash)
• 쉘 스크립트(Bash) - 디렉토리 제거하기(rm)

  2024-06-27 Shell Script (Bash)
• 쉘 스크립트(Bash) - 폴더 복사하여 같은 폴더에 사본 만들기

  2024-06-27 Shell Script (Bash)
• 전세계 앱(어플리케이션) 인기 순위 확인하기 (어플 글로벌 랭크)

  2024-06-27 개발도구와 환경
• 쇼츠로 업로드된 유튜브 영상, 일반 영상처럼 활용하기

  2024-06-26 개발도구와 환경
• 포맷팅(코드 자동 정렬) 프로그램 프리티어(Prettier) 설정하기

  2024-06-26 개발도구와 환경
• 템플릿 리터럴(Template Literals) 속 HTML 포맷팅, 하이라이팅 하기

  2024-06-25 JS
• 스크롤 애니메이션 연습 - HTML 요소에 스크롤 애니메이션 주기

  2024-06-25 UX - 스크롤 애니메이션
• Formspree 소개 - 단순하게 서버 없이 사용자 입력(폼) 받기

  2024-06-25 UX - 폼 (Forms)
• 자바스크립트로 스무스 스크롤(Smooth Scroll) 구현하기

  2024-06-24 UX - 스크롤 애니메이션
• 초간단한 스크롤 패럴랙스 애니메이션 구현하기 (CSS, JS)

  2024-06-23 UX - 스크롤 애니메이션
• CSS만으로 초간단한 패럴랙스 효과 만들기

  2024-06-23 UX - 스크롤 애니메이션
• jQuery Slick 슬라이더에 자동재생/정지 버튼 추가하기

  2024-06-23 UX - 슬라이더 (롤링배너)
• CSS 3D 최적화하기 - transform-style: preserve-3d

  2024-06-22 CSS - 3D
• CSS 3D 활용하기 - 3D transform

  2024-06-22 CSS - 3D
• CSS 3D 시작하기 - perspective 속성의 이해

  2024-06-22 CSS - 3D
• 프로 버전의 GPT를 추구하는 퍼플렉시티(Perplexity) AI 소개

  2024-06-21 개발도구와 환경
• 명도대비 확인을 위한 'Colour Contrast Analyzer' 활용하기

  2024-06-21 접근성 (A11Y)
• 웹 접근성 준수 지침 - 인식의 용이성 - 4. 명확한 지시 사항 제공

  2024-06-21 접근성 (A11Y) - 웹 접근성 지침
• 웹 접근성 준수 지침 - 인식의 용이성 - 3. 색에 무관한 콘텐츠 인식

  2024-06-20 접근성 (A11Y) - 웹 접근성 지침
• CSS 기술 학습 자료(웹사이트) 소개

  2024-06-19 CSS
• 심화 CSS 기술 학습 자료(웹사이트) 소개

  2024-06-19 CSS
• CSS Flexbox(플렉스)와 Grid(그리드) 학습 사이트 소개

  2024-06-19 CSS - Flex & Grid
• [CSS라이브러리] shadcn/ui 소개: 아름답게 설계된 컴포넌트 라이브러리

  2024-06-18 CSS - 라이브러리
• [CSS라이브러리] Radix UI 소개: 세련된 UI 컴포넌트 라이브러리

  2024-06-18 CSS - 라이브러리
• 대체텍스트용 엘리먼트(visually-hidden) 만들기

  2024-06-17 접근성 (A11Y)
• 유튜브를 통해 접근성용 한글 자막 자동으로 생성하기

  2024-06-17 접근성 (A11Y)
• 웹 접근성 준수 지침 - 인식의 용이성 - 2. 자막 제공

  2024-06-17 접근성 (A11Y) - 웹 접근성 지침
• 웹페이지의 Javascript & CSS(SCSS) 변경 크롬 확장 프로그램 - User Javascript & CSS Chrome Extension

  2024-06-17 개발도구와 환경
• 웹 접근성 준수 지침 - 인식의 용이성 - 1. 적절한 대체 텍스트 제공

  2024-06-16 접근성 (A11Y) - 웹 접근성 지침
• 피그마(Figma) 배경 제거(누끼 따기) 무료 플러그인(Plugin) ‘아이콘8 백그라운드 리무버(Icons8 Background Remover)’

  2024-06-15 피그마 - 무료 플러그인
• ChatGPT(AI) 활용해서 UI/UX 디자이너 취업냉각기 극복하기

  2024-06-12 디자인 이론과 리서치
• 자바스크립트로 여러 CSS 클래스 추가하기

  2024-06-11 JS
• 아임웹: 디자인은 탁월하나, 커스터마이징과 확장성의 한계

  2024-06-11 디자인 케이스스터디
• 간단한 스크롤 내비게이션 만들기 (CSS+JS)

  2024-06-10 UX - 스크롤 애니메이션
• 프론트엔드 개발에 특화된 웹 브라우저 소개

  2024-06-10 개발도구와 환경
• window.onload vs DOMContentLoaded

  2024-06-06 JS
• Mechvibes 소개: 키보드 눌렀을 때 소리 나도록 하기

  2024-06-06 개발도구와 환경
• [CSS] opacity와 visibility는 함께 사용해야 할까요?

  2024-06-05 CSS
• 웹디자인기능사 실기 시험 기본 정보

  2024-06-04 웹디자인기능사 실기
• 시험 유형 1 풀이

  2024-06-04
• 웹디자인기능사 - 인터넷 일반 - 제3강 인터넷 (3)

  2024-06-04 웹디자인기능사 필기 요약
• 웹디자인기능사 - 인터넷 일반 - 제3강 인터넷 (2)

  2024-06-04 웹디자인기능사 필기 요약
• 피그마(Figma) 자연스러운 그림자 생성 무료 플러그인(Plugin) ‘뷰티풀쉐도우(Beautiful Shadows)’

  2024-06-02 피그마 - 무료 플러그인
• 피그마(Figma) 블롭(아메바 형상, blob) 생성 무료 플러그인(Plugin) ‘메이크블롭(Make blob)’

  2024-06-01 피그마 - 무료 플러그인
• 이고진 스탭퍼 1년 사용 후기: 유산소 운동과 소음 문제의 고찰

  2024-06-01 거의 모든 것 리뷰
• 키크론 K6 Pro 저소음 적축 키보드 리뷰: 새로운 경험과 품질의 만남

  2024-05-31 디지털디바이스
• 조용한 타이핑, 키크론 K Pro 저소음 갈축 스위치 리뷰

  2024-05-30 디지털디바이스
• 구글 네스트 허브(Google Nest Hub) 리뷰: 스마트 홈의 중심과 인테리어의 조화

  2024-05-30 디지털디바이스
• 키크론 K Pro 저소음 적축 키보드 스위치: 조용하면서도 푹신한 타건감의 매력

  2024-05-30 디지털디바이스
• 아르헨티나 국가로 생성한 구글 계정, 한국 이름으로 성인 인증 가능

  2024-05-29 개발도구와 환경
• NordVPN(노드VPN) 무료 환불 받는 방법

  2024-05-22 개발도구와 환경
• 아르헨티나 계정으로 유튜브 프리미엄 구독하기 (24년 5월 12일 기준 유효)

  2024-05-13 개발도구와 환경
• 웹디자인기능사 - 인터넷 일반 - 제3강 인터넷 (1)

  2024-05-08 웹디자인기능사 필기 요약
• 웹디자인기능사 - 인터넷 일반 - 제2강 자바스크립트

  2024-05-08 웹디자인기능사 필기 요약
• Git(깃) 브랜치 생성 및 푸시하기

  2024-04-30 Git
• 웹디자인기능사 - 인터넷 일반 - 제1강 HTML

  2024-04-30 웹디자인기능사 필기 요약
• 데이트파인더 - 심플한 날짜 계산기(음력 계산기, 접근성 준수)

  2024-04-30 무료 웹 도구
• 키크론 K3 레트로 (Keychron K3 Retro)

  2024-04-29 디지털디바이스
• 웹디자인기능사 - 디자인 개론 - 제6강 색채조화

  2024-04-29 웹디자인기능사 필기 요약
• 웹디자인기능사 - 디자인 개론 - 제5강 색의 지각효과와 감정효과

  2024-04-28 웹디자인기능사 필기 요약
• 웹디자인기능사 - 디자인 개론 - 제4강 색의 혼합 및 표시방법

  2024-04-27 웹디자인기능사 필기 요약
• 웹디자인기능사 - 디자인 개론 - 제3강 색의 기본 원리

  2024-04-27 웹디자인기능사 필기 요약
• 동적 임포트(Dynamic Import) 이해하기

  2024-04-26 JS
• CSS로 다크모드(라이트모드) 구현하는 방법 2가지

  2024-04-26 CSS
• 랜덤라이터 - 한글 랜덤 텍스트 생성기(한글입숨, 로렘입숨)

  2024-04-26 무료 웹 도구
• 테일윈드(TailwindCSS)에서 다크모드 비활성화하기

  2024-04-25 CSS - TailwindCSS
• 웹디자인기능사 - 디자인 개론 - 제2강 디자인의 요소와 원리

  2024-04-25 웹디자인기능사 필기 요약
• 웹디자인기능사 - 디자인 개론 - 제1강 디자인의 의미와 조건

  2024-04-24 웹디자인기능사 필기 요약
• 웹디자인기능사 소개 : 전문성과 취업을 함께 얻을 수 있는 IT 첫걸음

  2024-04-24 웹디자인기능사 정보
• 전 세계 정부 공공 UI/UX 디자인 시스템(가이드) 소개

  2024-04-19 디자인 케이스스터디
• 갤럭시(안드로이드) 스마트폰 앱(어플리케이션) 업데이트 불가능 해결하기

  2024-04-18 개발도구와 환경
• 윈도우11 파워토이즈 활용 키보드 언어전환 키 변경

  2024-04-13 개발도구와 환경
• 대한민국 디지털 정부서비스 UI/UX 가이드라인 소개

  2024-04-13 디자인 케이스스터디
• 크롬 개발자 도구에서 느린 인터넷 속도 재현하기

  2024-04-03 테스팅
• 챗지피티(ChatGPT) 계정의 이메일 주소 변경하기

  2024-02-21 ChatGPT
• Karabiner 미작동 시 주요 대처 방안 안내

  2023-12-26 개발도구와 환경
• [CSS] 한 줄 형태로 CSS 파일 포맷 변경하기

  2023-12-21 CSS
• [MacOS] 맥북 외장모니터 메인 디스플레이로 활용하기 (메인화면 설정)

  2023-12-14 개발도구와 환경
• 산만한 사람에게 필요한 맥용 무료 시간관리 앱 '플로우(Flow)' 추천

  2023-12-08 개발도구와 환경
• [피그마] 여러개 선택된 레이어 한번에 컴포넌트 생성하기 (Multiple Components)

  2023-11-20 피그마
• [피그마 무료 플러그인] 홈페이지(웹페이지)를 피그마에 그대로 가져오기 (html.to.design)

  2023-11-12 피그마 - 무료 플러그인
• [MacOS] 맥OS 스테이지 매니저(Stage Manager) 애니메이션 없애기

  2023-11-03 개발도구와 환경
• [접근성] 이미지 대체텍스트(Alt Text) 노가다 없이 자동 입력하기

  2023-10-20 접근성 (A11Y)
• 포토샵 파일 피그마(Figma)로 변환하기 (PSD to Figma)

  2023-07-09 피그마
• 케이스티파이 아이폰 케이스

  2023-06-20 디지털디바이스
• COX CK87 황축 기계식 키보드

  2023-06-15 디지털디바이스
• 플렉스박스에 말 줄임표(text-overflow: ellipsis) 삽입하기

  2023-06-10 CSS - Flex & Grid
• 특정 비율 유지하는 div 만들기 (padding 활용, IE11 호환)

  2023-06-08 CSS
• 피그마(Figma) 아이콘 다운로드 무료 플러그인(Plugin) ‘아이코니파이(Iconify)’

  2023-06-08 피그마 - 무료 플러그인
• forEach() IE 11 호환 오류 문제 대응하기

  2023-06-02 JS
• 세종 나성동 라운지46 (Sejong Naseong-dong Lounge46)

  2023-05-30 음식과 공간
• 로지텍 K380 (Logitech K380)

  2023-05-24 디지털디바이스
• 로지텍 MX Keys (Logitech MX Keys)

  2023-05-23 디지털디바이스
• 대전 유성온천역 청주해장국 (Daejeon Yuseong Hot Spring Station Cheongju Haejangguk)

  2023-05-21 음식과 공간
• 웹페이지에서 focus(포커스)가 어디에 있는지 확인하기

  2023-05-17 접근성 (A11Y)
• tabindex를 ‘0’과 ‘1’만 사용해야 하는 이유와 관련 이슈

  2023-05-16 접근성 (A11Y)
• CSS Flex 요소에 text ellipsis (말 줄임표) 적용하기

  2023-05-15 CSS - Flex & Grid
• IE(인터넷익스플로러)의 Edge(엣지) 강제실행(강제전환) 막기(해지하기)

  2023-04-28 개발도구와 환경
• 대전 선화동소머리해장국 (Daejeon Seonhwa-dong Beef Head Haejangguk)

  2023-04-16 음식과 공간
• (패러럴즈) 윈도우 아이콘 맥에서 안 뜨게 하기

  2022-10-28 개발도구와 환경
• HTML 페이지(정적 웹사이트) 비밀번호로 접근권한 제어하기

  2022-10-14 JS
• SASS/SCSS - sass 변수로 calc() 함수 속성과 사용하기

  2022-08-11 CSS - SASS & SCSS
• [MacOS] 카카오톡 캐시 파일 없애기

  2022-07-07 개발도구와 환경
• 포토샵 시프트(SHIFT) 키로 고정 비율로 크기 변경 기능 복구하기

  2022-07-07 포토샵
• 피그마(Figma) 오토 레이아웃 스페이싱 모드(spacing mode) 단축키로 빠르게 변경하기 (packed vs space between)

  2022-06-19 피그마
• [VSCode] 따옴표와 대괄호 등의 자동닫힘 해제하기

  2022-05-17 개발도구와 환경
• 포토샵 글리프 대체 팝업 안 뜨게 하기 (글자 팝업)

  2022-04-29 포토샵
• 피그마(Figma)에서 트랙패드 줌(핀치줌, Pinch zoom)이 안 되는 문제

  2022-04-24 피그마
• 내부망 PC(오프라인)에서 최신 버전 크롬 다운로드 및 설치하기

  2022-03-28 개발도구와 환경
• 무료로 노션 사이트 만들기 & 도메인 연결하기

  2022-03-28 노션
• [CSS] ::placeholder로 텍스트인풋 플레이스홀더 폰트 크기 & 색 바꾸기

  2022-03-15 CSS - Selector
• [CSS] IE 대응을 위해 flex-basis에 width & max-width 함께 넣기

  2022-03-10 CSS - Flex & Grid
• [CSS] flex-basis로 줄바꿈 방지 flex 레이아웃 만들기

  2022-03-08 CSS - Flex & Grid
• 피그마(Figma)에서 글씨 기울기, 이탤릭체(italic) 설정하는 법

  2022-03-02 피그마
• 피그마(Figma)의 이미지 사이즈(해상도) 삽입/첨부 크기 제한

  2022-03-01 피그마
• 아이폰(iOS) 가상머신으로 모바일웹 테스트 환경 구축하기

  2022-02-26 개발도구와 환경
• [CSS] webkit 브라우저 input 텍스트 필드의 색상 변경하기

  2022-02-25 CSS
• [CSS] 채워지는 flex 요소 만들기 및 줄바꿈 주기

  2022-02-23 CSS - Flex & Grid
• 아이폰으로 모바일웹(사파리) 개발자 모드 디버깅 환경 구축하기

  2022-02-23 개발도구와 환경
• 안드로이드 기기로 모바일웹(크롬) 개발자 모드 디버깅 환경 구축하기

  2022-02-22 개발도구와 환경
• UX개발연구실 소개

  2022-02-16
• CSS 클래스 네이밍 시 container vs wrapper 차이 구분하기

  2022-02-16 CSS
• Border 속성이 부여된 박스 내부에 absolute 포지션 사용하기

  2022-02-09 CSS
• 간단한 pure JS & CSS와 AJAX 활용 페이지 트랜지션

  2020-09-02 UX - 트랜지션 효과
• 색 (Color)

  2020-08-24 디자인 시스템 가이드
• 라디오 버튼 (Radio Button)

  2020-08-24 디자인 시스템 컴포넌트
• 메뉴 (Menu)

  2020-08-23 디자인 시스템 컴포넌트
• display: none에 애니메이션 추가하기

  2020-05-13 CSS
• [MacOS] 언어전환(한영전환) 단축키 shift + space로 변경하기

  2020-04-12 개발도구와 환경
• 피그마 데스크탑앱에서 export 또는 작업시 색상이 다르게 나오는 문제 해결

  2020-04-12 피그마
• 피그마(Figma) 기능 - 픽셀 그리드와 픽셀 스냅, 그리고 서브 픽셀

  2020-02-13 피그마
• 피그마(Figma) 기능 - 마우스(마우스휠스크롤)로 수치 쉽게 변경하기

  2020-02-12 피그마
• 아토믹디자인(Atomic Design) 방법론, 간단하게 이해하고 응용하기

  2020-02-12 디자인 이론과 리서치
• 피그마(Figma) 기능 - 스타일(Styles) 관리하기 (색, 폰트 저장하기)

  2020-02-11 피그마
• 피그마(Figma) 설치 및 실행 방법

  2020-02-10 피그마
• 피그마(Figma) 무료 리소스 사이트 모음(템플릿, 아이콘, UI 키트)

  2020-02-08 피그마 - 무료 리소스
• 피그마(Figma) 기능 - 페이지 배경색 변경하기

  2020-02-07 피그마
• [MacOS] 프리뷰 앱으로 이미지 사이즈 조절하기

  2020-01-25 개발도구와 환경
• 간단한 웹스크롤애니메이션 라이브러리 AOS

  2019-12-23 UX - 스크롤 애니메이션
• \b[VSCode] 화면을 나누어서 파일 열기 및 나누어 열려진 창(splited window pane)끼리 커서 이동하기

  2019-12-20 개발도구와 환경
• 좋은 대시보드 디자인의 10가지 원칙 (2019)

  2019-12-09 디자인 이론과 리서치
• 피그마(Figma)가 앞으로 대세 디자인 프로그램이 될 수밖에 없는 이유

  2019-12-07 피그마
• 일러스트레이터2020에서 진화된 Path Simplify 기능

  2019-12-06 일러스트레이터
• HTML 테이블로 이메일용 반응형 레이아웃 구성하기 (No Media Query, 반응형 테이블)

  2019-12-05 HTML
• 키크론 k1 (v3) keychron 기계식 키보드 리뷰 맥용 (KEYCHRON K1 (V3) KEYCHRON Mechanical Keyboard Review for Mac)

  2019-12-05 디지털디바이스
• [SEO] 웹페이지 프리뷰이미지(썸네일) 디자인가이드

  2019-12-05 SEO
• [SEO] 페이스북의 프리뷰 이미지/정보 강제 갱신하기

  2019-12-04 SEO
• 어피니티 디자이너가 일러스트레이터를 대체할 수 있을까?

  2019-11-25 어피니티디자이너
• [MacOS] 용량 관리에서 Other 항목 확인/관리하기

  2019-11-25 개발도구와 환경
• CSS 한글 웹폰트 자간(letter-spacing) 자동으로(상대적으로) 조정하기

  2019-11-23 CSS - 타이포그래피
• 기계식 키보드 키크론 K2 Keychron K2 갈축 모델 리뷰 (Mechanical Keyboard Keychron K2 Keychron K2 Reduced Model Review)

  2019-11-18 디지털디바이스
• [일러] 여러 아트보드들을 PDF로 쉽게 고화질로 익스포트하기

  2019-11-07 일러스트레이터
• 어피니티디자이너 Expand Stroke 문제 대응하기

  2019-11-05 어피니티디자이너
• 어피니티디자이너 Synchronise Default 및 Revert Default 기능 안내

  2019-11-01 어피니티디자이너
• 어피니티디자이너에서 Shift 락 해제하기

  2019-11-01 어피니티디자이너
• 피그마(Figma) 기능 - 선, 폰트크기, 둥글기 유지한 채로 크기 조절하기

  2019-10-24 피그마
• 아이프레임(iframe) 높이 자동으로 맞추기

  2019-10-22 HTML
• Reduced/비애니메이션 이슈/디바이스 대응 CSS 작성법

  2019-10-14 CSS
• [AI] 레이어의 Appearance (스타일, 그림자) 복사/붙여넣기 방법

  2019-10-12 일러스트레이터
• XML사이트맵의 용도와 만드는 법 파악하기

  2019-09-27 SEO
• 펜타그램이 디자인한 야후의 새로운 로고

  2019-09-24 디자인 케이스스터디
• [AI] Bounding Box가 계속 표시되는 버그 대응 방법 (내용수정)

  2019-09-16 일러스트레이터
• CSS 기본 시스템 폰트 설정 (2019)

  2019-09-05 CSS
• CSS 리셋 - Normalize.css & Reset.css

  2019-09-05 CSS
• CSS box-sizing과 초기 설정(border-box)

  2019-09-05 CSS
• CSS clip 속성

  2019-09-04 CSS
• var() - CSS 변수(Variables), 커스텀 프로퍼티

  2019-09-04 CSS
• [AI] Scissors, Knife, Join Tool - path를 cut하고 trim하기

  2019-09-03 일러스트레이터
• [스케치] 개체 뒤에 있는(겹쳐진) 개체 선택하기

  2019-09-03 스케치
• 네이버 지도 API 활용 지역정보 오버레이 삽입 방법

  2019-08-14 지도API
• 지도 API 연동용 좌표값 확인하기

  2019-08-14 지도API
• [MacOS] 원격 제어하기

  2019-08-05 개발도구와 환경
• [AI] 레이어 패널에서 선택된 레이어의 개체들 선택하기

  2019-08-04 일러스트레이터
• [HTML] 숫자의 자동 링크화 현상 제거

  2019-08-04 HTML
• AI에서 텍스쳐 간단 제작 및 적용하기

  2019-08-02 일러스트레이터
• 일러스트레이터 Priview Bounds로 실제 개체 영역 선택하기

  2019-07-12 일러스트레이터
• 블로그 빌더로서의 티스토리 플랫폼 특단점

  2019-06-29 티스토리
• 아이콘디자인 기초 파악하기

  2019-04-11 아이콘 디자인
• DPI 스터디 (V1)

  2019-04-11 색상과 디스플레이
• 스케치에서 단축키 변경하기

  2019-04-04 스케치
• 일러스트레이터 compound path & compound shape, path & shape 비교

  2019-03-15 일러스트레이터
• 모바일용 이메일 디자인을 할 때에 주의해야할 점 5가지

  2019-03-02 이메일 디자인
• 웹 기반 SVG배경패턴 생성기 3종 소개 (2017년 초 기준)

  2019-03-02 CSS
• 국내외 정보보안 및 B2B IT 업체 CI, BI 디자인 모음 (2017년 초 기준)

  2019-03-02 디자인 케이스스터디
• 2016년 가을 공개된 구글 애널리틱스의 새로운 UI디자인

  2019-03-02 디자인 케이스스터디
• 디자이너라면 반드시 봐야할 7가지 TED 강연 영상

  2019-03-02 디자인 이론과 리서치
• 큰 이미지를 여러 장으로 자동으로 나누어서 출력하는 법

  2019-03-02 인쇄
• UI디자인가이드(스타일가이드,개발가이드,디자인명세) 만들기 (2016년 기준) (내용수정)

  2019-03-02 디자인 이론과 리서치
• '저장' 아이콘을 바꿀 수 있는 방법은 없을까?

  2019-03-02 디자인 이론과 리서치
• 해외 웹디자이너들이 선호하는 폰트 10개

  2019-03-02 디자인 이론과 리서치
• 그림으로 알아보는 컴퓨터 아이콘의 역사

  2019-03-02 디자인 이론과 리서치
• 미니멀리즘이 무엇인지 보여주는 32장의 사진

  2019-03-02 디자인 트렌드와 문화
• 웹디자이너가 개발자와 협업하기 위해 체크해야 할 사항들

  2019-03-02 디자인 이론과 리서치
• ico 파일 포토샵에서 열기, ico 패키지 파일 만들기, ico 편집 프로그램 소개, ico 비트 수 설정하기

  2019-03-02 아이콘 디자인
• 카드 UI디자인 하는 법 파헤치기

  2019-03-02 디자인 이론과 리서치
• 좋은 인터페이스 디자인(UI디자인)의 8가지 법칙

  2019-03-02 디자인 이론과 리서치
• UI디자인 패턴 파악에 도움을 주는 10개의 사이트

  2019-03-02 디자인 이론과 리서치
• 무료 UX 및 쇼핑몰 관련 플랫+라인 아이콘 세트 (83개 아이콘, AI, EPS, PNG, SVG)

  2019-03-02 디자인 리소스
• 모질라 재단의 새로운 로고디자인과 인터넷 공개 투표

  2019-03-02 디자인 케이스스터디
• 팬톤의 새로운 디자인 어플리케이션 출시 '팬톤 스튜디오'

  2019-03-02 디자인 케이스스터디
• 2016년의 웹디자인 & UI디자인 트렌드 7가지

  2019-03-02 디자인 이론과 리서치
• 웹디자인(HTMl/CSS/JS)을 온라인으로 배우는 방법 소개 (2016년 기준)

  2019-03-02 디자인 이론과 리서치
• 디지털복고주의 디자인? 인스타그램이 윈도우 95 시절에 등장했다면?

  2019-03-02 디자인 케이스스터디
• 마스터카드의 새로운 브랜드 로고 디자인

  2019-03-02 디자인 케이스스터디
• 갤럭시S6 목업 템플릿 13종 (PSD, AI)

  2019-03-02 디자인 리소스
• 올림픽 스포츠 아이콘 세트 (45개, EPS, AI, PDF, PNG, SVG)

  2019-03-02 디자인 리소스
• Jekyll과 Github Pages를 이용해서 간편하게 블로그 구축하기

  2019-03-02 Jekyll
• 웹호스팅 관련 정보알아보기 (국내/해외)

  2019-03-02 웹서버
• 웹디자인을 쉽게 해줄 7가지 폰트아이콘 소개

  2019-03-02 아이콘 디자인
• 웹디자인에 팬톤 컬러 적용을 위해 활용 가능한 웹사이트 소개

  2019-03-02 색상과 디스플레이
• 무료 웹 CSS 코드 제네레이터 모음

  2019-03-02 CSS
• MS의 새로운 메트로 UI, Fluent Design System

  2019-03-02 디자인 케이스스터디
• 디터람스의 '좋은 디자인의 10가지 원칙'

  2019-03-02 디자인 이론과 리서치
• 애플디자인어워드 2017년 수상작 공개 (Apple Design Awards 2017)

  2019-03-02 디자인 케이스스터디
• 사용자를 사로잡는 B2B 소프트웨어를 디자인하는 4가지 방법

  2019-03-02 디자인 이론과 리서치
• 모니터 컬러 캘리브레이션 웹에서 약식으로 하기

  2019-03-02 색상과 디스플레이
• 펭귄랜덤하우스의 하위 브랜드인 'Ebury'의 새로운 BI디자인

  2019-03-02 디자인 케이스스터디
• 포토샵 VS 스케치, 스케치에서만 할 수 있는 5가지 기능

  2019-03-02 스케치
• 일러스트레이터에서 픽셀 아이콘을 잘 만드는 8가지 방법 소개

  2019-03-02 아이콘 디자인
• 유튜브의 새로운 BI디자인

  2018-03-24 디자인 케이스스터디

No matching posts