해낸 게 너무 없음 + 안 좋은 기억 떠오름 이슈로 현재 의욕도 기분도 바닥친다..
다죽자그냥
0. 오늘의 노래
그래도 오늘은 오전부터 이 노래가 넣고싶었어
1. 오늘 학습 키워드
| 오전 학습 목표 (~14시) | 오후 학습 목표 (~19시) | 저녁 학습 목표 (~21시) | |
| 손민정 | ✅ 디자인 카타 ⬛ 2-2강 HW 제출 |
⬛ 4강 완강 ⬛ 질문 리스트업&제출 |
✅ TIL 작성 ⬛ 미달성 목표 진행 ✅ 과제 발제 확인, 위크 플랜 재정립 |
2. 오늘 학습 한 내용을 나만의 언어로 정리하기
오늘은..
뺑이 외에는 정말 한 게 없어서..뭘 적을 게 없다..ㅋ.ㅋ.ㅋㅋㅋ....
09:00 ~ 09:55
디자인 카타
새로운 팀원들과 함께하는 첫 디자인 카타였다. 다들 IXTP인 만큼, 나도 아침에는 좀 더 텐션다운하고 진정한 채 참여했다. 팀원 한 분이 챙겨오신 출처불명(?)의 템플릿으로 새롭게 시작.
오늘의 주제는....🔗
어느 것이 더 낫다 다투는 것이 아닌, 각 방식의 장점을 묻는 주제.
때문에 템플릿을 따라 작성하되, 마지막 그룹 토의에서는 장점과 단점을 모두 다루는 방향으로 진행했다. 난 A안의 장점과 단점, 추가적으로 두 방안을 하이브리드해 개선하는 방식에 대해 다루었는데, 장점에 관해서는 대부분의 팀원이 동일한 의견을 보였다.
발전안에 대해서도 얘기를 나누는 것은 어떨까 했지만, 충분하다는 의견을 수용해 개별학습을 진행하기로 했다.
09:56~
3. 레이아웃과 그리드 시스템 수강 시작.
대부분이 알고 있는 얘기였으나, 이번에도 물론 잘 몰랐던 내용이 있었다.
오늘 예상치를 다 채우지 못해 아쉽기도 하니, 내일 일정을 끝마친 뒤 좀 더 복습해야 성에 찰 것 같다.
배운 것 중 흥미가 있었던 것, 새로운 것을 위주로 적어 보겠다.
3강의 시작은 레이아웃.
레이아웃의 시작은 당연지사 해상도 설정이다. 점유율이 높은 해상도를 아는 것이 범용성 있는 디자인의 첫 단계일 터. Statecounter의 서비스에서 해당 정보를 확인할 수 있다. 🔗
- 안드로이드는 380*800, IOS는 375*812.
- 고정과 가변 영역을 설정하고 개발자와 공유해야 의도한 대로의 디자인이 가능하다는 말씀.
디자인 영역의 위치를 가장 최적으로 배치하기 위한 고정과 가변 영역.
그것도 기억에 남는다. 디자인 화면에서 보통 좌우의 여백은 모든 페이지(아마 말 그대로 '페이지', 즉 화면을 말씀하시는 것 같긴 한데. 복습해야겠다.)
배너와 이미지는 보통 가변의 영역이라는 말도. 아래 사진을 첨부하겠다. 예시인 캐러셀 영역이다.
컬럼의 권장 갯수는 보통 4개라고 하셨다. 나도 원래는 4개로 사용했는데, 디자인 아티클 리서치 중 모바일 화면에서도 2/3/6으로 나눌 수 있는 6Column을 사용한다는 글을 보고 새로이 시도해 보는 중이었다..만. 밀리의 서재도 그렇고, 여기서도 4Column을 권장하는 걸 보니 역시 구관이 명관이다 싶더라. 복귀했다.
- Gutter와 Margine의 권장값도 있었다. 물론 케바케라는 건 당연한 일이겠고.
- Gutter의 권장값은 Mobile에서 8~16, Tablet에서 16~24, Desktop에서 24~32.
4*2 ~ 4*4
4*4 ~ 4*6
4*6 ~ 4*8..어라? 규칙이 보인다?!
- Margine의 권장값은 Mobile에서 16~20, Tablet에서 20~36, Desktop에서 24~36이랜다. 이건 기억할 수 있을까..
사실 숫자를 달달 외울 필요가 있을지는 모르겠다. 아마 튜터님들께 여쭙는다면 그냥 알고만 넘어가도 된다..고 하지 않으실까, 다른 곳에 더 관심을 기울이길 원하지 않으실까 싶기도. 그런데 매번 이걸 찾아보는 것도(사실 새로 어플 만들 게 아니면 새로 Grid를 만들어 사용하지는 않겠지만) 번거롭고, 뭣보다 배우는 의미가 없는 것 같다..! 예전에도 사용하긴 했는데, 이전에 만들어둔 Grid만 사용하다 보니 더 기억에 안 남는 것도 같아서.
Break Point에 대해서도 다루셨다. 반응형 디자인 시 레이아웃이 변환되는 지점을 칭한다고. 듣고 나니 예전에 들어 봤던 것도 같더라. 말 그대로의 Point!
이건 질문함에 넣어두었다.
- Break Point의 권장값은 Mobile 0~599, Table은 600~1024, Desktop은 1024~라고 적혀 있다. 그럼 데스크탑에서 반응형 웹페이지를 제작할 때는 Table&Moile과 나뉘는 600, 1024의 Width 값을 포인트로 잡는 걸까? 지금 당장 기억나는 웹페이지만 해도 두 개 이상의 Break Point를 잡았는데. 애시당초 Width 길이는 맞을까? 개인적으로도 알아봐야겠다.
데스크톱의 경우 12 Column을 사용하는 것도 알고는 있었단 내용. 이유까지도 기억했을지는 모르겠다. 일단 지금은 알고 있어서ㅋㅋㅋ
11:03~
여기서 3강을 완강한 모양. 2-2강의 숙제를 해치우며(집착하며)아티클도 모아두었다.
- 디자인카타 중 발견한 페이지. 회원가입 과정 중의 이탈율에 대해 다루고, 그를 감소시키는 방안에 대해 고민했다. 사실 기획..이라고 해야 할까, 우선 UX에 집중해 해결 방안을 내놓으신 것 같기는 하다. 그런데 도출 방안과 해결안 제시가 상당히 흥미진진해서, 이탈율이 얼마나 줄어들었을지 결과가 궁금할 정도! 여기 링크를 별첨한다. 🔗
자기소개하다가 60%가 이탈된다고?️ (이젠 20~39살까지 쓸 수 있어요) | Disquiet*
안녕하세요. 지인 소개팅 플랫폼, 내친소입니다 :)저희 팀은 2주 이내의 주기로 스프린트를 빠르게 진행하고 있습니다. 이번 스프린트는 '회원가입 유입률 개선'을 목표로 2주간 스프린트를 진행
disquiet.io
- 이건 디자인 카타의 주제와 관련된 링크. 멀티스텝폼(A안)과 싱글스텝/원스텝폼(B안)에 대해 비교 분석한 글이다. 영어 원문이니 울렁증 주의! 😵🔗
- 그리고 이건 다양한 (아마도)IT 분야에서 일하시는 분들의 아티클을 볼 수 있는 사이트. Disquiet*를 소개한다. 🔗
Disquiet*
IT 서비스 메이커들의 소셜 네트워크. 디스콰이엇에서 서로의 프로젝트를 공유해 보세요!
disquiet.io
호..작성하다 보니 오늘 배운 것 때문인지, 주소 미리보기 박스 하단의 이펙트도 관심이 간다. 이건 어떤 레이아웃으로 묶였을까?
- 아직 끝이 아니다. 다희 튜터님께 권장받았던 디자인 시스템 가이드 공부 중, 원티드의 가이드 제작기를 발견했으니까! 🔗
원티드 10주년, 원티드 디자인 시스템 제작기 | wanted blog
원티드 디자인 시스템은 우리가 함께 일하는 방식을 고스란히 담은 시스템입니다. 디자인 시스템을 오픈 소스로 공개하는 이유는 바로 '이것' 입니다.
blog.wantedlab.com
이건 특히나 인상 깊은 아티클이라 눈을 번득이며(ㅋㅋㅋ) 긁어 모았다. 특히 인상깊은 부분은 이것.
이거 정말 좋은 참고 자료인걸 싶었다. 상기 사진에서 내가 집중한 건 이 부분이다.
- 사이즈 용어를 한 눈에 확인 가능하도록 직관적으로 수정
- 좌우 콘텐츠 배열은 UI 용어와 동일함. Leading/Trailing Content.
- 양가 선택 시 Boolean 애용하기로, 가급적 기본값은 False로 두기. -> Fales 기본값은 왜일까? 필요할 때 키는 게 더 효과적일까? 생각할 거리가 많아져서 좋다!
아 이게..텍스트 복사가 되네?
협업 시 스크럼은 필수인 만큼 효과적이고 효율적인 시간이 되어야 한다고 느낀다. 최근의 회사에서 인턴 생활을 하며 뼈저리게 느낀 것. 내가 지금 무슨 일을 하고 있는지, 얼마나 진행했는지, 어떤 도움이 필요한지, 다른 팀원이 무슨 업무를 진행하고 있는지 아는 건..
내 생각보다도 더 중요하다!!!
11:24~
아직도 하루 끝이 안 났다고? 이 때 실습 HW을 제출하려고 했다고???
이 때 정말 땅을 팠다.
좀 더..제대로 하고 싶은 욕망 때문이었을까..
아님 좀 더 쉽게 꼼수를 부리려던 길이 가시밭길이어서 헤치고 나오는 데 배로 시간을 소요해서일까.....
진짜로 거짓말 안 치고 너무 우울했다.
이유 1. Boolean Property가 말을 안 들었다.
아직도 이름이 입에 안 붇는다. 불리언 프로퍼티. 불리언 프로퍼티..이름이 뭐 이래? 힘들다 진짜로. 이걸 무료배송에 작용시키고 싶었다. Icon+Text로 합쳐진 그거. 지금 찾아보니..뭐? Module은 아니고. Componet? 아닌데? 다른 이름이 있었는데? 아직 안 배웠나?
화가 올라온다..아무튼 그거. 무료배송이 적용되는 Product(보통 이렇게 쓰는 게 맞나 모르겠지만 일단 내가 설정한 레이어 이름이다)가 있고 아닌 게 있으니까. 그 외에도 몇 가지 더 껐다 켤 수 있으면 좋겠다! 간편하겠다! 생각했지.
내가 한 질문은 초기의 궁금증 외에도 몇 개 더 있었다. 대부분이 파생 질문이긴 했지만. 아무튼 이것 때문에 시간도 없어서(우울했다 ..정말로.🥺) 질문 리스트업도 못하고 튜터님께 찾아갔다. 개인 정비 시간이 되기 10~20분 전에....😓
허둥지둥하는 중생에게 OK 사인을 날려주신 정기석 튜터님..감사를 표한다.
Q. 무료배송 없애고 싶어요! 어떡하나요?
우선 여러 방법이 있다고 하셨다.
01. True/False로 Variants 만들어서 하는 방법.
직접 보여주셨다. 여기까진 나도 아는 방법. 구태여 차지하는 페이지를 늘려야 해서 선호하진 않는다.
튜터님께서도 이것보다는 다른 방법을 권장하셨다.
02. Appearance: Boolean Property. 즉 껐켰기능을 사용하는 방법.
내가 원하던 게 바로 이거. 훨씬 수월한 방법이라고 알려주셨다.
이렇게 비유해 볼까.
Variants는 폴더, Boolean Property는 폴더-읽기전용 등의 속성이다.
난 텍스트: 사진을 하나 만들었다. 아주 예쁜 사진이지. 거기 읽기 전용의 속성을 걸고 싶다. 왠지는 묻지 마라.
그럼 이렇게 된다.
사진(아주 예쁜💖✨🌺): 읽기전용(으로 내가 방금 만듬. Boolean 적용은 한다고~~)
이걸 그대로 두면 Boolean이 작동을 하냐? 아니. 컨C컨V로 Component 만들어야겠지.
근데 여기서 문제.
나는 이 아주 예쁜💖✨🌺 사진을 내 소중한 [가나디💗] 폴더에 넣고 싶다. 근데 그럼 Boolean은 작동을 안 한다. 당연하다. 너 뭐 돼? 갑자기 이 거지같은 곳에 처박아놓고 정상작동을 바라?
아무튼 이런 상황이다.
📁[가나디💗]
ㄴ 사진(아주 예쁜💖✨🌺): 읽기전용(Boolean)
👆 click*2!
뭐야? 이 자식 왜 일을 안해? Nes..어쩌구도 안 보여? 작동이 안 되잖아.
당연하지. 백날 거기서 찾아봐라 보이나.
Boolean을 걸고 싶었다면, 하다못해 ⎆ Nested 버튼이라도 찾으려면 ✌이렇게 ✌ 했어야 했다.
Step. 2
👇 click click
📁[가나디💗]
ㄴ 사진(아주 예쁜💖✨🌺): 읽기전용
Step. 3~5
💬 : 속성(Properties) - 특성( + button) - 읽기 전용( ⎆ Nested instances)
📁[가나디💗]
ㄴ 사진(아주 예쁜💖✨🌺): 읽기전용
끝.
아마도. 이게 맞을지는 모르겠다. 되새기기 위해 재현하다 보니 나에 대한 신뢰가 녹아 사라지는 느낌이랄까🤔 나중에 한 번 더 여쭤보거나 이 꼬라지를 보여드리고 확인이라도 받아야할까보다. 수치심은 전부 내려놓기로 했으니까. 음..!
아무튼 구조는 너무 복잡하게 만들지 않는 것이 좋기는 하다.
왜겠어요?
이유 2. 텐션이 하락세였다..
하루치 ENFP스러움을 다 채우지 못했고..수면부족도 좀 있었던 것 같고..대충 그렇다. 주말 일정 때문에 조금 우울하기도 했던 듯.
19:05~
개인 과제 발제.
뭐..음..어..그랬다.
이건 진짜 더 뭘 말해야 할지 모르겠다. 밀린 일을 보면 느껴지는 암울함 같은 거? 사실 이 때는 좀 미래가 암울해지고 너무 팍팍해져서 의욕 없이 끄적끄적 필기만 했다. 어휴 할 맛 안 나 하면서.
그래도 열심히 필기한 게 몇 개 있어서 옮겨 둔다.
각 구조들이 어떤 구조로 이루어져 있는지 클론디자인 진행
클론 디자인이 "왜 이렇게 디자인되었는지', '어떤 디자인 원리가 숨어 있는지' 설명할 수 있어야 한다.
-
-
각 구조들이 어떤 구조로 이루어져 있는지 클론디자인 진행
- 클론 디자인이 "왜 이렇게 디자인되었는지', '어떤 디자인 원리가 숨어 있는지' 설명할 수 있어야 한다.
- 클론 디자인 대상: 채용 플랫폼
- 필수 과제 선행, 이후 도전 과제 진행.
-
-
-
1단계 UI 구조 분석: 큰 것부터 작은 것까지.
필수 과제
-
2단계 UI 스타일 분석: 오픈 라이브러리(=공개된 디자인 가이드) 활용한 고도화3단계 UI 구조 설계: 작은 것부터 큰 것 순으로 제작4단계: 클론 디자인
-
UI 컴포넌트화
도전과제
-
- 모든 작업물을 영문으로 하는 걸 권장. 실무에서도 영문만 사용.
- 소문자 대문자 등 기준도 정하는 게 좋음. 모두 동일하게.
- Module: Section 안에서 기능이나 의미가 같은 것끼리 묶은 중간 크기의 영역. 보통 반복되는 레이아웃 단위로 나타남(카드 리스트, 배너 리스트 등)
- 캡쳐 화면으로 작업할 때 픽셀이 깨지기 때문에 여백값이나 사이즈가 조금씩 맞지 않을 수 있음.
- 2차적으로 어떤 사이즈가 사용되었는지 가능하면 원본을 확인하는 게 좋음 -> 오픈 라이브러리 사용 권장
- 아이콘이나 그래픽은 그리려면 시간 많이 듬. 오픈 라이브러리에서 가져와라..!
-
ㅅㅂ난왜그고생을
-
- 네이밍-역할은 옆에 텍스트로 적어두기
-
3단계 설계
-
- 작은 영역 -> 큰 영역.
- 컴포넌트 작업 안 해도 ㄱㅊ다.(시간 ㅈㄹ많이걸릴듯 ㅅㅂ)
-
이상 끝.
다음주에 질문드릴 것 리스트만 정리해 둬야겠다. 벌써 자정을 넘겼소..
Q1, 2.
Q3.
Q4.
이상 끝!
3. 학습하며 겪었던 문제점 & 에러
- 문제&에러에 대한 정의
- 비효율적인 시간 소요: 과제 이해도가 낮아 어려운 길을 선택함. 타이포그래피 강의의 HW인데 벌써 컴포넌트에 아이콘 제작에 이것저것을 하라고 하시겠냐고..사실 나도 알고는 있었다. 그게 더 편하거나(아니었다.) 빠르거나 효율적이거나..아니 뭐 공부에도 도움될 것 같았고....
- 1에 따른 스트레스가 상당했다. 사실 어제부터 좀 쌓였던 것 같다. 팀원들과의 소통 부재(로 느껴졌다), 텐션 하락, 피로에 이것저것 겹쳐서. 냉소적인 것과 T적(사고적)인 건 완전 다른데, 내가 종종 보이는 T적(으로 보이기는 할까?) 성향들은 사회 생활에 찌들어서 생긴 부분이라..맞닿은 게 있는 것 같기도. 아무튼 냉소적인 건 나한테도, 남한테도 도움이 안 된다. 잘 분리하거나 차라리 EXFX적이기만 하자. 그게 낫겠다.
- 내가 한 시도
- 어느 정도 완성한 이후에는 시원~하게 드롭했다. 난 진짜로 할 만큼 했다. 의문인 자는 위의 저걸 다시 보고 와라. 멋지지? 나도 안다😎
- 좋아하는 노래 메들리를 들으며 회고를 갈겼다. 생각보다 나..뭐 많이 했더라? 완전 대견. 완전 뿌듯. 완전 보람찬 하루였다. 이거 봐라. 한 게 너무 많아서 다음날 12시 35분까지 TIL을 쓰고 있는 날..^^
- 해결 방법
- 새롭게 알게 된 점
- 이 문제&에러를 다시 만나게 되었다면?
잘 해야지 뭐..
위에서 많이 적었다. 넘어가자. 내일도 일어나야 한다.
4. 내일 학습 할 것은 무엇인지
| 오늘 달성한 목표 | 오늘 달성 못한 목표 & 이유 | 내일 목표 | |
| 손민정 | - 디자인 카타 - 3강 완강: 목표 45% 달성 - 2-2 HW 진행(40%) |
- 3강 HW 제출, 4강 수강 : 2-2 HW 과도한 심화 작업(컴포넌트 등) - 질문 리스트업&제출: 미수강 |
- 4-3강 완강, HW 제출 준비 완료 - 디자인 북 읽기 |
미친 것
컴포넌트 안 해도 되는데..ㅋㅋㅋㅋㅋㅋ생각 겁나 많이 했네..^^
과제는 과제대로 못하고, 강의는 강의대로 못 들으니 기분이 안 좋다. 오전을 너무 화이팅 없이(ㅋㅋ) 시작했나 싶기도 하고.
아니?
넌 짱이야..
주말에도 공부할거잖아..
'대외활동_스파르타클럽 UXUI 디자이너 10기' 카테고리의 다른 글
| [TIL] 쓸시간도없다걍 (1) | 2025.12.09 |
|---|---|
| [TIL] ㅈㄷㄷ ㅈㄷㅇ (1) | 2025.12.08 |
| [TIL] 새로운 팀원들과 새로운 마음으로 이 짓 두번은못한다내가진짜로 (0) | 2025.12.04 |
| [내일배움캠프] 포폴 검수받고 이리저리 푸닥거리기 Day (0) | 2025.12.03 |
| [내일배움캠프] 오늘은 오늘의 해가 뜨고 내일은 내일의 일이 밀린다 (0) | 2025.12.02 |
