이전 글에서 디자인 시스템은 팀이 같은 언어를 쓰게 만드는 구조라고 했다.시스템이 잡히면 다음은 프로토타입이다. 프로토타입에는 두 가지가 있다.피그마에서 화면 간 흐름만 연결한 클릭 프로토타입과,실제로 코드가 돌아가는 실동작 프로토타입.클릭 프로토타입은 흐름을 검증하는 데 충분하지만,스크롤 애니메이션이 어떻게 느껴지는지,FAQ 아코디언이 자연스러운지,모바일에서 터치가 편한지는 코드가 돌아가야 알 수 있다.예전에는 이걸 확인하려면 개발자가 직접 만들어야 했는데지금은 Claude의 Artifacts로 기획 단계에서 바로 실동작 프로토타입을 뽑을 수 있다. Artifacts에 "랜딩페이지 만들어줘"라고 하면 뻔한 게 나온다.그럴듯해 보이지만 어디에도 쓸 수 없는 결과물이다.AI한테 좋은 결과를 받으려면 좋은 ..
STEP 02. AI 데이터 UX 리서치 — 정책서 없이 만들었더니 생긴 일STEP 01. AI 서비스 기획 기초 — 문제 정의부터 CRUD 설계까지보통 사주보러가면 물어보는 것들이 있다. 올해 재물운이 어떻고 연애운이 어떻고재회운이 어떻고 하는 그런 것들사주명식에는 보통uiweb.tistory.com 이전 글에서 리서치는 안하면 결국 나중에 두번일하는 것이라고 정의했는데그 다음은 화면을 그리는 단계다정석대로라면 Figma에서 와이어프레임을 잡고, Hi-Fi로 올리고, 프로토타입으로 흐름을 검증한 다음에 개발로 들어간다.화면설계없이 코드를 치면 중간에 구조를 뜯어고치게 될 수 밖에 없다.하지만 찐망고 사주는 피그마를 안썼..입력폼하나, 결과화면하나, 마이페이지하나 홤녀이 세게인 서비스가 이미 머릿속에 있..
- Total
- Today
- Yesterday
- 찐망고사주
- 피그마
- JavaScript
- 2024웹디자인
- CSS3
- 구글머터리얼디자인
- uiux
- 웹접근성
- 디자인시스템
- seo
- UX디자인
- 찐망고
- 웹디자인팁
- 서비스기획
- 티스토리챌린지
- ai사주
- UI디자인
- 웹디자인
- 반응형웹
- 웹퍼블리싱
- 바이브코딩
- 디자인팁
- figma
- 머터리얼디자인
- html
- 오블완
- css
- 웹표준
- 웹디자인개발기능사
- 프론트엔드
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | |||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 | 30 | 31 |