eunzi789 님의 블로그

일정표 ✨

09:00 ~ 10:10 : 디자인 카타 진행(Saas - slack)

10:10 ~ 10:30 : 데일리 스크럼 진행 & 학습 계획 세우기

10:30 ~ 11:00 : 오전 스크럼

11:00 ~ 12:00 : 디자인 카타 정리(slack - Core Experience 다시 정리 )

12:00 ~ 13:00 : 디자인 집중반 - OT 듣기

14:00 ~ 16:00 : 개인과제 - CMS 적용&에어테이블 연동

17:00 ~ 18:00 : 과제 검토

19:00 ~ 20:00 : 아티클 & TIL 작성

20:00 ~ 20:20 : 데일리 회고 진행하기

20:20 ~ 21:00 : TIL 작성 후 제출 & 내일 계획 세우기

오늘 공부 내용

[Wavve 랜딩페이지 반응형으로 구현하기] 개인과제 진행하며 알 수 있었던 점들

1. WebFlow로 캐러셀 작업하기

제공해주는 레이아웃 중 Slider를 사용해보았는데, 제공되는 레이아웃이다보니 제공된 클래스명 자체를 바꿔버리니 원래 동작되던 기능이 제대로 되지 않아서 애를 먹었다. 웬만해서는 제공해주는 클래스명은 살려두고 안에 새로운 div를 만들어서 적용할 것을 추천해주셨다.! 다음에도 이런 일로 시간을 소모하지 않기위해 잘 기억해두어야겠다. 

TIL 작성

디자인 심화 개인과제 진행중인 12월의 셋째주,

시간이 정말 빨리간다. 일주일만에 간단한 코딩 수업을 떼고 웹플로우로 랜딩페이지 만들기 과제에 들어갔다. 오랜만에 작업하니 재밌기도하고 시간가는 줄 모르고 열심히 했다. 하지만 약간의 현타는 어쩔 수 없나보다. 퍼블리싱을 배우기 위해 초반에 3개월 아니 6개월은 투자한 것 같은데, 웹플로우를 배우는데 고작 일주일밖에 안됐지만 그럴싸한 웹페이지를 만들 수 있다는 것이다.! 현타가 세게 온다ㅎ 이 과정은 디자인을 하는데 구조적으로 이해를 돕기 위해 진행된다고는 하지만 다들 구현하는 것을 보면 어느 수준까지는 잘 만드는 것을 보면서 참 세상 좋다고 생각했다. 진짜 나중에는 ai가 대체될 수도 있단 생각이 확 드는 순간이기도 했다.  아무튼, 4일동안의 어떻게 진행할지 구체적인 계획을 세우고 단계별로 작업하였다.

1일차

1. 서비스 선정 : 내가 선택한 랜딩페이지는 Wavve. 깔끔한 레이아웃이 마음에 들었고, 반응형으로 작업할 때 수월할 것 같아서 선택했다.

2. 기존 wavve 랜딩페이지 조사 : 웹페이지에서 제공하는 백그라운드 이미지, 상품이미지, 아이콘, 로고, 배지 등 각종 이미지들을 모아서 따로 저장해둔 뒤 사용한 색상들과 레이아웃 구조를 파악하고 형태, 스타일 등을 조사해 보았다. 

2일차

3. 디자인 시스템 설정 : 반응형으로 구현하기 위해 Typography를 2px 단위로 설계했는데, pc버전에서 모바일버전으로 갈 수록 1-2px 차이가 확 느껴지니 그 때 유용하게 활용하기 위해 body 쪽 font 사이즈를 촘촘히 설계했다. 색상은 의외로 단순해서 Primary 컬러와 Gray기본 컬러 하나씩만 만들었고 아이콘도 많이 사용되지 않았는데 한가지 추가한 것은 햄버거 버튼에 사용할 아이콘이었다. 

4. 시안 작성:  pc버전으로 설계를 마친뒤, tablet 버전과 mobile 버전까지 만들어보았다. 모바일 버전에선 상단의 Header에 있는 메뉴들이 다 들어가지지 않기 때문에 햄버거 버튼으로 대체한 뒤 클릭하면 side bar가 열리고 메뉴를 선택할 수 있도록 설계하였다(모바일버전에서만 display가 block될 수 있도록) 그외에 캐러셀 부분도 pc에선 flex를 활용해 텍스트와 이미지가 가로로 펼쳐져 있다가, 테블릿 사이즈부터는 세로로 바뀌도록 설정했다.

5. 필수과제 적용 : 헤더에 이용권과 자료받기 메뉴를 추가하였고 메인화면에 CTA버튼도 생성했다. 사용자 이름과 이메일을 입력하고 신청할 수 있는 폼 형태도 하단에 추가하였다. 

3일차

6. WebFlow 디자인 세팅 : 사용할 NotoSans 폰트를 등록하고, 작업할 때 편리하도록 font-size, weight, Primary color, Gray color 등을 추가해두었다.

7. 레이아웃 잡기 : header/ main/ footer 로 기본 구조로 나눈 뒤, 메인에서는 section으로 크게 덩어리를 나눠준 뒤, 그 안에서 보여질 부분은 Container Default로 class명칭을 정하고 width를 1440px로 지정했다. 캐러샐을 작업하기 위해 Slider를 사용했는데, 만지다보니 첫번째 슬라이드에 두번째 세번째 내용도 다같이 들어가져 있었다.. 이리저리 만져도 되지 않아 튜터님을 찾아갔었는데, 기본으로 제공해주는 명칭으로 돌리니 제대로 작동하였다. 제공해주는 클래스명은 건드리면 안되겠다는 생각을 했다..  

8. 반응형 작업하기 : tablet과 mobile사이즈로 작업하면서, 이탈되거나 잘리는 부분들만 수정해주고, 나머지는 플렉스와 그리드의 배열만 옮겨서 적당히 배치했다. 말은 쉽지만, 사실 손이 많이 가는 작업이었다. 폰트 같은 경우는 전체 다 줄이도록 손을 봤으니..ㅎ 확실히 반응형 작업하기엔 webflow가 쉽고 빠른 것 같다. 직접 코딩하면 코드치고 확인하고 계속 왔다갔다해야하는데,,

9. 인터랙션 : link걸어서 클릭시 해당 section으로 이동되도록 설정하고, 버튼에도 hover효과도 주었다. 또, header와 footer는 컴포넌트화 시키고 mobile 버전에서는 햄버거 버튼이 display:block이 되도록 pc버전일때는 none이 되도록 설정해주었다.

4일차

10. CMS 직접 입력하기 : airtable이 서비스를 종료하는 이슈로 인해 CMS Collections에 직접 등록했다. 연동할 적절한 페이지가 없어서 wavve style 설명 리스트에다가 적용했는데 하고나서 이거 이렇게 하는 거 아닌 것 같은데 싶었다. 왜냐면 등록한 collection각각의 하위 항목에 생성된 slug를 통해 페이지 이동이 가능한데, 내가 적용한 곳은 페이지 이동이 굳이 필요없었기 때문이다. 그래서 header의 항목들에다가 적용하려고 했으나, 필수 과제가 section 이동이라 말았다. 다음번엔, 시작할 때 연동할 테이블과 페이지도 미리 설계한 뒤에 진행해야겠다고 느꼈다. 화면을 다 만들어놓고 구겨넣으려고 하니 적절하지 않은 것 같았다. 

11. GA4 & airtable 연동 : 서비스 종료로 과제에 적용할 수 없어 아쉬웠지만 다음에 기회가 된다면 제대로 구현해보고 싶으 마음이 들었다. 자동화된다는 것은 너무 신기한 일이니까! 

내일은 전체적으로 검토해보고 오전 중에 과제를 제출하도록 해야겠다. 이번 과제를 통해 웹페이지의 구조적인 설계와 방법에 대해서 더 알 수 있었고 앞으로 디자인을 하는데에 많은 도움이 될 것 같았다. 실제로도 구직공고에 webflow를 사용할 수 있는지를 물어보는 곳도 있었다. 내일은 튜터님께 CTA 버튼을 고정시키는 법에대해서 여쭤보도록 해야겠다  

FACTS(사실, 객관) : 이번 일주일 동안 있었던 일, 내가 한 일

1. 코딩 수업

웹퍼블리싱 특강수업을 통해 html과 css의 기초부터 응용까지 오랜만에 코딩이었다.

웹플로우(Webflow)와 에어테이블(Airtable)을 활용해 노코드(No-code) 환경에서 웹 페이지를 제작하는 방법을 배웠다. 단순한 페이지 생성에서 나아가, 데이터베이스(DB) 연동과 자동화 워크플로우 설정까지 진행하면서 실제 프로덕션 환경에서의 활용까지 실습해볼 수 있었다.

2. 디자인 카타

안드로이드(Android)와 iOS의 주요 차이점과 공통점을 분석하며 플랫폼별 디자인 가이드라인을 학습했다

FEELINGS(느낌, 주관) : 나의 감정적인 반응, 느낌

1. 오랜만의 코딩

퍼블리싱은 몸에 익어서 쉽게 할 수 있었으나, 코드없이 웹페이지를 만드는 것은 처음이어서 웹플로우 툴에 익숙해지는데 시간이 걸렸다. 에어테이블을 통한 데이터베이스 연동은 꽤나 재밌었다. 자동화까지 해보니 백엔드개발자들이 매번 자동화라고 이야기 했던 것들이 이런걸 말하는거구나를 알게되었다. 잘 활용하면 유용할 것 같았지만 이것도 몸에 익으려면 연습을 해야할 것 같았다.

2. 너무나도 다양하고 넓은 영역..

자료를 조사하면서 매번 든 생각은 왜,, ios랑 안드로이드는 통일하지 않아서 이렇게 사용자들도 개발하는 사람들도 헷갈리게 하는것일까였다.. 다른 이유야 당연하겠지만 똑같은 기능을 다르게 부른다는 것이 참 이상하다고 생각하였다. 덕분에 나는 자료조사를 2번해야하니까 귀찮지만 어쩔수없지..^^..

FINDINGS(배운 것) : 그 상황으로부터 내가 배운 것, 얻은 것

1. 개발 지식의 범위가 한층 넓어졌따.?

퍼블리싱을 하며 웹 페이지를 구조화하고 스타일링하는 기본적인 원리뿐만 아니라, 반응형 디자인과 웹 접근성의 중요성도 다시 한번 중요하다는 것을 알게되었다. 또, 실제로 백엔드까지 직접 해보면서 효율적인 업무 자동화의 장점을 알 수 있었고, 이렇게 비개발자도 사용할 수 있는 도구들도 잘 활용하면 어느정도 개발의 지식을 더 넓힐 수 있을 것 같다고 생각했다. 이번 주차를 통해 개발의 전반적인 지식과 이해도가 높아졌고 기획과 디자인외의 개발과정에서 실제로 어떤식으로 일을 진행하는지도 경험할 수 있었다.

2. 플랫폼별 디자인 이해의 중요성
안드로이드와 iOS의 디자인 가이드라인을 비교하면서 플랫폼 특유의 UX와 UI 설계를 이해하는 것이 중요하다는 것을 알았다. 단순히 예쁘게 만드는 것에서 끝나는 것이 아니라, 사용자 친화적이고 일관성 있는 경험을 제공하기 위해 각각의 플랫폼 요구 사항에 맞춘 디자인이 필요하다는 점을 배웠다.

또, 각각의 플랫폼을 조사하다보니 어떤 환경에서 어떤 컴포넌트를 적절히 사용하는 것이 좋을지, 어떤 점이 더 적절하고 편리하게 사용할수 있을지에 대해서도 생각해보게 되었다. 이렇게 플랫폼에 적합한 디자인을 구현하려면 세부적인 요소까지 신경 써야 한다는 것을 알게 되었고, 이는 향후 디자인 기획에서 큰 도움이 될 것 같다.

FUTURE(미래) : 배운 것을 미래에는 어떻게 적용할 지

1. 노코드 도구의 활용 능력 강화
웹플로우와 에어테이블처럼 노코드 도구를 활용한 웹 제작 기술을 꾸준히 연습하고 익혀서, 향후 프로젝트에서 더 빠르고 효율적으로 결과물을 낼 수 있을 것 같았다. 특히 데이터베이스 연동과 자동화 기능은 기획 업무에도 큰 도움이 될 수 있으므로, 이를 활용해 보다 효율적인 워크플로우를 제안하고 실행할 수 있도록 잘 연습해서 써먹어보아야겠다.

2. 다양한 플랫폼에 적합한 디자인 역량 개발
이번 디자인 카타에서 배운 내용을 바탕으로, 플랫폼별로 특화된 사용자 경험(UX)을 제공하는데에 도움이 많이 될 것 같았다. 실제 프로젝트에 적용하기 위해서는 안드로이드와 iOS의 가이드라인을 직전에 더 찾아보아야겠지만, 아예 무지하던 때보다는 훨씬 많은 지식들이 생겼다는 것에 의의를 두겠다. 앞으로도 사용자와 개발자가 모두 만족할 수 있는 통합적 디자인 솔루션을 고민해보고 제안할 수 있는 디자이너가 되고자 한다.

일정표 ✨

09:00 ~ 10:10 : 디자인 카타 진행(UI 컴포넌트 조사)

10:10 ~ 10:30 : 데일리 스크럼 진행 & 학습 계획 세우기

10:30 ~ 13:00 : 웹퍼블리싱 특강 시간(grid&flex)

14:00 ~ 16:00 : 웹 퍼블리싱 특강

16:00 ~ 17:00 : 실습

17:00 ~ 18:00 : 과제 작성

19:00 ~ 20:30 : 아티클진행 (flex&grid 정리)

20:30 ~ 21:00 : TIL 작성 & 내일 계획 세우기 & 마무리

오늘 공부 내용 : [css] Flex 와 Grid

flex와 grid 기능 정리 및 사용법 블로그 업데이트 : https://eunzi789.tistory.com/65

[주요 목적]

1. Flexbox (Flexible Box)

• 1차원 레이아웃 시스템
• 주로 한 방향(행 또는 열)으로 아이템을 배치하고 정렬하는 데 사용.
• 요소 간의 정렬과 간격 조정을 유연하게 처리.
• 사용 예시: 버튼 그룹 / 네비게이션 바 / 간단한 정렬
• 정렬 및 정돈을 위해 justify-content, align-items와 같은 속성을 사용

2. Grid (CSS Grid Layout)

• 2차원 레이아웃 시스템
• 행과 열을 동시에 관리할 수 있어 복잡한 레이아웃을 쉽게 구성할 수 있음.
• 정밀한 레이아웃 구성이 가능하며, 페이지의 전체 구조를 설계하는 데 적합.
• 사용 예시: 웹 페이지 전체 레이아웃 / 대시보드 디자인 / 카드형 레이아웃
• grid-template-rows와 grid-template-columns로 행과 열을 정의

[자동 정렬 및 공간 분배]

1. Flex

• 자식 요소들은 부모 컨테이너 내에서 자동으로 배치
• 공간 분배는 자식 요소들의 내용과 크기에 따라 결정
• 내용 기반(content-based)으로 작동

2. Grid

• 부모 컨테이너에서 정확한 행과 열 크기를 미리 정의할 수 있음
• 각 아이템이 특정 셀에 배치되도록 설정 가능
• 레이아웃 기반(layout-based)으로 작동

[장단점]

1. Flex

• 장점: 간단한 레이아웃에서 빠르고 직관적으로 사용할 수 있음.
• 단점: 복잡한 2차원 레이아웃에는 적합하지 않음.
• 사용: 요소가 한 방향으로 나열되고, 정렬 및 간격 조정이 필요한 경우.

2. Grid

• 장점: 복잡한 페이지 레이아웃을 설계할 때 강력한 기능 제공.
• 단점: 간단한 정렬 작업에는 불필요하게 복잡할 수 있음.
• 사용: 행과 열을 모두 관리하며, 더 구조적인 레이아웃이 필요한 경우

TIL 작성

실무를 하면서 사용하기 전에 항상 다시 찾아보고 적용했던 flex와 grid의 사용법과 헷갈렸던 부분을 이참에 다시 정리해보았다.  flex는 한방향으로의 배치를 조정하지만 grid는 행과열 모두 관리할 수 있다는 차이점에 대해 알게되었다. 이를 통해 각자 기능의 장단점을 파악하고 상황에 따라 적절히 선택해야한다는 것을 알게되었다. 

내용을 정리하면서 css레이아웃 설계에 대한 이해도가 더 높아졌으니 직관적이고 효과적인 디자인으로 구현해 보아야겠다.

일정표 ✨

09:00 ~ 10:10 : 디자인 카타 진행(UI 컴포넌트 조사)

10:10 ~ 10:30 : 데일리 스크럼 진행 & 학습 계획 세우기

10:30 ~ 13:00 : 웹퍼블리싱 특강 시간

14:00 ~ 15:30 : 웹 퍼블리싱 특강

15:30 ~ 16:30 : 과제 작성

16:30 ~ 18:00 : 아티클진행 (여러가지 지표 알아보기)

19:00 ~ 20:30 : CH.3 팀과제 디벨롭

20:30 ~ 21:00 : TIL 작성 & 내일 계획 세우기 & 마무리

오늘 공부 내용

과제 피드백을 통해 여러가지 지표를 만들 수 있다는 것을 알게되었다. 그 중에서도 가드레일 지표에 대해서 알게되었는데 공부하다보니 다양한 지표가 많다는 것을 알게되었고 이참에 함께 정리해보았다.

가드레일 지표 : 가드레일 지표는 말 그대로 안전 범위를 지켜주는 기준. 도로에 가드레일(철제 울타리)처럼 회사나 일하는 과정에서 "이 선을 넘지 않게 하자" 라고 정해놓은 기준을 가드레일 지표라고한다. 최소한의 허용 가능한 범위나 과도한 상황 방지를 강조한다. 아래의 예시처럼 최소한의 범주를 잡고 넘어가지 않는 것을 말한다.

• 비용 대비 매출 비율이 20% 이하로 유지될 것.
• 프로젝트 일정이 예정 대비 10% 이상 지연되지 않도록 설정.

링크 https://eunzi789.tistory.com/63https://eunzi789.tistory.com/61

TIL 작성

학습한 내용을 통해 지표는 단순히 숫자가 아니라, 업무나 프로젝트를 더 효과적으로 관리하기 위한 나침반 같은 역할을 한다는 것을 알게 되었다.  또, 현업에서 사용하는 지표들이 이렇게나 많다는 것도 알게되 었고 실무에서 활용하는 방법도 익혀보고 싶다. 앞으로는 다른 지표들, 특히 목표 지표와 동인 지표도 더 깊이 이해하고 싶다. 오늘 학습한 내용들을 잘 활용한다면 참여하는 프로젝트를 더 잘 관리할 수 있을 것 같다.

일정표 ✨

09:00 ~ 10:10 : 디자인 카타 진행(UI 컴포넌트 조사)

10:10 ~ 10:30 : CH.4 발제 듣기

10:40 ~ 11:30 : 팀 인사&소개 / 팀노션 작성 / 학습 계획 세우기

11:30 ~ 13:00 : 웹퍼블리싱 특강

14:00 ~ 15:50 : 웹퍼블리싱 특강

15:50 ~ 17:00 : 과제 작성 후 제출

17:00 ~ 18:00 : UX개인과제 디벨롭

19:00 ~ 19:30 : 튜터님 상담 

19:30 ~ 20:00 : 상담내용 정리 및 아티클 스터디

20:30 ~ 21:00 : TIL 작성 및 제출, 데일리 스크럼

오늘 공부 내용

현업에서 사용하는 UT의 혼용성과 사용자테스트/사용성테스트 각각의 목적과 차이점에 대하여 알아보기 
아티클 링크 :https://eunzi789.tistory.com/61

TIL 작성

UX 개인과제 피드백 튜터님의 상담을 받았다. 우선은 UT의 목적을 잘 파악해야하는데 그러기 위해선 사용자테스트와 사용성테스트의 차이점에 대해 알고 있어야한다고 말씀해주셨다. 그런 점에서 문제정의는 잘하였지만 아쉬운 부분이 있다고 하셨다.

첫번째로는 인사이트에 따른 개선디자인의 완성도 부분이었다. 나는 개선안으로 팝업을 제공하여 사용자가 페이지에 접속하자마자 내용을 인지시킬 수 있도록 하였는데, 튜터님께서는 팝업의 오른쪽 상단에 close 버튼이 있는것이 어색하고, 팝업 안에 공유하거나 북마크로 다른 행동을 유도하는 것이 다소 어색하다고 말씀해주셨다.

두번째로는 이미 랜딩페이지 메인에서 제공하는 메세지이며 팝업으로 한번 더 제공하여 중복되게 보여지는 것은 유저에게 피로도를 줄 수 있다는 것이었다. 또, 페이지를 들어가자마자 팝업이 뜨는 것은 사용자들의 이탈율을 높이는 데에 큰 영향을 준다는 것이었다. 팝업 형태가 아닌 다른 디자인 개선안으로 수정해보아야겠다고 생각했다.

한가지 더 조언을 해주신 것은 테스크가 직접적이지 않아야한 다는 것이었다. 사용자에게 좀 더 포괄적인 테스크를 던져야의미있는 인사이트를 발견할 수 있을 것이라고 덧붙여 말씀해주셨다. 

FACTS(사실, 객관) : 이번 일주일 동안 있었던 일, 내가 한 일

1. UX 개선 팀과제 진행 완료 후 발표

일주일간 버거킹 모바일 서비스 사용자의 경험을 개선하기 위해 개선하고 발표자료까지 완료한 뒤 제출하고 발표도 완료하였다. 발표직전까지 발표자료와 스크립트를 손보고 있었다 그래서 다른 팀원들 발표를 제대로 보지 못했다. 시간이 너무나도 빠르게 흘러간다

FEELINGS(느낌, 주관) : 나의 감정적인 반응, 느낌

1. 힘들다

UX는 개인과제도 그렇고 팀과제도 그렇고 전반적으로 너무 기빨린다.. 과정 하나하나를 헤쳐가는 것이 에너지가 많이 드는 것 같아서 피곤하고 할일도 많아서 죽겠다. 눈에 핏줄터져서 너무너무 힘들다 자고싶다

FINDINGS(배운 것) : 그 상황으로부터 내가 배운 것, 얻은 것

1. 계획의 중요성

(J라서 그런 것일 수도 있지만)바쁘고 다급한 상황에 너무나도 많은 에너지가 소모되고 스트레스를 받는 성향이라 되도록이면 마감기한을 여유롭게 잡아두는 편이다. 금요일이 마감일이라면 목요일까지 마감한다던지.. 그런 방법이 다른 사람들에게는 힘들 수도 있으니 설득하진 않았지만, 이번 팀과제는 유독 힘이 들었다. 진행상황이 계획한 스케줄보다 더 늦게 진행이 되었고 덕분에 발표날에도 마감치느라 정신없이 시달렸다 팀원들도 모두 그랬고,, 또 있을지 모르겠지만 팀과제가 있다면 계획을 좀 타이트하게 잡고 여유시간을 가지는 방법을 권유해야겠다

2. 책임감

일을 하다보면 각자 일을 맡아서 진행한 뒤 만나서 취합하는 과정이 많은데 효율적이라고 생각해서 좋아한다. 하지만 취합하는 과정에서는 상대의 작업물도 내 작업물처럼 애정을 가지고 열심히 이해한 뒤 우리 모두의 작업물로 변경하는 시간이 필요하다고 생각한다. 내가 한 부분을 붙인다던지 누가해온 부분을 붙이면 공동작업물이라는 책임감이 자꾸 낮아지는 것 같았다. 나 역시도 알아서 잘 하셨겠지라는 마음으로 바쁘니까 흘려들었었는데 그런 점들이 나중에 완성도 측에서도 좋지 않은 점 같다고 생각이 들었다.

FUTURE(미래) : 배운 것을 미래에는 어떻게 적용할 지

1. 나를 다루는 법 알아가기

좋은 결과물을 위해서는 어쩔 수 없이 나를 쪼을 수 밖에 없을 것 같지만 그럼 또 더 좋지 않은 방향으로 흘러 갈 수 있으니 적절한 밸런스를 잘 찾아서 프로젝트를 완료하는 것이 좋을 것 같다. 그런 최적의 방법을 찾기 위해선 아직 많은 시행착오가 필요한 것 같지만 칭찬은 고래도 춤추게 하니 우선 칭찬과 단 것으로 기분을 업시킨 후 힘들지 않다는 생각을 하게 뇌를 속이고 노동을(?) 시키는 방법을 일단 시도해 보아야겠다 - 

일정표 ✨

09:00 ~ 10:10 : 디자인 카타 진행(모바일 컴포넌트 자료조사_ list/card)

10:10 ~ 10:30 : 데일리 스크럼 진행 & 학습 계획 세우기

10:30 ~ 11:00 : 디자인 카타 - list/car 예시자료 찾기

11:00 ~ 13:00 : 개인과제 - 진행 순서 및 계획세우기/해야할 일 리스트만들기

14:00 ~ 17:00 : 개인과제 - 사용성 테스트 스크립트짜기/모집공고 만들기

17:00 ~ 18:00 : 피그마 - 작업 정리

19:00 ~ 20:30 : 개인과제 필수2 목록 체크 및 계획세우기 

20:30 ~ 21:00 : TIL 작성 및 제출, 데일리 스크럼

오늘 공부 내용

오토레이아웃, 컨스트레인츠, 컴포넌트를 만드는 이유, 레이아웃 구조를 파악하는 생각의 흐름과 같이 작업의 원리 위주의 설명을 들을 수 있었다.  또 질문에 대한 답변도 주셔서 평소 UI 작업을 진행하면서 궁금했었던 부분들이 해소되었던 특강이었다 그중 기억에 남았던 부분과 몰랐던 부분에 대해 정리를 해보았다.
특강 정리한 링크 : [특강] 피그마 활용법

TIL 작성

피그마로 UI 작업하면서 헷갈리거나 궁금했던 부분들에 대해 실무진에게 답변을 들을 수 있는 좋은 시간이었다. 개인과제를 하면서 궁금했었던 부분도 알게되었다! 컨스트레인츠와 오토레이아웃을 사용하긴 했지만 명확한 차이는 몰랐는데, 오늘 특강을 통해서 시원하게 알아버렸다.

또 컴포넌트의 이름같은 경우는 생김새에 따라서 이름을 짓고 사이즈와 버전 등등을 통해 정해진다는 것을 알았다. 그 이유도 기억에 남았다. 닫기 버튼의 경우 규칙을 정하지 않았더니 각자 작업한 뒤 모았더니 닫기버튼의 이름이 수십가지가 된 적이 있다는 예시가 기억에 남았다.

실제로도 개발하면서 어디서는 popover/popup/alert/overview/swal(sweet alert)등 알고 보면 각각의 용도와 기능이 다 다른데도 불구하고 한 사이트 안에서 이름만 수십가지인 경우를 보았기 때문이다. 그래서 협업을 할 땐 시간이 많이 들더라도 반드시 가이드라인 세우고 작업을 해야한다는 것을 다시 한번 느꼈다. 

그리고 반드시 이렇게 해야한다가 아니라 팀이나 그룹에서의 규칙과 가이드라인을 따라 유연하게 사용하면되고 나같은 경우엔 어떻게 쓴다고 예시를 보여주신 것도 좋았다. 그 예시를 보면서 다음에 나도 이름을 짓게 된다면 참고해야겠다고 생각했었다.  

일정표 ✨

09:00 ~ 10:10 : 디자인 카타 진행(모바일 컴포넌트 자료조사_ list/card)

10:10 ~ 10:30 : 데일리 스크럼 진행 & 학습 계획 세우기

10:30 ~ 11:00 : 디자인 카타 - list/car 예시자료 찾기

11:00 ~ 13:00 : 개인과제 - 진행 순서 및 계획세우기/해야할 일 리스트만들기

14:00 ~ 17:00 : 개인과제 - 사용성 테스트 스크립트짜기/모집공고 만들기

17:00 ~ 18:00 : 피그마 - 작업 정리

19:00 ~ 20:30 : 개인과제 필수2 목록 체크 및 계획세우기 

20:30 ~ 21:00 : TIL 작성 및 제출, 데일리 스크럼

오늘 공부 내용

특강이나 카타 시간을 통해 들었던 디자인 용어와 개념

블로그 링크 : https://eunzi789.tistory.com/55

TIL 작성

강의나 카타시간에 들었던 용어를 메모장에 한켠에 적어두고 수업이 끝난 후 찾아보거나, 설명을 간단하게 적어두었었는데 시간이 조금 괜찮은 듯해 정리를 하면서 다시한 번 읽어보게 되었다. 디자인과 관련된 용어들이니 한번쯤은 들을 수 있을 수도있고 그때 또 모르지 않기위해서 모아서 정리를 해보았다. 

FACTS(사실, 객관) : 이번 일주일 동안 있었던 일, 내가 한 일

1. UX 강의듣기

 이번주 내내 개인학습시간을 가졌고 본격적인 UX 공부를 시작하게되었다. UX 기획 및 리서치 강의였고 5주차까지 완강하고 중간중간에 껴있던 과제도 다 제출완료했다.!

2. UI 컴포넌트 조사

아침마다 진행하는 디자인 카타 시간..ㅎ bar 대한 자료 조사를 진행한 뒤 발표까지 완료하였다. 다른 컴포넌트 조사 발표도 들을 수 있었다. 

3. 새로운 팀 배정

새로운 팀원들과의 일주일을 보냈당

FEELINGS(느낌, 주관) : 나의 감정적인 반응, 느낌

1. 어려운걸요

UI강의는 그래도 실습을 하면서 재미가 있었는데, UX 강의는 기법들이 많아 어렵기도하고 머릿속에 한번에 다 들어오지않아 헷갈렸고 듣고있다보면 루즈해지기도 했다..

2. 멘붕

bar컴포넌트는 참.. 다양한 이름을 가졌구나..? 조사를 하면 할 수록 bar를 지칭하는 명칭이 여러가지여서 정리하느라고 애를 먹었고 시간도 많이 들었다. 

3. 아직은 어색한

새로운 팀원들과 인사를 나누고 아침저녁으로 스몰톡을 하면서 조금 친해진듯하다(내생각)

FINDINGS(배운 것) : 그 상황으로부터 내가 배운 것, 얻은 것

1. UX 기획 및 리서치

사용자 중심의 설계와 프로젝트에 적용하는 방법론에 대해 여러가지를 많이 알게되었고, UX 디자인의 단계에 대해서도 체계적으로 알 수 있었던 시간이었다. 각 단계에서 필요한 기법을 활용하는 것이 중요할 것 같았다.   

2. UI 컴포넌트

bar 말고도 버튼과 토글버튼에 대한 종류와 기능도 알 수 있는 시간이었다. 그 기능에 해당되는 것과 벗어나는 것들을 잘 짚어주셔서 정리를 할 수 있었다. bar 컴포넌트가 제일 많은 혼동이 있었던 것 같은데, 튜터님께서 기기별로 부르는 명칭과 주로 사용하는 디바이스를 표형태로 정리해주신 것이 명확하게 차이점을 이해할 수 있어서 좋았다. UI 디자인에 중요한 주요 컴포넌트에 대한 지식이 업그레이드 되었다고나 할까.!

3. 개인과제 공유 시간

새로운 팀원들과 개인과제 피드백을 공유하는 시간을 가졌었는데, 내가 작업한 것만 보다가 다른 사람들의 작업물을 보니 어떤 부분이 모자란지 어떤 부분을 본받아야 할지가 느껴졌다. 특히 과제를 진행하기 위해 자료 조사를 꼼꼼히 진행한 것이 인상깊었고 실제로 과제를 진행할 때 자료들을 참고하면 많은 도움이 될 것 같았다.

FUTURE(미래) : 배운 것을 미래에는 어떻게 적용할 지

1. 문제 해결 능력 기르기

사용자의 요구와 행동을 분석하고 결과에 어떻게 도출할 것인지에 대한 능력을 기르기 위해 강의 내용을 꼼꼼히 정리하고, 개인과제를 진행하면서 습득해보아야겠다. 과제를 하다보면 사용자 리서치 스킬도 올라갈 것 같다. 실용적이고 참신한 솔루션을 도출하는 과정을 연습한다고 생각해야겠다.  

2. 실무에서 써먹기

다양한 명칭을 알았고 그것이 어디서 어떤부분을 지칭하는지에 대해 알아보았으니 이제 실무에서 눈치껏 바로 캐치할 수 있을거라고 생각한다.! 까먹기 전에 정리를 해두고 종종 읽어보아야겠다.

3. 

시작이 반이라는 말이있다. 프로젝트를 진행할때 기획부분은 시간을 많이 잡아먹는다 생각하여 빨리 끝내고 다음 단계를 쳐내는데에 급급했었는데, 생각해보면 탄탄하지 않았던 기획은 빈틈이 있고 프로젝트를 진행할 때에 영향이 꼭 있었던 것 같다. 그런 경험들과 오버랩되면서,, 기초적인 부분들에 시간을 들이고 정리도 틈틈히하는 공을 들이는 것을 소홀히 하지 않아야 겠다.

일정표 ✨

09:00 ~ 10:00 : 튜터님과 디자인 카타 진행(UI컴포넌트 발표)

10:10 ~ 10:30 : 데일리 스크럼 진행 & 학습 계획 세우기

10:30 ~ 11:00 : 디자인 카타 (UI 컴포넌트-bar) 코멘트 및 내용 정리

11:00 ~ 11:30 : 튜터님 2차 상담

11:30 ~ 13:00 : 개인학습(UX 기획 및 리서치) 4주차 강의 내용 정리

14:00 ~ 16:30 : 개인학습(UX 기획 및 리서치) 4주차 과제 제출

16:30 ~ 18:00 : 개인학습(UX 기획 및 리서치) 5주차 강의 듣기

19:00 ~ 20:00 : 개인학습(UX 기획 및 리서치) 5주차 강의 내용 정리

20:00 ~ 20:30 : 팀원들과 개인과제 피드백 공유 시간

20:30 ~ 21:00 : TIL 작성 및 제출, 데일리 스크럼

오늘 공부 내용

1. 피그마

• 스타일 복사하는 법 : 마우스 우클릭 - Copy/Paste as - Copy Properties
• 스타일 복사 단축키 :  [ Ctrl ] + [ Alt ] + [ C ] / [ Ctrl ] + [ Alt ] + [ V ]
• 프레임 벗기기 : Ctrl + Shift  + G 

2. 튜터님과의 2차 상담

• 실무 및 포폴 관련 질의응답
• UI 화면 구성시 소수점 단위에 대한 질문

TIL 작성

1. 피그마

4주차 과제를 하면서 스타일을 하나하나 적용하려니 너무 귀찮았다. 워드나 한글문서처럼 스타일을 복사할 수 없을까 싶어 검색해보았는데 역시나 방법이 있었는데 내가 모르는 것이었다.

또 개인과제를 고치면서 왜 내 버튼은 글자가 넘치면 아래로 내려가는 것일까싶어 연구해보았더니. 텍스트 자체를 프레임을 씌운 뒤 또 프레임(버튼프레임)에 넣어서 그런 것이었다..! 그래서 찾게 된 프레임 벗기기 단축키.. 텍스트의 프레임을 단축키로 제거하니 긴 글자도 알아서 잘 펼쳐지고 괜찮았다. 알게 된 것은 또 기록해두는 것이 인지상정.

2. 튜터님과의 2차 상담

Q. UI 화면 구성시 소수점으로 떨어지는 frame을 어떻게 해야할까?

소수점 단위를 최대한 지양해야겠지만, 실제 개발을 들어갈 때 가로값을 따로 지정하지 않기 때문에 더 신경을 써야하는 부분은 fill모드로 값이 다 채워져 있는지를 확인 하는 것. 예를들어 마진값이 20px이고 컨텐츠들의 gap이 20px일때 화면에서는 남은 사이즈 안에서 나눠 들어가기 때문에 그 값이 소수점으로 떨어지더라도 어쩔 수 없는부분. 

Q. 포폴 분량을 어떻게 조정하는지?
발표할때의 포인트와 면접의 포인트가 다르며 장표의 구성도 다를 수 있음.

포폴엔 모두 다 담되 면접때는 중요 포인트만 짚어서 흐름으로 이야기하는 것이 좋음
tip) 질문 여지를 남겨두는 발표를 하는 것이 좋을 듯

Q. 실무에서 UX를 위한 데이터를 볼수있는지?
회사 규모에따라 다른데 큰 규모의 회사에선 데이터 사이언티스트 같이 데이터를 다루는 팀이 거의 있고 그 팀과 함께 협업해야함.  혼자서 모든 과정을 진행하는 것이 아니고 서포트하는 팀이 있으니 걱정하지 않아도 됨.
작은 회사의 규모일 경우 팀이 따로 있진 않겠지만 데이터를 볼수있도록 설정해 놓았을 수도 있음. 의지만 있다면 데이터를 활용하는 것이 불가능하진 않음.