january27 님의 블로그

안뇽하세요  💬 [스토리텔링: 퍼프 앱을 중심으로 한 대화]민지:"너네 혹시 퍼프 써봤어? 요즘 AI가 스타일 골라주는 중고 패션 앱인데, 완전 내 스타일 찰떡으로 골라줘!"수연:"중고...? 나 그런 거 좀 번거롭고 이상한 거 올까 봐 안 써봤는데. 괜찮아?"민지:"아니야, 퍼프는 큐레이션 진짜 잘 돼 있어. 브랜드랑 상태 다 체크해서 올라오고, AI가 내가 자주 보는 스타일 위주로 추천해줘서 옷 고르기가 너무 편해."재훈:"진짜? 나는 쇼핑 자체가 귀찮아서 아예 관심 없었는데... 시간 아낄 수 있으면 써볼 만하네."수연:"그럼 너네는 앱 켜면 뭐부터 봐? 나는 뭐 입고 출근해야 할지도 모르겠어 요즘…"민지:"나는 트렌드를 한눈에 섹션 먼저 봐. 거기서 지금 인기 있는 코디나 아이템 쭉 나오니까 한..

오늘의 실습과제:UI화면 제작 또는 사이트 선정 UI용 목업 리서치 발표 PPT레퍼런스 리서치 발표 PPT 표지 작업 포트폴리오 검색 사이트 https://notefolio.net/ https://www.behance.net/ https://kr.pinterest.com/   Search Projects :: Photos, videos, logos, illustrations and branding :: Behance www.behance.net https://uibowl.io/ Search Projects :: Photos, videos, logos, illustrations and branding :: Behance www.behance.net  노트폴리오 :: 국내 최대 창작자/디자이너 플랫폼 by ..

목차 좋은 웹사이트 디자인이란?예제 1: 좋은 디자인 구조 분석예제 2: 아쉬운 구조 예 분석실무 디자이너의 HTML/CSS 활용 사례“여러분이 최근에 가장 인상 깊었던 웹사이트는 어떤 사이트였나요?” 무엇이 좋았나요? (예: 보기 편하다, 간결하다, 깔끔하다 등)그 웹사이트는 왜 그렇게 느껴졌을까요?👀 여기서 “디자인”이라는 것은 겉모습뿐만 아니라 구조, 흐름, 인터랙션의 총합이라는 것을 강조합니다. 좋은 디자인의 핵심 3요소정보 구조의 명확함 (시멘틱 구조)디자인 시스템의 일관성 (클래스 활용)사용자 중심의 레이아웃과 타이포그래피👀 예시 분석 실습CSS Zen Garden하나의 HTML로 다양한 디자인 적용 → 구조는 유지, 스타일만 다름시멘틱 구조 + 깔끔한 CSS 분리의 정석 출처 :  CSS..

클래스 활용법 & 그룹 스타일링클래스 선택자HTML에서 여러 요소에 같은 스타일을 반복해서 적용하고 싶을 때 사용하는 게 바로 클래스 선택자(.class)입니다.📌 기본 사용법html내용css.card {  background: #fff;  padding: 20px;  border-radius: 12px;}✅ 클래스의 특징 장점설명✅ 재사용 가능한 번 정의한 스타일을 여러 요소에 반복 적용✅ 코드 분리 가능HTML 구조와 CSS 스타일을 명확히 구분 가능✅ 유지보수 쉬움스타일만 바꿔도 전체 디자인 일괄 수정 가능클래스 사용 실전 예시html소개메뉴 css.section-title {  font-size: 20px;  color: #444;  margin-bottom: 12px;} 🧠 왜 좋을까?sec..

CSS란? ✅ CSS란?CSS는 Cascading Style Sheets의 약자로, 우리말로 번역하면 ‘겹쳐지는 스타일 시트’, 혹은 ‘계단식 스타일 시트’ 정도로 해석할 수 있어요.하지만 너무 어려운 말처럼 들릴 필요는 없습니다. 우리가 실무에서 이해해야 할 건 아주 간단합니다:HTML이 웹페이지의 뼈대라면, CSS는 그 위에 입히는 디자인입니다.예시로 설명해볼게요 병원에 갔는데 구조만 있는 건물이라고 생각해보세요.벽도 흰색, 간판도 없음, 복도마다 똑같은 문만 달랑… 아무런 정보가 없어요.그럼 어떤 느낌이 들까요?어디가 입구인지도 모르겠고,어디로 가야 할지 혼란스럽고,병원에 대한 신뢰감도 떨어지겠죠?이처럼 구조만 있고 스타일이 없는 웹사이트는 사용자에게도 비슷한 느낌을 줍니다. CSS의 역할 요소예시..

시멘틱 태그 & 웹페이지 구조 설계✅ 시멘틱 태그란?HTML을 처음 배울 때 로 모든 구역을 나눴던 기억 있으시죠? 예를 들어 이런 코드입니다✅ 시멘틱 태그란?HTML을 처음 배울 때 로 모든 구역을 나눴던 기억 있으시죠? 예를 들어 이런 코드입니다:로고메뉴본문푸터이렇게 div만 쓰면 컴퓨터 입장에서는 이게 무슨 영역인지 알 수 없어요. “디자인은 잘 보이지만, 의미는 알 수 없는 구조”가 되는 거죠.이 문제를 해결하기 위해 등장한 것이 시멘틱(Semantic) 태그입니다. Semantic은 ‘의미 있는’이라는 뜻이죠.✅ 시멘틱 태그란? 단순히 보이는 구조가 아니라, 각 영역이 어떤 의미를 가지는지를 브라우저와 개발자 모두에게 명확하게 설명해주는 태그입니다.📌 시멘틱 태그 예시 태그의미실제 예시 설명 ..

HTML이란? 디자이너가 알아야 하는 이유 HTML이란? 출처 : https://www.devkuma.com/docs/html/basic-structure/  먼저, HTML은 "HyperText Markup Language"의 약자입니다.단어만 들으면 어려워 보이지만, 간단히 말하면 웹페이지를 만들기 위한 기본 구조 언어예요.HTML의 특징HTML은 웹 페이지를 만들 때 사용하는 마크업 언어로, 태그를 사용해 문서나 데이터의 구조를 명시합니다 HTML을 사용하면 텍스트, 이미지 등을 특정한 방식으로 표시할 수 있습니다 HTML 요소는 시작 태그(opening tag), 글자, 내용, 종료 태그(closing tag)로 이루어져 있습니다 HTML 요소의 속성은 시작 태그 안에 위치하며, 스타일 및 id부..

✅ 1. 협업을 위한 기본 소통 능력 “개발자와 일할 일이 없다”고 생각하는 디자이너는 거의 없습니다. 웹, 앱, 그리고 디지털 콘텐츠를 만드는 거의 모든 과정에는 개발자와의 협업이 포함됩니다.하지만 디자인을 아무리 잘해도, 개발자의 입장에서 이해할 수 없는 표현이나 설계가 들어가면 소통 오류가 발생하죠.예를 들어,디자이너가 “이 버튼은 hover 되면 물결 애니메이션으로 반짝이게 해주세요”개발자는 “이게 구현 가능하긴 한데... 성능에 부담되고 반응 속도도 떨어질 것 같은데요?”이런 상황에서 디자이너가 기본적인 개발 지식이 있다면?👉 "아, CSS로 간단한 transition 정도로 넣으면 괜찮겠죠?" 이렇게 말할 수 있고, 개발자는 바로 이해하며 효율적인 작업이 가능합니다.디자이너가 개발 언어를 잘..

월요일 안녕~? 못한다.내주말 어디갔어ㅠㅠ?   딱히 실행 할생각이 없었는데ㅋㅋㅋㅋ일요일 저녁에 갑자기 언니의 부탁으로 지브리스튜디오 이미지 생성한 썰 ㅎㅎ 짜란다~              저도 한번 해보았읍니다.지브리 복길아~ 이모가 해준거야!      재밌게놀다가 오늘 아침에 본 뉴스내용https://www.kmib.co.kr/article/view.asp?arcid=1743318983&code=11151400&cp=nv 오픈AI ‘지브리풍’ 이미지 열풍에 저작권 침해 논란 커져오픈AI가 최근 출시한 ‘챗GPT-4o 이미지 제네레이션’ 모델이 폭발적인 인기를 끌면서 인공지능(AI)이 생성한 이미지의 저작권 침해 문제가 도마 위에 올랐다.www.kmib.co.kr이미지생성 그만 만들어달라고 글올렸다는데..

오늘만 하면 주말~(1) 디자인 프로세스란? UX/UI 디자인은 단순히 화면을 예쁘게 만드는 것이 아니라, 사용자의 요구를 반영하고, 편리한 인터페이스를 제공하여 최적의 경험을 만드는 체계적인 과정이다.즉, 디자인을 통해 사용자의 문제를 해결하고, 제품이나 서비스가 더욱 효과적으로 작동하도록 만드는 것이다. 1️⃣ 문제 정의 (Problem Definition)디자인을 시작하기 전에 먼저 해결해야 할 문제를 정의한다.사용자와 비즈니스의 요구 사항을 분석하여 디자인의 목표를 설정한다.예: "사용자들이 앱에서 원하는 제품을 쉽게 찾지 못하는 문제가 있다." 2️⃣ UX 리서치 (UX Research)사용자 행동과 시장 트렌드를 조사하여 UX/UI 디자인 방향을 설정한다.데이터 기반으로 사용자 페르소나를 설정..