전체 글26 [UX UI Project] 앱 디자인 기획 - 스토리보드에 대하여 + AI 활용하기 앱 기획을 시각화하여 보여주는 첫 단추, 스토리보드앱 제작 과정에서 스토리보드(Storyboard)는 추상적인 아이디어를 눈에 보이는 구체적인 상황 설정과 함께 스마트폰 화면으로 전환하는 첫 단추 역할을 한다. 현재 진행 중인 과제 프로젝트를 진행하며 구직 관리 앱 기획을 구체화하는 현시점에서, 스토리보드의 위치와 역할, 그리고 제작 방식들을 논리적인 근거를 바탕으로 단계별로 정리해 보고 내가 사용한 툴도 같이 설명하려고 한다. 1. 앱 제작 단계에서 스토리보드의 위치앱 개발의 전체 라이프사이클을 순서대로 나열하고 스토리보드는 기획(1~2단계)과 본격적인 시각 디자인 및 개발(4~5단계)을 이어주는 핵심적인 다리 역할을 한다. 1단계: 아이디어 도출 및 UX 리서치 (사용자 pain 포인트 분석)2단계.. 2026. 3. 23. [Web Design] 반응형 웹의 핵심: 미디어 쿼리와 정교한 레이아웃 설계법 고정된 디자인에서 흐르는 디자인으로디자인 원칙(Design Principles) 수업에서 시각적 계층 구조의 중요성을 배웠다면, 웹 수업에서는 그 구조가 다양한 기기에서 어떻게 유지되어야 하는지를 배운다. 과거의 웹이 데스크톱이라는 고정된 캔버스에 맞춰졌다면, 현대의 웹은 스마트폰부터 대형 모니터까지 유연하게 대응해야 한다. 이를 가능하게 하는 것이 바로 반응형 웹 디자인(Responsive Web Design)이며, 그 중심에는 미디어 쿼리가 있다.1. 미디어 쿼리(@media): 화면 크기에 따른 스타일의 변주미디어 쿼리는 브라우저에게 현재 화면의 상태를 묻고, 그 조건에 맞는 CSS를 적용하는 논리적인 장치이다. 기본 구문과 중단점(Breakpoint)의 의미를 살펴보자. @media screen .. 2026. 3. 19. [UX UI Project] UX 기획 예시 - 문제를 해결하는 앱 기획과 시장 분석 실제 수업 내에서 진행하는 UX 기획 엿보기비즈니스 과목과 디자인 원리 과목에서 같이 협업하여 진행하고 있는 앱 디자인 과제가 있다. 단계별로 어떻게 앱을 디자인해 나가는지 같이 공유하여 UX 실무와 UI 제작 과정까지 같이 살펴보려고 한다. 다만 학교 수업 과제이기 때문에 주어진 분야가 이미 있었기에 실제로 전체 시장까지 모두 파악해 가며 진행하지는 않았다. 그리고 팀 과제이기 때문에 비주얼 적으로 다소 통일되어 있지 않는 부분이 있다는 점도 양해하기를 바란다. 구직자가 겪는 파편화된 정보의 혼란수많은 기업에 이력서를 넣다 보면 필연적으로 관리의 혼란(Chaos of management)을 겪게 된다. 어느 날 갑작스럽게 걸려 온 인사 담당자의 전화에, 내가 어떤 직무로 무슨 내용을 적어 지원했는지 .. 2026. 3. 18. [Web Design] 디자인이 직접 구현되는 언어: CSS 기초 용어 완벽 정리 웹의 뼈대와 옷, HTML과 CSS의 관계웹 사이트를 만드는 과정은 건물을 짓는 것과 비슷하다. HTML이 건물의 구조를 잡는 뼈대라면, CSS(Cascading Style Sheets)는 그 건물에 색을 칠하고 조명을 다는 인테리어 작업이다. 인터랙티브 미디어 디자인을 전공하며 시각적인 결과물을 만들어낼 때, CSS는 디자이너의 의도를 웹 브라우저에 투영하는 가장 강력한 도구가 된다. 수업 시간에 배운 내용을 바탕으로 CSS의 가장 기본적인 구성 요소와 용어들을 다시 한번 자세히 짚어보려고 한다. 1. CSS 구문의 기본 구조 (Rule Set)CSS는 브라우저에게 스타일 규칙을 전달하는 일종의 매뉴얼 북 같은 개념이다. 하나의 규칙은 다음과 같은 요소들로 구성된다. 이러한 요소들이 모여 하나의 스타.. 2026. 3. 10. 이전 1 2 3 4 ··· 7 다음
