오늘 오랜만에 멜 로빈스 ~~
와닿아서 메모하면서 들었다 ㅎ_ㅎ
🎥 멜로빈스 영상 메모
지금의 나 = 과거의 선택들의 결과
➡️ 오늘의 한 결정이 인생 전체를 바꿀 수 있다
답답하거나 무기력하다면 잘못된 길을 걷고 있는 신호일 수 있음!
이러한 직관을 믿고 결정을 내려야 함
사람들은 종종 선택 후의 ‘결과’를 감당하는 것이 두려워 회피하기도 하지만
미루는 것도 하나의 결정이므로, 나(내가 경험해온 것들의 축적인)를 믿고 나아가야한다!
그럼 오늘도 나아가보겠습니다 💕
HTML 태그
HTML은 HyperText Markup Language 이다.
여기서 ‼️ 하이퍼텍스트(Hypertext)란?
: 하이퍼링크(링크)를 포함한 텍스트로, 문서 간 자유로운 이동이 가능한 웹의 핵심 개념이다.
태그 구성요소
<p class="text">Hello World</p>
└속성명 └속성값 └종료태그
- 태그명(tag name) → p, div, h1 등
- 속성명(attribute) → class, id, src 등
- 속성값(value) → "title", "box", "link" 등
- 종료태그(closing tag) →
</p>처럼 마무리
웹 접근성(Web Accessibility)이란?
장애인·비장애인 모두가 불편 없이 웹을 사용할 수 있도록 설계되어야 하는 것이다.
예시)
- 이미지는 alt 텍스트 제공해야 함
- 버튼은 명확한 라벨(label) 필요
- 색으로만 정보를 전달하면 안 됨
- 키보드만으로도 조작 가능해야 함
우리가 HTML 태그 내 속성과 속성값을 지정하는 이유이기도 하다!
예시 태그
글꼴 태그 <b> &<strong> ,<i>&<em> 의 차이
각각의 태그는 시각적으로 비슷하지만 기능 차원에서 차이가 있다.
-
시각적 강조(단순 굵게/기울임)
<b>: 굵게(Bold) — 의미 부여 없음
<i>: 기울임(Italic) — 의미 부여 없음 -
의미적 강조(semantic 강조)
<strong>: 중요함(중요도 강조)
<em>: 문맥에서 강조(강조점)
스크린리더에서는 strong과 em 태그를 실제 강조된 톤으로 읽어줘서 웹 접근성에 매우 중요한 차이이다.
오늘 실습에서 배운 태그들을 정리해보았다.
HTML 기본 태그 정리
인라인 요소 vs 블록 요소
| 구분 | 설명 | 대표 태그 |
|---|---|---|
| 인라인 요소 | 줄바꿈 없이 텍스트 흐름 속에 배치 | <span>, <a>, <em> |
| 블록 요소 | 한 줄 전체 차지하며 자동 줄바꿈 | <div>, <p>, <section> |
링크 태그
| 태그/속성 | 설명 |
|---|---|
| <a> | 하이퍼링크 생성 태그 |
| href | 이동할 URL 지정 |
| class / id | CSS 및 JS에서 요소 식별 |
테이블 관련 태그
| 태그 | 설명 |
|---|---|
| <table> | 표 전체 영역 |
| <tr> | 표의 행(Row) |
| <th> | 표의 헤더 셀 |
| <td> | 표 데이터 셀 |
과제
오늘 과제는 아티클 2가지를 읽고 정리하는 것과 Progress 디자인이었다.
기사에서는 지난 AI 시간과 디자인과 심리학 챕터에서 공부했던 부분을 다시 복습할 수 있어서 좋았다 :)
1️⃣ 아티클 정리
AI 시대의 디자인 미래: 창의성은 인간의 것
주요 내용 요약
- 디자이너들의 불안: ChatGPT 같은 AI 도구가 퍼지면서 그래픽 디자인 학생들이 “10년 뒤에 일자리가 사라질까” 걱정하고 중퇴를 고민하는 경우가 늘었다. AI가 디자인 프로세스를 대체할 수 있다는 공포 때문.
- AI의 한계와 창의성의 인간성: AI는 디자인을 만들어낼 수 있지만, 결국 인간이 정의한 창의성을 흉내내는 수준이다. 진짜 창의성은 인간의 신경전달물질과 특이한 표현에서 나온다. AI는 그런 인간성을 따라잡지 못한다. “진정한 재능은 기계가 절대 가질 수 없는 인간 정신에서 나온다”
- 역사적 관점: 1984년 매킨토시 도입, 구텐베르크 인쇄술 등 과거 기술 혁신 때도 디자인 산업은 변했지만 디자이너의 창의성은 사라지지 않았다. 오히려 새 세대가 기술을 익히고 리더로 올라섰다. 1980년대 디지털화도 디자이너 수를 줄이지 않고 오히려 수요를 폭발시켰다.
- 미래 전망과 기회: AI는 디자인을 바꾸지만 인간 중심 창의성은 그대로 남는다. Chief Creativity Officer, Chief Strategy Officer 같은 새로운 직함이 생기고 직업이 진화할 전망. 디자이너는 AI를 도구로 삼아 실험하고 적응해야 한다.
결론
디자인, 산업, 예술은 AI 시대에도 사라지지 않는다. AI는 보조 도구일 뿐, 인간의 자유로운 사고와 행동을 대체할 수 없다. 결국 “창의성은 인간의 것”이라는 메시지. 디자이너들은 기술을 받아들이고 창의적 모험을 시작해야 한다.
좋은 비주얼 디자인의 8가지 핵심 원칙
주요 내용 요약
-
좋은 비주얼 디자인의 목적: 단순히 예뻐 보이려고 하는 게 아니다.
정보를 더 빠르고 정확하게 이해하게 만들고, 사용자 경험을 향상시키는 게 진짜 목표이다. -
8가지 핵심 원칙
- 일관성 (Consistency)
색상, 타이포그래피, 아이콘 스타일이 통일되어 있어야 사용자가 혼란 없이 바로 이해한다. - 계층 구조 (Hierarchy)
중요한 요소를 크기, 색, 위치로 강조해 시선이 자연스럽게 흐르게 만든다. - 단순함 (Simplicity)
불필요한 장식을 없애고 핵심 정보만 남긴다. - 대조 (Contrast)
색상·명도·크기 차이를 통해 요소를 확실히 구분한다. - 정렬 (Alignment)
모든 요소가 보이지 않는 그리드에 맞춰져 있어야 깔끔하고 전문적으로 보인다.
- 근접성 (Proximity)
관련된 항목은 서로 가깝게, 관련 없는 항목은 멀리 배치한다. 자연스러운 그룹화가 생긴다. - 색상 (Color)
색은 감정과 의미를 전달한다. 너무 많이 쓰면 혼란, 적절히 쓰면 강력한 도구.
- 타이포그래피 (Typography)
폰트 선택, 자간, 행간, 크기가 읽기 편하고 계층을 드러내야 한다.
- 일관성 (Consistency)
결론
이 8가지 원칙은 시대와 트렌드를 초월한다. 예쁜 디자인과 좋은 디자인은 다르다.
좋은 디자인은 사용자가 “아, 이게 이렇게 되는구나” 하고 바로 이해하게 만드는 디자인이다.
2️⃣ 진행 정도(Progress) UI 디자인
과제목표:
무엇이 ‘진행 중’인지, 그리고 그것이 어떻게 작동하는지 설명하세요.
예를 들어, 영화의 남은 시간을 보여주는 진행 바(progress bar) 일 수도 있고, 책을 읽었을 때 얼마나 읽었는지 계산하는 기능일 수도 있습니다. 원하는 어떤 방식이든 상관없습니다.
작업과정
1) 레퍼런스 수집
레퍼런스를 수집하면서, 다양한 프로그레스 UI를 확인하고, 그 중 플로우 상
가장 알맞는 스타일을 선택하였다.
2) 프로그레스 작업
각각 어플 세팅용 서베이, 로딩페이지에서 사용하였다.
3) 프로토타입
회고
HTML 복습하니까 기억이 새록새록 재미있었다 :>
사실 실습이라는게 별다른 레이아웃 없이 태그를 적고 어떻게 나타나는지 보는 정도여서 즐거운 걸지도?!
프론트엔드 지식도 하나의 내 소중한 경험이자 자산이었는데, 잊고 살았던 것 같다
협업에 중요한 요소이니 틈틈히 공부하며 잊지 않도록 해야겠다.
또 웹 접근성의 중요성을 배웠다. 이미지 설명이며, 타입 설명이며 귀찮을 수 있지만
모두가 사용가능한 웹을 위해서, 코드 가독성을 위해서도 중요하단 말씀 !
X에서 제미나이를 이용하여 웹/앱을 제작하는 것을 보았다.
코딩은 물론 디자인까지 가능했다. 그치만 어도비의 기사처럼, AI는 디자인을 바꾸지만 인간 중심 창의성은 그대로 남는다. 나도 이점을 기억하면서, AI를 도구로 삼아 실험하고 적응해 나가야한다 ‼️
#웹도 디자인도 AI 공부도 꾸준하게
