본문 바로가기

TiL

[UX/UI 디자인] 22. UX 디자인 원칙 / 포폴 다듬어 보기 📅 2026.05.15(금) - 22일차UX 디자인 원칙UX 디자인의 핵심은 심미성을 넘어 사용자의 인지 에너지를 아껴주는 설계에 있음! 화면을 예쁘게 만드는 것을 넘어, 사용자가 덜 헷갈리고, 덜 실수하고, 더 빠르게 목적을 달성하게 만드는 기준을 이해하는 것이 목표. 1. UX의 본질: User Experience vs. User Exploitation디자인의 목적이 '사용자의 문제 해결'인지, '기업의 이익 독점'인지에 따라 결과물은 완전히 달라짐.Dark Pattern (사용자 착취): 서비스 제공자의 단지 지표(매출, 클릭률)를 높이기 위해 고의적으로 사용자의 불편이나 불필요한 상호작용을 유도뉴스 제목 클릭했을 때 바로 기사가 나오지 않고, 중간에 한 페이지를 더 거치도록 한 후 다른 기사와 .. 더보기
[UX/UI 디자인] 20. Design Library - Apple HIG / 대한민국 정부 KRDS 📅 2026.05.13(수) - 20일차요즘 상황은 기획자/디자이너/개발자 삼자대면 눈치게임 상태 (Mexican standoff) / 긴밀한 협업과 소통이 중요[실습] 디자인 시스템 (Apple HIG나 KRDS)가져온 후, default / disabled 등 시나리오에 따라 잘 활용해보기![실습] Library를 publish해서 팀원끼리 공유할 수도 있음. (회사에서 그렇게 함)[실습] 피그마 디자인 시스템 파일을 그대로 사용하지 말고, open한 후 복사해서 사용할 것을 권장함!1. 주요 디자인 가이드라인Apple Human Interface Guidelines (HIG): Apple에서 제공하는 가이드라인KRDS (K-Design System): 대한민국 정부에서 제공하는 공공서비스 디자인 .. 더보기
[UX/UI 디자인] 19. Design Library & Design System 📅 2026.05.12(화) - 19일차디자인 생태계의 중심: Figma Community와 UI Kits슬롯(Slot) 시스템 활용, 유연한 컴포넌트 구조로 시스템적 조립 구축 ➔ 복잡함 down 유연함 up. Slot 기능을 통해 수백 개의 Variant를 줄이고, React의 children 개념을 디자인에 도입하여 확장 가능한 컴포넌트 아키텍처 완성. ➔ 프로덕트의 생산성 완성 & 지속 가능한 디자인 시스템 설계 전 세계 디자이너의 지식과 도구가 순환되는 Figma Community 활용 ➔ 업계 표준 습득UI Kit은 디자인의 일관성을 유지하는 도구함. 색상, 서체, 컴포넌트가 코드와 1:1로 대응 ➔ 디자이너와 개발자 협업 언어01. Figma Community: 학습과 생산성의 허브단순한 .. 더보기
[UX/UI 디자인] 18. React 기초 / AI 활용한 앱 기획 디자인 MVP 실습 📅 2026.05.11(월) - 18일차UI/UX 디자이너를 위한 React!React: 화면을 컴포넌트라는 레고 블록으로 나누고, 데이터(상태)가 바뀌면 화면을 자동으로 다시 그려주는 JavaScript UI 라이브러리. Figma의 컴포넌트 시스템과 코드를 1:1로 매칭하여 설계 -> 디자인과 개발의 싱크.페이지 중심에서 상태 중심. 컴포넌트 기반 설계.코딩을 많이 안하더라도 알아두면 좋은 내용: 느낌표를 앞에 놓고 변수를 넣으면, 그 변 수를 뒤집는다는 뜻임jQuery처럼 요소를 직접 조작하는 대신, 상태를 선언하고 규칙을 정해두면 시스템이 알아서 화면을 바꾸는 선언적 UI 설계.기술 이해의 힘: 컴포넌트와 상태를 이해한 디자이너는 개발자와 동일한 언어로 대화할 수 있음1. React 핵심 개념개.. 더보기
[UX/UI 디자인] 15. 데이터베이스 & 스토리지 / 공공데이터 활용 / Git 📅 2026.05.06(수) - 15일차데이터베이스와 스토리지의 진화File에서 Supabase까지. Supbase와 바이브 코딩.데이터 저장 방식의 역사적 흐름을 통해 현대적인 통합 솔루션이 추구하는 방향성 이해. 단순한 기록을 넘어 실시간 동기화와 보안이 결합된 데이터 생태계.데이터베이스는 서비스의 심장/기억 장치. 기술이 복잡한 인프라 관리를 대신, 개발자는 비즈니스 로직과 제품의 본질에 집중.SQL의 강력함과 클라우드의 유연함을 결합한 솔루션을 통해 아이디어를 빠르게 현실로 구현.01. DB의 시작: 파일 관리의 한계구조화되지 않은 단순 파일 저장 시대가 직면했던 문제점.데이터 중복 및 불일치: 같은 정보가 여러 곳에 중복 저장되어 정합성이 깨짐.검색 효율성 최악: 대용량 데이터 검색 시 성능이.. 더보기
[UX/UI 디자인] 14. 데이터베이스 - GCP React Deployment 📅 2026.04.30(목) - 14일차GCP 클라우드 배포GCP(Google Cloud Platform) 클라우드 배포와 Nginx 역방향 프록시 ➔ React 앱을 세상에 공개하는 설계단순히 내 컴퓨터에서만 보이던 결과물을 전 세계 사용자가 접속 가능한 클라우드 환경으로 이전하는 과정. 구글의 컴퓨팅 자원을 빌려 안정적인 서비스 인프라 구축.배포는 단순한 파일 전송이 아닌, 사용자가 들어올 '문(Port)'을 열고 '길(DNS)'을 닦는 과정.Nginx가 앞에서 안내데스크 역할을 수행하며 포트로 들어온 손님을 연결.웹서비스 배포 아키텍쳐 이해하기 1. 클라우드 환경 구축 (Compute Engine)구글의 컴퓨터 한 대를 빌려 나만의 가상 서버(VM: Virtual Machine)를 마련하는 과정... 더보기
[UX/UI 디자인] 13. 백엔드와 데이터베이스 & SQL 📅 2026.04.29(수) - 13일차백엔드와 데이터베이스, UX 연결 ➔ 서비스 신뢰를 구축하는 데이터 설계웹 서비스의 두뇌와 근육을 설계하는 백엔드 개발의 핵심 원리와 DB의 세계. 보이지 않는 곳에서 작동하는 복잡한 질서.백엔드는 신뢰를 만드는 과정. 화면 뒤에서 데이터가 안전하게 흐르고 복잡한 계산이 오류 없이 처리될 때 완벽한 UX 완성.'사용자를 멈추지 않도록!' 이 원칙이 데이터 기반 기획과 디자인의 핵심.http://localhost:5174/portfolio1. 웹 서비스의 기초: 프론트엔드와 백엔드웹 서비스의 구조를 식당 운영에 비유. → frontend-backend를 회전 스시로 비유해본다면, 당일날 상황을 봐가면서 (날씨, 그날 오는 사람들의 분위기, 나이대) 어떤 메뉴를 추가.. 더보기
[UX/UI 디자인] 12. 웹 프론트엔드 📅 2026.04.28(화) - 12일차웹 프론트엔드: 사용자 경험의 최전방프론트엔드 아키텍처와 CLI(Command Line Interface) ➔ 시스템의 원리를 이해하는 디자이너의 생존 전략UX/UI 디자이너로서 나중에 발생할 오류의 원인을 파악하고 직접 수정하기 위해 프론트엔드의 원리 등의 개발 환경(CLI, Git) 을 이해할 필요가 있음. 사용자와 웹 디지털 프로덕트 사이의 최전방을 설계프론트엔드는 디자인을 코드로 변경하여 실제 작동하게 하는 과정. 화면 뒤의 렌더링 패러다임을 이해하고 상태를 관리할 때 비로소 데이터와 UX의 연결 완성.1. 웹 프론트엔드: 사용자와의 최전방웹 서비스의 구조를 이해하기 위한 기초. 사용자와 만나는 인터페이스의 구조와 변천사.앱과 웹의 구분: 각 환경에 맞는 .. 더보기

티스토리툴바