프로덕트디자이너 Hailey 일기장📝

하루계획표오전09:10 ~ 09:30 : 계획서 작성09:30 ~ 13:00 : 자바스크립트 강의 수강집중 디자인14:00 ~ 17:00 : 강의 수강14:00 ~ 17:00 : 프로젝트 진행 수강[O] 팀원들과 어려운 내용 공유 및 해결책 찾기[O] 1주차 강의 듣기[O] 1주차 과제 하기[O] 튜터님께 질문저녁19:00 ~ 20:50 : UX집중20:50 ~ 21:30 : 저녁 스크럼, TIL 제출, 각자 댓글 달기    오늘 자바 스크립트 문법 강의를 듣는 주기가 되었습니다.  기초 문법 연습등을 학습했습니다.function solution(s){ var result = true; s = s.toUpperCase(); var num = 0; for(var i = 0; i   유튜브 강의로 자..

💡Keep(현재 만족하고 있는 부분)웹 페이지 기본 구조를 분석할 수 있게 된 점어렵게만 느껴졌던 개발자 도구 화면에서의 구조와 요소를 파악할 수 있게 되었고 개인 작업물에 활용할 수 있게 되어 만족스럽게 생각합니다.팀원간의 일정 공유자칫 깜빡하고 넘어갈 수 있는 개인적인 일정도 팀원끼리 서로 공유하고 배려하여 편안한 학습 분위기를 형성할 수 있어 만족스럽게 생각합니다.새로운 툴을 배우게 된 점처음 접하는 노코드툴인 웹플로우를 활용한 개인 과제 제작에 몰입함으로써 디자인에 활용할 수 있는 툴의 범위가 넓어졌다고 생각합니다.백엔드를 따로 배우지 않아도 제작 가능한 노코드 툴백엔드 개발 지식 없이도 데이터베이스와 서버 설정을 자동으로 처리해주는 노코드 환경 덕분에, 초보자도 쉽게 웹사이트와 기능을 제작할 ..

📅 TIL - 2024.12.19주제: 자유주제(토스) - Webflow 애니메이션 및 텍스트 크기 조정 학습1. 오늘 학습한 내용Webflow에서 텍스트 크기 조정 방법Webflow에서 텍스트 크기를 줄이거나 키우는 방법을 배우며, Scroll Actions와 Interactions 기능을 활용하는 법을 익혔습니다.무료 계정에서는 Size와 Scale을 활용해 간접적으로 텍스트 크기를 조정하는 것이 유효하다는 점을 확인했습니다.Keyframe 설정의 중요성Webflow의 애니메이션은 두 개 이상의 Keyframe(시작과 끝)을 설정해야 올바르게 작동한다는 것을 배웠습니다.Keyframe 간의 간격과 값을 적절히 설정하여 부드러운 애니메이션 효과를 구현했습니다.텍스트 크기와 위치 조정텍스트 크기를 줄이..

TIL (Today I Learned)1. 진행 상황핸드폰 UI와 타블렛 UI 제작 완료 후, 인터랙션을 추가하기 위해 제작 중이다.모션을 자연스럽게 주는 방법을 배우기 위해 튜토리얼을 참고하며 계속 진행 중이다.Box에 그라데이션 효과를 적용하는 방법을 새로 알게 되어 성공적으로 반영했다.가로 스크롤 기능도 제작 완료! 현재 핸드폰 UI와 타블렛UI 제작 완료후 인터렉션을 주기 위해 추가 제작 중이다.이부분에서 어떻게 모션을 자연스럽게 줄수 있을지 튜토리얼을 계속 보며 진행중 Box에 그라데이션 효과를 적용하는 방법을 새로 알게 되어 성공적으로 반영 했다. (현재 계속 진행중!)   가로 스크롤도 제작 완료 하였다. 개발자 도구 안에 있는 그라데이션 컬러 참고 후텍스트 그라데이션 제작 방법을 몰라 조금..

오전09:00 ~ 10:10 : 디자인 카타 진행10:10 ~ 10:30 : 오전 스크럼, 계획서 작성집중 디자인10:30 ~ 16:00 : 웹플로우 강의 듣기[O] 노코드 웹플로우 3주차 강의 듣기저녁20:30 ~ 20:50 : TIL작성 [O] 웹플로우 개인과제 발제 및 개인과제 계획 구상하기20:30 ~ 20:50 : TIL작성20:50 ~ 21:00 : 저녁 스크럼, TIL 제출, 회고17:00 ~ 20:00 : 강의 수강 및 과제 제출오늘 한 일Airtable 폼 설정비밀자료 신청 폼을 Airtable에서 생성하고 테스트.폼 제출 시 자동으로 단계를 "비밀자료 신청"으로 업데이트하는 자동화 설정 진행.웹플로우 버튼과 폼 연동Airtable에서 생성된 폼 링크를 웹플로우 내 버튼에 첨부해 사용자..

하루 계획📋오전09:00 ~ 10:10 : 카타 진행10:10 ~ 10:30 : 오전 스크럼, 계획서 작성집중 디자인10:30 ~ 16:00 : 강의 수강 및 개발[O] 노코드 웹플로우 강의 듣기저녁20:30 ~ 20:50 : TIL작성20:50 ~ 21:00 : 저녁 스크럼, TIL 제출, 회고17:00 ~ 20:00 : 노코드 웹플로우 강의 수강 + 과제 제출오늘 한일 / 오늘 겪었던 문제점💻📚 🤔 오늘 웹플로우 1주차 강의를 수강하였다.녹화 강의 날짜가 3월달인데 추측하건데 작년 녹화본이라 웹플로우 UI화면이 달랐다.그래서 검색하면서 따라해보았다. 강사님이 커멘드+2 라고 하시는줄 알고 단축키를 눌렀는데 왜  Quick Find가 안나오는거지ㅠㅠ 하면서 헤매다가뒤늦게 커멘드+E라고 하신거였다..

Link block 주는 방법이 2가지가 있다.1. Wrap in2. Convert to(보통  Convert to를 많이 쓰는편.)  바로 위 이미지는 Card레이어 영역을 선택하고 Wrap in을 주면 레이어가 Card위에 Link block레이어가 추가되어 Card레이어를 감싸고 있는것을 볼수 있다.   Card 레이어 선택 후 마우스 오른쪽 버튼을 누르면 위 이미지처럼 창이 뜨는데 여기서  Convert to 클릭 > Link Block 클릭하면 된다.그럼 선택했던 Card레이어 자체가 Link Block 기능을 해서 link Block레이어가 추가 되지 않고 바로 Card레이어에 링크블럭 기능이 적용된다.  위 두가지 방법 적용후 공통점이 Link Block가 적용되면 텍스트가 자동으로 위 이미..

Webflow의 단축키일반 단축키단축키 요약표 보기: Shift + ?스냅샷으로 저장: Shift + Command + S (Mac) 또는 Shift + Control + S (Windows)요소 선택 해제/종료: Esc요소 삭제: 삭제게시 대화 상자 표시: Shift + P내보내기 코드 대화 상자 표시: Shift + E요소 편집: Enter바로가기 보기미리보기 모드: Shift + Command + P (Mac) 또는 Shift + Control + P (Windows)가이드 오버레이: Shift + Command + G (Mac) 또는 Shift + Control + G (Windows)요소 모서리 표시: Shift + Command + E (Mac) 또는 Shift + Control + E (Wi..