난이도: 입문
▪ 만들 것 4차시 와이어프레임·스토리보드에 톤&매너를 입혀 마감한 디자인과, 그것을 옮긴, 웹표준을 지킨 반응형 바닐라 홈 화면(index.html·style.css·script.js 세 파일). ▪ 왜 하는가 설계까지 끝냈다면, 마지막은 화면을 실제로 보이게 만들고 코드로 옮기는 일이다. 와이어프레임은 골조였고, 여기에 2차시 톤&매너(색·글꼴)를 입히면 디자인이 된다. 그 디자인을 생성형 AI 도구로 코드로 옮기면, 브라우저에서 도는 웹이 된다. 기획부터 구현까지 한 줄로 … 더 읽기
▪ 만들 것 사이트에 담을 내용을 비슷한 것끼리 묶고 메뉴 이름을 붙여, 홈 아래 대메뉴와 하위 메뉴를 계층으로 그린 정보구조도 1건. ▪ 왜 하는가 콘셉트와 톤&매너로 방향을 정했다면, 다음은 사이트에 무엇을 어떻게 담을지 골대를 세우는 일이다. 정보구조는 집을 지을 때 먼저 그리는 설계도면과 같다. 내용을 아무렇게나 나열하면 사용자가 원하는 것을 찾지 못한다. 비슷한 내용을 묶고 … 더 읽기
1. 기획은 왜 필요한가 눈에 보이는 서비스와 화면은 결과물일 뿐이다. 그 아래에는 보이지 않는 준비 과정이 있다. 빙산: 수면 위에 떠 있는 부분이 서비스·디자인이라면, 그것을 떠받치는 수면 아래의 큰 덩어리가 기획이다. 집짓기: 집을 지으려면 영향을 주는 여러 요소와 변수를 미리 꼼꼼히 점검하고 계획해야 한다. 기획 없이 만들면 결과물이 흔들린다. 무엇을, 왜, 어떻게 할지를 먼저 정해 … 더 읽기
1. Flow Music 한눈에 보기 https://www.flowmusic.app/ 1.1 어떤 서비스인가 Flow Music은 구글 랩스(Google Labs)가 2026년 4월에 공개한 생성형 AI 음악 플랫폼이다. Riffusion → Producer.ai로 이어져 온 서비스가 Google Flow 제품군에 합류하면서 Flow Music이라는 이름으로 정착했다. 음악 생성 모델 Lyria 3과 영상 생성 모델 Veo를 한 화면 안에 묶어, 텍스트 한 줄로 곡과 뮤직비디오까지 만들어 낸다. … 더 읽기
윈도우 파일 탐색기(File Explorer, 파일 익스플로러)에서 기본적으로 숨겨져 있는 파일과 폴더를 화면에 표시하도록 설정하는 방법을 다룬다. 소프트웨어 개발 환경에서는 프로젝트 설정 파일이나 버전 관리 디렉터리가 마침표(.)로 시작하는 숨김 속성을 지니는 경우가 많다. 이러한 구성 파일에 정상적으로 접근하고 편집하려면 탐색기의 폴더 옵션을 수정해야 한다. 윈도우 탐색기의 숨김파일 보는법 운영체제는 시스템 운영에 필수적인 중요 파일이 사용자의 실수로 … 더 읽기
▪ 만들 것 800×800px 격자로 잡은 와이어프레임 1장 (헤더·본문·사이드바·푸터) ▪ 미리 알아두기 그리드(격자)란 가로선과 세로선이 일정한 간격으로 교차해 만들어진 보조선 구조. 도형을 화면에 합리적으로 배치하기 위한 뼈대다. 사전적 정의: 일정한 간격으로 배치된 수평선과 수직선의 그물망 (지도에서 위치를 찾는 격자처럼). 그래픽 디자인 맥락: 직선이나 곡선의 안내선이 교차해 만든 구조. 디자이너가 이미지·글자·문단 같은 그래픽 요소를 합리적이고 흡수하기 … 더 읽기
▪ 만들 것 빈 대지 (960×1500px, RGB) 1개 + 디자인 참고용 브라우저 윈도우 레이어 ▪ 미리 알아두기 표준 너비 960px 웹사이트는 다양한 화면 크기에서 보인다. 너무 좁으면 큰 화면에서 비어 보이고, 너무 넓으면 작은 화면에서 잘린다. 평균~대형 모니터를 쓰는 대다수 방문자에게 무리 없이 보이는 안전한 너비가 960px다. 100% 확대 비율 화면에 보이는 크기가 곧 웹에서 … 더 읽기
만들 것 월간 달력 1장 (148mm × 230mm) 예제 파일 달력 만들기 예제 미리 알아두기 정보의 계층 달력은 여러 정보를 한 화면에 담는다. 모든 정보가 같은 비중으로 보이면 무엇부터 봐야 할지 알 수 없다. 정보의 계층은 정보의 중요도 순서를 말한다. 이 달력의 계층 구조 정보 중요도 영문 월 이름 (MAY) 1순위 – 가장 큼 일러스트 … 더 읽기
만들 것 5색 팔레트 1개 펜툴로 그린 로켓 일러스트 (5색으로 채색) 1개 예제 파일 배색표·로켓 예제 1. 서론 색은 감정을 자극하는 강력한 시각 도구다. 디자인의 성패를 결정짓는 핵심 요소이기도 하다. 이 글에서는 색상환, 색의 분류와 특성, 조화로운 배색법, 색상 모드 등 자신만의 팔레트를 만드는 데 필요한 기초 이론을 다룬다. 2. 색상환 색채 이론은 색을 섞는 … 더 읽기
AI 학습센터 제미나이CLI배우기 클로드 CODE 배우기 북마크 https://docs.google.com/spreadsheets/d/1jQwDHonj3LwphYSHgzCuIk3VRuatM3ivkO2n-zqjsT0/edit?gid=2116901876#gid=2116901876
