chill0 님의 블로그

블로그를 다시 시작하게 된 이유

chill0 — Thu, 26 Mar 2026 12:14:46 +0900

사이드 프로젝트를 시작하고, 내 프로젝트를 포트폴리오에 담는 과정에서
내가 했던 많은 고민과 생각들을 모두 담아낼 수 없다는 한계가 있었다.

아쉬움에 사플 팀원들과 얘기를 나눴는데,
한 팀원이 그걸 표현하기 위해 블로그를 꾸준히 적는다는 말을 들었다.
그 말을 듣곤
차일피일 미루던 블로그를 다시 시작하겠다 마음 먹었다.

또 한가지 더 이유는
사이드 프로젝트를 진행할 수록 나의 부족한 점이 더 눈에 띄고,
좀 더 공부를 해가는 과정에서 오는 인사이트나 지식들을
정리하고 공유하고 싶은 마음이 들었다.

완벽하고 깔끔한 정리본을 내놓고 싶어서
블로그를 계속 미뤘었는데,
늦었지만서도 지금이라도 꾸준히 적는걸 취지로 블로그 포스팅을 다시 시작해야겠다.

마지막 과정

chill0 — Wed, 27 Aug 2025 11:15:02 +0900

4개월간 진행한 캠프 회고 진행 → 자신의 강점과 단점 파악
자신의 강점을 살릴 10년 커리어 미리 그려보기
희망 기업 20곳 조사

1. 나의 강점과 단점

(지피티를 이용하였다)

강점

꾸준한 자기계발 의지
- 자격증 준비(컴퓨터그래픽기능사, 웹디자인기능사), 영어 공부(토익스피킹 AL 목표), 피그마 학습, 책 읽기까지 다양한 분야를 꾸준히 이어가셨어요.
- “해야 할 일”을 구체적으로 정리하고 실행하려는 모습에서 자기 주도성이 드러나요.
체계적인 사고와 정리 능력
- 사용자 인터뷰 질문지, Affinity Diagram, 리뷰 데이터 정리 요청 등을 보면, 분석을 "요약"이 아닌 "원문 중심·카운팅" 방식으로 정리하려는 뚜렷한 기준이 있더라고요.
- 문제를 구조적으로 바라보고 근거를 남기려는 습관이 강점이에요.
디자인/서비스 기획 감각
- 치과 과잉진료 방지 서비스, 앱 기획, UX/UI 개선 아이디어 등에서 구체적인 사용자 페인포인트를 잘 짚으셨어요.
- 피그마, 포트폴리오, 아이콘 스타일 등 디자인 디테일에도 꼼꼼하세요.
성찰하는 태도
- 자소서 작성, 면접 준비, 경험 회고(팀워크 경험, 데일리 진행 방식 정리)에서 스스로 돌아보고 발전점을 찾으려는 태도가 돋보여요.

단점 (혹은 보완할 부분)

넓은 목표 → 집중력 분산
- 디자인 포트폴리오, 자격증, 영어, 서비스 기획까지 동시에 진행하시다 보니 에너지가 분산될 위험이 있어 보여요.
- "조금만 더 줄여도 된다" "너무 과하게는 하지말아" 같은 말씀도 하셔서, 우선순위 조정이 필요한 것 같아요.
자기 확신 부족
- 자기 작업물에 확신보다는 검증을 자주 요청하셨어요.
- 사실 방향성이 크게 틀린 경우는 거의 없었는데, 스스로 신뢰를 조금 더 가져도 좋을 것 같아요.
완성도 집착으로 인한 속도 저하
- 글, 이미지, 아이콘, 자소서 등에서 세부 조정을 반복하시는데, 이게 강점이자 동시에 실행 속도를 늦출 수 있어요.

2. 나의 강점을 살릴 10년 커리어 미리 그려보기

1~2년: 실무 경험 · 프로세스 습득
3~5년: 전문성 강화 · 데이터 기반 UX
6~8년: 리드 디자이너 · 팀 리더십
9~10년: 디자인 디렉터 · 업계 전문가

강사님 섹션

[디자인부트캠프] DAY51. 웹 구조 및 서비스 데이터 추척_ 예제 분석과 활용

chill0 — Wed, 2 Jul 2025 10:46:10 +0900

마지막 강의라니 !

블로그 업로드도 빠짐없이 다 하게 될 줄이야!

- css에서 vh, vw

vh (viewport height)
→ 브라우저의 높이(viewport height) 기준
→ 1vh = 브라우저 높이의 1%
→ 예: height: 100vh;는 브라우저 창 높이의 100%
vw (viewport width)
→ 브라우저의 너비(viewport width) 기준
→ 1vw = 브라우저 너비의 1%
→ 예: width: 50vw;는 브라우저 창 너비의 50%

- Box Model

모든 HTML요소는 웹 페이지에서 일정공간을 차지하게 된다. 그리고 이러한 공간을 CSS에서는 박스 모델로 정의 한다.

HTML 요소는 사각형 박스로 렌더링됨
박스 모델은 다음 네 영역으로 구성됨:
1. Content: 콘텐츠(텍스트, 이미지 등)가 들어가는 부분
2. Padding: 콘텐츠와 테두리 사이의 내부 여백
3. Border: 요소의 테두리
4. Margin: 요소 바깥의 외부 여백

- content

실제 내용이 표시되는 영역 (텍스트, 이미지 등)
width, height 속성으로 크기 지정 가능

- 인라인 레벨 요소(Inline Level Element)에는 width, height가 적용되지 않는다.

인라인 요소는 콘텐츠 만큼의 영역을 갖기 때문 (display:inline)
만약 인라인 요소에 width, height를 변경하고 싶다면

display: inline-block으로 변경해야 한다.

- padding

콘텐츠와 테두리(border) 사이의 내부 여백
배경색은 content + padding 영역까지 적용됨
예: padding: 10px; → 네 방향 모두 10px

- border

(border-style, border-color)

요소를 둘러싼 테두리 영역

border 속성 외에도 개별 설정 가능:

border-style: 테두리 선의 스타일 지정

none	테두리 없음	border-style: none;
solid	실선	border-style: solid;
dashed	점선(짧은 대시)	border-style: dashed;
dotted	점선(둥근 점)	border-style: dotted;
double	이중 실선	border-style: double;
groove	입체감 있는 오목 테두리	border-style: groove;
ridge	입체감 있는 볼록 테두리	border-style: ridge;
inset	요소가 안으로 들어간 듯한 테두리	border-style: inset;
outset	요소가 튀어나온 듯한 테두리	border-style: outset;

border-color: 테두리 색상 지정

색상 이름 border-color: red;

HEX 코드 border-color: #333333;

RGB border-color: rgb(255,0,0);

RGBA border-color: rgba(0,0,0,0.5);

HSL border-color: hsl(0, 100%, 50%);

- margin

요소와 외부 요소 사이의 외부 여백
주변 요소와의 간격을 조정할 때 사용
margin: auto; → 가운데 정렬 (특히 display: block인 경우)
예: margin: 20px; → 네 방향 모두 20px

-실습 및 과제

강사님의 팁 시작

imweb

반응형이 잘 되어있는 템플릿 사이트 !

이 사이트를 참고해서

지피티에게 코딩을 요청하고

그 코딩을 기반으로 세부 사항을 조정하면 빠르게 만들 수 있다.

회원가입 후 이미지

이제 깃허브로 호스팅 하는 방법!

세팅> 페이지> 메인선택 까지 하고 세이브

vscode로 작성한 코드, 이미지 전부 업로드 하고.

settings> pages 에 가면 링크가 있다.
끝 !

[디자인부트캠프] DAY50. 웹 구조 및 서비스 데이터 추척_디자이너를 위한 CSS_하

chill0 — Tue, 1 Jul 2025 10:42:49 +0900

css

1. *

* _ 전체선택자 !

보통 초기화목적의 속성값을 많이 넣는다.

* {
margin: 0; /* 모든 요소의 바깥 여백 제거*/
padding: 0; /*모든 요소의 안쪽 여백 제거*/
box-sizing: border-box; /* 요소의 width,height값에 padding, border 포함 (레이아웃 잡기 유용)*/
}

2. css 속성값(day49와 다름)

콘텐츠 정렬 & 정돈

vertical-align	인라인 요소나 테이블 셀의 수직 정렬 (middle, top, bottom)
white-space	줄바꿈 및 공백 처리 방식 (nowrap, pre, normal)
text-overflow	텍스트가 넘칠 때 처리 (ellipsis 등)
overflow-x / overflow-y	X축 / Y축 스크롤 처리

반응형/단위 관련

max-width / min-width	최대/최소 너비 설정
max-height / min-height	최대/최소 높이 설정
object-fit	이미지나 비디오 등의 콘텐츠 비율 조절 (cover, contain)
aspect-ratio	요소의 가로:세로 비율 설정 (1 / 1, 16 / 9)

리스트/테이블 관련

list-style	리스트 불릿 스타일 (none, disc, circle, decimal)
border-collapse	테이블 셀 경계 병합 여부 (collapse, separate)
table-layout	테이블 너비 자동/고정 설정 (auto, fixed)

폼 요소 관련

appearance	브라우저 기본 스타일 제거 (none)
resize	textarea 등의 리사이즈 허용 여부 (none, both)
outline	포커스 테두리 스타일 (none 등)
caret-color	텍스트 커서(입력기)의 색상

접근성/상태 표현

pointer-events	마우스 이벤트 허용 여부 (none, auto)
user-select	텍스트 선택 가능 여부 (none, text)
aria-*	접근성 속성 (HTML 속성이지만 CSS에서 상황에 따라 커스터마이징 필요)

기타 스타일링

filter	흐림, 색조 조정, 그레이스케일 등 (blur(4px), grayscale(100%))
backdrop-filter	배경에 필터 적용 (blur, brightness 등, 투명 배경 위에서 주로 사용)
mix-blend-mode	요소 색상 혼합 방식 (multiply, screen, overlay 등)
will-change	특정 속성에 변화가 있을 예정일 때 성능 최적화 용도로 사용

3. 폰트 적용법

(1) 기본 웹 안전 폰트(Web-safe fonts) 사용

(운영체제에 기본 탑재된 폰트를 사용)

css

body { font-family: Arial, Helvetica, sans-serif; }

(2) 웹 폰트(Google Fonts 등) 사용

(CDN을 통해 외부 폰트를 불러오는 방식)

(2)-1. @import 방식

css

@import url('링크'); body { font-family: 'Roboto', sans-serif; }

(2)-2. <link> 태그 사용 (HTML에 직접 넣는 방법)

html

<head>

</head>

css

body {

font-family: 'Roboto', sans-serif;

}

(3) 사용자 정의 폰트(Local 파일) 사용

(폰트 파일을 직접 프로젝트에 넣고 불러오는 방법)

css

@font-face {

font-family: 'MyFont';

src: url('./fonts/MyFont.woff2') format('woff2'),

url('./fonts/MyFont.woff') format('woff');

font-weight: normal; f

ont-style: normal;

}

body {

font-family: 'MyFont', sans-serif;

}

3. 실습 및 과제

(1) position 종류별로 실습 !

(2) background 종류별로 실습 !

(3) background-attachment 종류별로 실습 !

Daily ui

https://chill0.tistory.com/66

[디자인부트캠프] DAY47. 웹 구조 및 서비스 데이터 추척_디자이너를 위한 html_상

chill0 — Mon, 30 Jun 2025 11:10:39 +0900

HTML

Hyper Text Markup Language

HTML은 디자인이 아닌 구조 담당

웹 페이지의 구조를 만드는 언어

> 텍스트, 이미지, 버튼, 링크 등 다양한 요소를 페이지에 표시하고 구성하는 데 사용된다.

1. HTML 기본 문서 구조

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>문서 제목</title>
</head>
<body>
  <h1>안녕하세요!</h1>
  <p>이것은 기본 HTML 문서입니다.</p>
</body>
</html>

<!DOCTYPE html>	HTML5 문서임을 선언
<html>	전체 HTML 문서의 루트 요소
<head>	문서 정보 (제목, 문자 인코딩, CSS, JS 등)
<meta charset="UTF-8">	한글 등 문자 인코딩 설정
<title>	브라우저 탭에 표시될 제목
<body>	실제 페이지에 보이는 콘텐츠 영역

2. HTML 태그

<h1>~<h6>	Heading	제목이나 부제목 표시. 숫자가 작을수록 글씨가 큼.
<p>	Paragraph	하나의 문단을 표시할 때 사용.
<hr>	Horizontal Rule	가로선(구분선)을 긋는 태그. 종료 태그 없음
<br>	Break	줄바꿈. 종료 태그 없음
<i>	Italic	이탤릭체로 표시. 단순 시각 표현 용도.
<em>	Emphasis	이탤릭체로 강조. 의미 강조에 사용됨.
<b>	Bold	텍스트를 진하게 표시. 단순 시각 강조.
<strong>	Strong	텍스트를 진하게 강조. 의미 강조에 사용됨.

<b> vs <strong> <i> vs <em>

공통점	모두 진하게 표시됨	모두 이탤릭체로 표시됨
차이점	- <b>는 단순 시각적 굵기- <strong>은 의미적 강조 (중요도 높음)	- <i>는 단순 시각적 이탤릭체- <em>은 의미적 강조 (강조하고 싶은 단어)
웹접근성	<strong>은 스크린 리더가 강조된 톤으로 읽음	<em>도 강조해서 읽음
사용 권장	의미 없는 굵기 → <b>중요한 의미 강조 → <strong>	단순 스타일 → <i>중요한 의미 강조 → <em>

3. 실습 및 과제

1.첫번째

적용 전

> display:none 적용 시

>visibility:hidden 유무 (영역만 남아있음)

최종

2. 두 번째

3. 세 번째

4. 내일 할 실습 미리 틀만 !

내일 이어서 함~

[디자인부트캠프] DAY49. 웹 구조 및 서비스 데이터 추척_디자이너를 위한 CSS_상

chill0 — Mon, 30 Jun 2025 10:52:54 +0900

CSS

Cascading Style Sheets

->스타일을 지정하는 언어

1.

h1 { color:blue;
}

-> h1 선택자

color 속성명

blue 속성값

2.

css적용방법

1. 인라인 스타일 inline Style Sheet

-> html 태그 안에 작성

2. 내부 스타일 Internal Style Sheet

html 안에 작성

3. 외부 스타일 External Style Sheet

css 안에 작성

3.

css 속성

1) 박스 모델

margin	요소 바깥 여백
padding	요소 안쪽 여백
border	테두리 스타일
width, height	너비와 높이 설정
box-sizing	박스 크기 계산 방식 (content-box, border-box)

2) 텍스트/폰트

color	글자 색상
font-size	글자 크기
font-weight	굵기 (예: normal, bold, 700)
font-family	폰트 종류
line-height	줄간격
text-align	정렬 (예: left, center, right)
text-decoration	밑줄, 취소선 등 (none, underline)
letter-spacing	글자 간격

3) 배경

background-color	배경 색상
background-image	배경 이미지
background-size	배경 이미지 크기 (cover, contain)
background-position	배경 위치
background-repeat	반복 여부

4) Layout

display	요소 표시 방법 (block, inline, flex, grid)
position	위치 기준 (static, relative, absolute, fixed, sticky)
top, right, bottom, left	위치 지정
z-index	쌓이는 순서
float	요소 띄우기
clear	float 해제

5) Flexbox 관련

display: flex	플렉스 컨테이너 선언
flex-direction	방향 (row, column)
justify-content	주축 정렬 (center, space-between)
align-items	교차축 정렬 (center, stretch)
gap	아이템 간 간격
flex	아이템 크기 비율 지정

6) 애니메이션/ 트랜지션

transition	변화에 시간 부여
animation	애니메이션 지정
transform	요소 변형 (회전, 크기 등)
opacity	투명도

7) 기타

cursor	마우스 커서 모양
overflow	넘치는 콘텐츠 처리 (hidden, scroll)
visibility	보임 여부 (visible, hidden)
box-shadow	그림자
border-radius	테두리 둥글게

오늘의 실습 및 과제

기본

display:none 적용시

visibility:hidden; 적용시

display:none과 달리 영역은 살아있음

최종_1

최종_2

최종_3

내일할 실습 미리 틀만 !

어제 다 적어둔 과제가 갑자기 날라가있네...

[디자인부트캠프] DAY48. 웹 구조 및 서비스 데이터 추척_디자이너를 위한 html_하

chill0 — Fri, 27 Jun 2025 16:43:02 +0900

HTML

1. 목록 태그 (List Tags)

<ul>	순서 없는 목록 (unordered list)	동그라미로 표시
<ol>	순서 있는 목록 (ordered list)	숫자 또는 알파벳으로 표시
<li>	리스트 항목 (list item)	<ul> 또는 <ol> 안에서 사용
<dl>	정의 목록 (description list)	용어 정의용
<dt>	정의 목록 제목 (definition term)	용어 부분
<dd>	정의 목록 설명 (definition description)	설명 부분

2. 시맨틱 태그 (Semantic Tags)

의미를 가지는 구조 태그로, 코드의 가독성 향상 및 접근성 개선에 도움을 줍니다.

<header>	머리말	페이지 또는 섹션의 제목, 로고, 네비게이션
<nav>	내비게이션 영역	메뉴, 링크 모음
<main>	주요 콘텐츠	페이지의 핵심 내용
<section>	구획	주제별 콘텐츠 구분
<article>	독립적인 콘텐츠	뉴스, 블로그 글 등
<aside>	부가 콘텐츠	광고, 관련 링크, 사이드바 등
<footer>	바닥글	저작권, 연락처, 사이트 정보
<figure>	미디어 묶음	이미지, 표, 도표 등
<figcaption>	설명	<figure>에 대한 설명
<time>	시간	날짜/시간 데이터 표현
<mark>	강조 표시	하이라이트

오늘의 과제 및 실습

재밌다 웹사이트할땐 안배운 태그들도 사용하니 !!

[디자인부트캠프] DAY46. 웹 구조 및 서비스 데이터 추척_ 디자이너를 위한 개발 지식_1

chill0 — Wed, 25 Jun 2025 16:57:44 +0900

기능사 준비하던 내용이 나올 줄 몰랐다.

사실 자격증도 필요없고,, 코딩 필요없다 이런 말을 너무 많이 들어서

괜한 공부한 것같고 쫌 시무룩했는데...

교육과정에서라도 쫌 써먹겠구나 싶었다.

PART1. 오늘의 내용

HTML/ CSS/ JS

HTML은 웹페이지의 구조, 뼈대

CSS는 디자인

JS는 기능과 동작 이다.

요즘은 거의 VSCODE로 코딩을 한다.

VSCODE

굉장히 많은 확장프로그램을 추천해주셨다.

이 중 내가 써본건 라이브서버뿐이다.

이마저도 실제 시험 환경에서는 쓰지 못한다.

HTML

1. html5문서임을 선언

처음에 HTML 파일에 선언하기 위해선 [ !+탭] 을 입력한다.

보통내가 입력후에 한 작업은, eg를 ko로 바꿔주고, 타이틀명을 적어줬다.

2. <html>, <head>, <body>

웹문서의 기본 구조

body 태그안에 레이아웃을 짠다.

나는 웹페이지를 만드는 걸 공부했어서

wrap, inner, header, contents, footer 를 이용해서

기본 레이아웃 구조를 만들었다.

3. 제목태그 <h1>~<h6>

h1태그가 가장 크다

꼭 제목으로 쓰지 않아도

자동으로 텍스트 크기 조절 용으로도 쓴다.

사실 깔끔하게 구분을 위해 썼다.

스타일은 css에서 거의 정한거 같다.

4. 문단 <p>

5. 링크 <a>

6. 이미지 <img>

나도 공부하면서 배운거지만

파일명은 영어로만, 띄어쓰기도 없어야한다.

실시간강의 때 몇몇 수강생들이

오류가 나는 원인이기도 했다.

7. 목록 <ul><li><ol>

코딩은 정리다..

코딩은 정리를 잘 해둬야한다는걸

느꼈다. 그래서 시멘틱태그를 적절히 활용해서 쓰자.

8. 구분선: <hr> / 줄바꿈: <br>

이 외에도 많은 태그가 있지만

오늘 강의에서 배운 내용정도만 정리했다.

PART2. 오늘의 과제

나는 갑자기 하나에 심하게 꽂힐 때가 있는데 질릴때까지 파야한다.

어젠 갑자기 다시 악기에 꽂혀서 클래식까지 갔다.

안그래도 요즘 노래가 다 질렸었는데,,,

한동안은 클래식을 들을 것 같다.
그러다가 알고리즘이 쿄카를 자꾸 보여줘서

자꾸 보다가 홀딱 반했다.

춤 겁나 잘추는데 저렇게 옷까지 잘입고 귀여울 일인가;

html작성하고 css로 살짝꾸며줬다.

[디자인부트캠프] DAY45. AI 활용한 데이터 분석_ AI와 디자인프로세스_하

chill0 — Tue, 24 Jun 2025 18:58:27 +0900

바이블 코딩

애자일/ 린

애자일

린

AI 활용한 다양한 기업사례

[디자인부트캠프] DAY44. AI 활용한 데이터 분석_ AI와 디자인프로세스_상

chill0 — Mon, 23 Jun 2025 10:47:26 +0900

PART1. 오늘의 내용

디자인 프로세스_ 더블 다이아몬드

디자인 프로세스를 거치면서 AI를 활용할 수 있다.

해당 과정마다 위의 ai툴을 이용할 수 있다.

생성형 AI와 디자인 프로세스

1. Discover 발견 단계

1) Chat GPT

- 사용자 인터뷰 분석, 서베이 요약, 아이디어 브레인스토밍

- 명확한 프롬프트로 인사이트 정리 가능

2) Claude

- 긴 문서 요약 및 정보 구조화에 강점

- UX 리서치 계획 수립, 인터뷰 질문 설계 등 지원

3) Perplexity

- 실시간 검색 + 정보 요약 기능

- UX 트렌드/ 경쟁사/ 업계 동향 파악에 유용

4) Consensus

-UX 관련 논문 및 연구 기반 정보 요약

- 근거 자료 확보에 적합

5) Storm AI(유료)

- 자동화된 브레인스토밍 및 아이디어 시각화 툴

- 팀 아이디어 회의에 활용

6) Synthetics Users (유료)

- AI 기반 가상 사용자 인터뷰 생성

- 초기 아이디어 테스트, 다양한 사용자 반응 시뮬레이션

7) Notably

- 인터뷰/ 음성 기록 자동 분석

- UX 인사이트 문서화, 회의 기록 정리에 적합

8) Wondering (유료)

- 자동화된 글로벌 사요앚 리서치 플랫폼

- 개념 검증, 문맥 분석에 활용

2. Define 단계

1) Persona Gen

- 사용자의 페르소나를 자동으로 생성하는 도구

- 사용자 특성, 목표, 행동 패턴 등을 시각화

2) Uxpressia

- 사용자 여정 맵을 시각적으로 구성할 수 있는 도구

- 감정 곡선, 행동, 접점 등을 구조화

3) GitMind

- 마인드맵 형태로 사고 흐름과 아이디어 정리를 지원

- 문제 도출 및 정보 구조화에 유용

4) Whimsical

- 플로우차트, 맵, UX 다이어그램을 생성할 수 있는 시각 도구

- 사용자 흐름 및 서비스 구조 정리에 적합

5) Boards

- 사용자 조사 및 인터뷰 데이터를 시각화하고

페르소나로 전환하는 도구

6) Story Boarder AI

- 사용자 시나리오를 스토리보드 형태로 자동 시각화

- 문제 상황이나 경험 흐름을 이미지 중심으로 정리

3. Development 단계

1) Maze

- 기능: 사용자 행동 분석 + 설문 인사이트 도출

- 활용: 프로토타입 연결 실사용자 피드백 자동 수집

- 포인트: 반복 테스트로 사용성 개선에 탁월

2) VisualEyes

- 기능: 시각적 관심 예측 + 시선 추적 분석

- 활용: A/B 테스트로 사용자 반응 사전 예측

- 포인트: 시간•비용 절감 + 시각적 인사이트 제공

3) Clueify

- 기능: 시각적 반응 정량화 (정확도 92%)

- 활용: 어떤 디자인 요소가 주목받는지 평가

- 포인트: 디자인 결정에 객관적 근거 제공

4) Webflow

- 기능: 시각적 코딩 없이 웹 구현

- 활용: 웹 디자인 퍼블리싱까지 원스톱

- 포인트: 디자이너 주도 웹 구축 가능

5) Framer

기능: 고해상도 웹사이트 생성 + 텍스트 기반 설계

활용: 빠른 프로토타입 제작 + 실제 배포

포인트: 초보자도 고품질 결과물 구현 가능

6) Bubble

기능: 노코드 앱 제작 + 인터랙션 구현

활용: Al 프롬프트로 앱 로직 생성

포인트: 기획 > 앱 구현까지 빠르게 가능

7) Frontly

기능: 이미지/디자인 HTMLCSS 코드 자동 변환

활용: 디자이너가 만든 UI 개발 코드로 전환

포인트: 디자인-개발 간 협업 강화

8) Quest

기능: Figma 디자인 React 코드 자동 변환

활용: 개발 없이 디자인을 코드화

포인트: 비개발자도 구현력 확보

9) Builder

기능: 드래그앤드롭 + 콘텐츠 자동 생성

활용: 마케팅/커머스용 랜딩페이지 구축

포인트: 빠른 수정•테스트에 강력

결론!

결국 중요한 것은 도구보다 사용자의 문제를 제대로 이해하고 해결하려는 디자이너의 태도와 질문력

+실시간

- AI시대에서의 디자이너의 역할이 재정의

- 정성적인 데이터의 분석/ 통합/ 작성이 가능해짐

https://www.thefountaininstitute.com/blog/chat-gpt-ux-design

How to Use Chat GPT in Your Design Process: 11 Advanced UX Tasks

A full guide on how to automate 11 types of UX activities and 35 UX-specific prompts to get started in AI-assisted design

www.thefountaininstitute.com

- 텍스트 프롬프트 엔지니어링의 4가지 유형

페르소나 기법 유형

생성AI를 가상의 인물로 정의해서 보다 좋은 답변을 생성하는 방법

예시 기법 유형

생성AI에게 특정 예시들을 함께 전달해서 보다 좋은 답변을 생성하는 방법

형식 기법 유형

생성AI에게 내가 원하는 결과의 형식을 요청해서 보다 정확한 답변을 생성하는 바업

사고 기법 유형

생성AI에게 다양한 사고 방식을 제시해서 답변을 추론해서 얻도록 하는 방법

- 형식기법: ChatGPT Prompt Frameworks

Growth marketing specialist로 활용 중인 khizer Abbas ChatGPT에 활용할 수 있는

텍스트 프롬프트 형식에 대한 유형을 5가지로 정리 하였음.

- Nearing human baselines across generative modalities

https://www.specialeinvest.com/blog/synthetic-data-faking-it-until-making-it

Synthetic Data : Faking it until Making it | Speciale Blog

There could possibly be no greater conspiracy theory than the Simulation Hypothesis. It proposes that everything, with the exception of Nothing, is fake and essentially a manipulative alternative reality designed...

www.specialeinvest.com

https://www.slideteam.net/data-information-knowledge-wisdom-structure-with-decision-risk.html?lang=Portuguese

https://www.relume.io/

Relume — Websites designed & built faster with AI | AI website builder

Use AI as your design ally, not as a replacement. Effortlessly generate sitemaps and wireframes for marketing websites in minutes with Relume’s AI website builder.

www.relume.io

PART2. 오늘의 과제

- Relume, Galileo ai 이용

로딩페이지에 치과에 맞는 로딩스피너를 포함하라고 했더니...

또 signup화면도 아쉽다.

카드뉴스 형식의 레이아웃은 깔끔하게 나타내는 것 같다.

내가 이미 만든 와이어프레임 기반으로

지피티를 이용해 프롬프트를 짜고

스티치에 입력한 결과다.

아직 아쉬운 점이 많고, 잘 나타내는 화면/ 어색한 화면이 딱 나뉘어진다.

좋은 점으느 카드뉴스 기반 레이아웃이나, 컴포넌트 세트 만들기 빠를 것 같고

관련 사진 자료를 빠르게 얻을 수 있다는 점 !

- GE완료

- 데일리 UI는 게시판에 따로 업로드

색상 이름	border-color: red;
HEX 코드	border-color: #333333;
RGB	border-color: rgb(255,0,0);
RGBA	border-color: rgba(0,0,0,0.5);
HSL	border-color: hsl(0, 100%, 50%);