목록본캠프 (63)
UI/UX 공부기록
[본캠프 8주차] 금요일 WIL
12/13 일일 목표📝 디자인 카타노코드 강의 2-3주차 📝8주 차를 돌아보는 WIL 디자인 카타에서 ios 와 안드로이드에 대한 디바이스 차이를 공부했다.,. 내가 맡은 부분은 해상도와 사이즈 단위의 개념! 안드로이드 해상도에 대해서 발표했는데, 안드로이드는 dp 라는 단위를 사용한다.dp는 density independent pixel 이라는 뜻으로 직역하면 밀도에 독립적인 픽셀이라는 뜻이다. 어떠한 디스플레이 해상도와도 관계없이 다룰 수 있는 dp 단위로 사용한다. 안드로이드에서만 사용하는 독자적인 단위임160dpi를 기본 해상도로 설정해서 160dpi 가 1dp=1px 이다! 해상도가 점점 좋아지면 점점 배수를 하면 되는데, 무조건 다 픽셀로 배수해야하는건 아니고 벡터기반의 그래픽은 늘리..
[본캠프 8주차] 목요일 TIL
12/12 일일 목표📝디자인 카타웹플로우 강의 듣기 📖 오늘 배운 내용 오늘부터 웹플로우 공부 👩🏫 오늘 진행하며 어려웠던 부분웹플로우는 처음써보는데 노코드 툴이 있다는 것도 처음 알게되었다! 코드 없이 이렇게 웹페이지를 뚝딱 만들수있다니 참 신기하다, 근데 코딩에서 배운 그리드와 플렉스 개념이 필요해서 어제 공부해두길 잘했다는 생각이 들었다. 👀 어려웠던 부분을 어떻게 해결했을까? 코드는 하나하나 치느라 어려웠는데 웹플로우로 금방 만들고 디자인하는것처럼 결과물도 바로 보이니까 재밌었던 것 같다.!
[본캠프 8주차] 수요일 TIL
12/11 일일 목표📝디자인 카타웹퍼블리싱 📖 오늘 배운 내용 오늘 제일 중요한 것은 Flex와 Grid! Flex1차원 레이아웃을 설정할 때 유용하나의 축에 대해 레이아웃을 정의함부모요소가 자식요소의 크기를 결정하고 배치정렬방식 : justify-content(수평 정렬), align-items(수직 정렬)flex-wrap 줄바꿈 여부를 설정nowrap (기본값): 줄바꿈 없음.wrap: 줄바꿈 허용.wrap-reverse: 줄바꿈 허용, 순서를 뒤집음.Grid2차원 레이아웃(행과 열) 설정할 때 유용행과 열로 구성된 격자 구조 설정부모 요소가 행 및 열을 정의하고 자식 요소 배치grid-template-columns(열 정의), grid-template-rows(행 정의)행과 열 각각 의 개수..
[본캠프 8주차] 화요일 TIL
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 { ..
[본캠프 8주차] 월요일 TIL
12/09 일일 목표📝디자인 카타웹퍼블리싱 📖 오늘 배운 내용 HTML 이란?웹페이지를 만들기 위한 기본언어웹페이지의 뼈대를 만드는 역할을 함제목, 문단, 이미지, 링크, 버튼 같은 요소들이 웹페이지에 나타나는 위치와 구조를 정의함 HTML의 특징태그TAG 라는 걸 사용해서 정보를 구조화함태그는 항상 로 감싸져 있음HTML의 역할 비유HTML: 웹페이지의 뼈대 🦴 (구조를 만든다)CSS: 웹페이지의 피부와 옷 🎨 (디자인을 입힌다)JavaScript: 웹페이지의 뇌 🧠 (동작을 추가한다) 메인 제목 이것은 문단입니다. 태그특징HTML 문서의 시작과 끝을 나타냄.모든 태그는 태그 안에 들어감.보이지 않는 정보를 담는 부분.브라우저에 표시되지 않는 설정, 메타데이..
[본캠프 7주차] 금요일 WIL
12/06 일일 목표📝팀프로젝트 📝7주 차를 돌아보는 WIL 일주일 동안 진행한 프로젝트를 정리해보겠다.. 11.29 - 12.02- 서비스 선정- 데스크 리서치(시장조사, 사용자조사, VOC분석) 스타벅스앱으로 선정하고 리서치를 진행하였다.. 스타벅스앱은 사이렌오더를 많이 사용하는 핵심기능으로 기사와 VOC에서 사이렌오더에 대한 불만이 많이 나오고있어 우리팀은 사이렌오더를 핵심기능으로 잡고 프로젝트를 진행하였다. 12.03- 경쟁사 SWOT- 스타벅스 유저 플로우 & 경쟁사 유저플로우- 사용성 테스트 인터뷰 스타벅스 SWOT 조사와 사이렌오더 유저플로우를 만들었다. 사이렌오더는 간단하게 메뉴를 주문하는 과정인데 이 과정에서 VOC에서 발견한 점이 어디 플로우에서 발생하는지 확인하였다. 경쟁사 조사..
