UI/UX 공부기록

12/12 일일 목표📝디자인 카타웹플로우 강의 듣기 📖 오늘 배운 내용 오늘부터 웹플로우 공부 👩🏫 오늘 진행하며 어려웠던 부분웹플로우는 처음써보는데 노코드 툴이 있다는 것도 처음 알게되었다! 코드 없이 이렇게 웹페이지를 뚝딱 만들수있다니 참 신기하다, 근데 코딩에서 배운 그리드와 플렉스 개념이 필요해서 어제 공부해두길 잘했다는 생각이 들었다. 👀 어려웠던 부분을 어떻게 해결했을까? 코드는 하나하나 치느라 어려웠는데 웹플로우로 금방 만들고 디자인하는것처럼 결과물도 바로 보이니까 재밌었던 것 같다.!

12/11 일일 목표📝디자인 카타웹퍼블리싱 📖 오늘 배운 내용 오늘 제일 중요한 것은 Flex와 Grid! Flex1차원 레이아웃을 설정할 때 유용하나의 축에 대해 레이아웃을 정의함부모요소가 자식요소의 크기를 결정하고 배치정렬방식 : justify-content(수평 정렬), align-items(수직 정렬)flex-wrap 줄바꿈 여부를 설정nowrap (기본값): 줄바꿈 없음.wrap: 줄바꿈 허용.wrap-reverse: 줄바꿈 허용, 순서를 뒤집음.Grid2차원 레이아웃(행과 열) 설정할 때 유용행과 열로 구성된 격자 구조 설정부모 요소가 행 및 열을 정의하고 자식 요소 배치grid-template-columns(열 정의), grid-template-rows(행 정의)행과 열 각각 의 개수..

12/10 일일 목표📝디자인 카타웹퍼블리싱 📖 오늘 배운 내용 CSS의 주요 구성 요소1) 선택자 (Selector) 어떤 HTML 요소에 스타일을 적용할지 지정예: h1, .클래스명, #아이디명 등2) 속성 (Property) 변경하고 싶은 스타일 항목예: color (색상), font-size (글자 크기), margin (외부 여백)3) 값 (Value)속성에 적용할 구체적인 값을 지정예: blue, 24px, 10px4) 선언 (Declaration )속성과 값을 {} 안에 쓴 부분예: { color: blue; font-size: 24px; } CSS 선택자 종류(1) 태그 선택자h1 { color: red; } (2) 클래스 선택자 (.클래스명).title { ..

12/09 일일 목표📝디자인 카타웹퍼블리싱 📖 오늘 배운 내용 HTML 이란?웹페이지를 만들기 위한 기본언어웹페이지의 뼈대를 만드는 역할을 함제목, 문단, 이미지, 링크, 버튼 같은 요소들이 웹페이지에 나타나는 위치와 구조를 정의함 HTML의 특징태그TAG 라는 걸 사용해서 정보를 구조화함태그는 항상 로 감싸져 있음HTML의 역할 비유HTML: 웹페이지의 뼈대 🦴 (구조를 만든다)CSS: 웹페이지의 피부와 옷 🎨 (디자인을 입힌다)JavaScript: 웹페이지의 뇌 🧠 (동작을 추가한다) 메인 제목 이것은 문단입니다. 태그특징HTML 문서의 시작과 끝을 나타냄.모든 태그는 태그 안에 들어감.보이지 않는 정보를 담는 부분.브라우저에 표시되지 않는 설정, 메타데이..

12/06 일일 목표📝팀프로젝트 📝7주 차를 돌아보는 WIL 일주일 동안 진행한 프로젝트를 정리해보겠다.. 11.29 - 12.02- 서비스 선정- 데스크 리서치(시장조사, 사용자조사, VOC분석) 스타벅스앱으로 선정하고 리서치를 진행하였다.. 스타벅스앱은 사이렌오더를 많이 사용하는 핵심기능으로 기사와 VOC에서 사이렌오더에 대한 불만이 많이 나오고있어 우리팀은 사이렌오더를 핵심기능으로 잡고 프로젝트를 진행하였다. 12.03- 경쟁사 SWOT- 스타벅스 유저 플로우 & 경쟁사 유저플로우- 사용성 테스트 인터뷰 스타벅스 SWOT 조사와 사이렌오더 유저플로우를 만들었다. 사이렌오더는 간단하게 메뉴를 주문하는 과정인데 이 과정에서 VOC에서 발견한 점이 어디 플로우에서 발생하는지 확인하였다. 경쟁사 조사..