TIL (Today I learned)
🙄 오늘 나는 무엇을 했나요
- 코딩 주차 발제
- 튜터님 1:1 면담
- [왕초보] 코딩이 처음이어도 쉽게 배우는 웹개발 A to Z - 1주차 수강
- 특강 1. 진짜 문제 발견하기
- 특강 2. 포트폴리오 세션 (2)
😰 오늘은 어떤 문제를 겪었고, 앞으로는 어떻게 해결할 것인가요
오늘은 튜터님과의 대화를 통해
그동안 안 풀렸던 문제와 고민들에 대한 답을 얻을 수 있었다.
어떻게 하면 글을 잘 쓸 수 있을지에 대해 여쭤봤는데,
아직은 한번에 한문장으로 하면 당연히 어려운 게 맞다며
길게 써도 괜찮으니 일단 내가 생각나는대로 글을 써보고
요약하는 방식을 사용해보라고 알려주셨다.
머리속에서 생각만 하고 정리하는 것보다
글쓰기는 워딩으로 직접 써보는 게 좋다고 하셨다.
그러고서 최종은 튜터님이랑 같이 얘기해보는 것으로 !
다음번에는 이런 방법을 꼭 활용해봐야겠다.
팀 프로젝트에서 팀원들과 대화하는 방식에 대해도 여쭤봤는데,
역시 지난 특강처럼 근거에 대해서 얘기하는 것이 가장 좋은 방법이었다.
그리고 의견이 다를 때는 투표하는 방법도 적극 활용해보라고 하셨다.
제일 안 좋은 방법은 튜터님께 가서 여쭤보자고 하는 것이라고 했다.
지금 우리는 문제를 해결하고 사고하는 방법을 배우는 과정인데
제 3자를 끌어들이는 것은 아무 도움이 되지 않는 최악의 방법이라고 하셨다.
상대방을 납득시키는 것도, 안되면 포기하고 납득하는 것도
다 좋은 경험이 될 수 있다고도 말씀해주셨다.
추가로 UXUI에서 어떤 점이 어렵냐고 여쭤봐주셔서
여전히 컴포넌트 만드는 것에 대해 바로 인지가 안되는 것에 대해서는
클론 디자인을 추천해주셨고, 가장 작은 단위부터 쪼개서
거기에 붙이고, 또 붙이고 하는 방법을 사용해보라고 알려주셨다.
그리고 아직 UI 명칭에 대해서 잘 모르는 것은
mobin에서 UI element로 구분되어 있는 곳에서
명칭과 예시들을 공부해보는 것을 추천해주셨다.
기초적인 부분들은 다 터득하고, 어느 정도 실력이 생겼으니
디바이스 별 크기에 대해서도 공부하고,
좀 더 완성도를 높일 수 있는 부분들을 보완하라고 알려주셨다.
새로운 해야할 일들이 많이 생긴 것 같지만
내 실력이 더 업그레이드 될 수 있는 부분이기 때문에
열심히 해야겠다는 생각이 들었다.
🧐 오늘은 어떤 것을 배웠나요
오늘은 코딩을 처음 배웠다.
옛날에 장미가족 태그교실 같은데서 만든 축전으로
글 올릴 때 html을 살짝 만져봤던 거 같고,
그때랑 이번에 티스토리 블로그 만들면서
블로그 이름이랑 썸네일 이미지 크기 바꾸느라
CSS도 만져봐서 그런지 엄청 낯설진 않았다.
- 요청하는 쪽(내 컴퓨터, 내 핸드폰) : 클라이언트
- 주는 쪽 : 서버
서버로부터 받아오는 것 : 설명서들 - HTML(뼈대), CSS(꾸미기), JS(움직이기)
- CSS 사용법HTML에 명찰을 붙이고, 어떻게 꾸며줘라고 쓰는 것
- 안쪽 여백 padding
- 바깥쪽 여백 margin ( 위, 오른쪽, 아래, 왼쪽 순서)
- 전체 선택 후, alt+shift+F 로 정렬시켜주기
- HTML을 브라우저에서 실행하기 단축키 : Alt + B
- Bootstrap : 예쁜 CSS를 미리 모아둔 것
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>나만의 추억앨범</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<style>
@import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap');
* {
font-family: "Gowun Dodum", sans-serif;
font-weight: 400;
font-style: normal;
}
.mytitle {
height: 250px;
color: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-image: url('https://images.unsplash.com/photo-1511992243105-2992b3fd0410?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
background-position: center;
background-size: cover;
}
.mytitle>button {
width: 150px;
height: 50px;
background-color: transparent;
color: white;
border: 1px solid white;
border-radius: 5px;
margin-top: 20px;
}
.mycards {
width: 1200px;
margin: 30px auto 0px auto;
}
.mypostingbox {
width: 500px;
margin: 30px auto 0px auto;
padding: 20px;
box-shadow: 0px 0px 3px 0px blue;
border-radius: 5px;
}
.mybtn {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.mybtn > button {
margin-right: 5px;
}
</style>
</head>
<body>
<div class="mytitle">
<h1>나만의 추억앨범</h1>
<button>추억 저장하기</button>
</div>
<div class="mypostingbox">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="앨범 이미지">
<label for="floatingInput">앨범 이미지</label>
</div>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="앨범 제목">
<label for="floatingInput">앨범 제목</label>
</div>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="앨범 내용">
<label for="floatingInput">앨범 내용</label>
</div>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="앨범 날짜">
<label for="floatingInput">앨범 날짜</label>
</div>
<div class="mybtn">
<button type="button" class="btn btn-dark">기록하기</button>
<button type="button" class="btn btn-outline-dark">닫기</button>
</div>
</div>
<div class="mycards">
<div class="row row-cols-1 row-cols-md-4 g-4">
<div class="col">
<div class="card h-100">
<img src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">앨범 제목</h5>
<p class="card-text">앨범 내용</p>
</div>
<div class="card-footer">
<small class="text-body-secondary">앨범 날짜</small>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">앨범 제목</h5>
<p class="card-text">앨범 내용</p>
</div>
<div class="card-footer">
<small class="text-body-secondary">앨범 날짜</small>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">앨범 제목</h5>
<p class="card-text">앨범 내용</p>
</div>
<div class="card-footer">
<small class="text-body-secondary">앨범 날짜</small>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">앨범 제목</h5>
<p class="card-text">앨범 내용</p>
</div>
<div class="card-footer">
<small class="text-body-secondary">앨범 날짜</small>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
특강1
진짜 문제를 발견하는 방법 - 홍윤정 튜터님
디자인씽킹 사례를 통해 진짜 문제를 발견하기
1. 관찰을 통한 공감하기
문제발견 : MRI-어린 아이들이 어둡고 시끄러운 기계에 공포를 느낀다.
공감하기 : 어린아이 관찰하기 - 어린아이에게 감정이입하기 - 이해관계자와 대화하기
아이디어를 빠르게 시각화 (프로토타입) : 어린아이들이 좋아하는 스티커 붙이기 (프로토타입) - 테스트 결과 아이들이 좋아함
다양한 테마의 MRI 제작함
해결된 문제 : 마취제 투여가 급격히 줄고, 만족지수 90% 상승
뱅크오브아메리카(BOA)의 신규은행 계좌를 늘려라!
관찰하기 : 마트방문 - 돈을 지불하는 방식 관찰 - 계산 금액보다 더 큰 금액을 지불 - 물건 사고 거슬러 받은 동전을 보관 - 엄마들 이야기 듣기 - 아이를 위한 저축 방법 고민
문제발견 : 저축을 하고 싶어도 저축할 여력이 없는 고객이 많다!
아이디어 : 남은 잔돈 저축해주는 Keep the Change
해결된 문제 : 소비와 저축 두가지 니즈를 모두 해결
2. 체험을 통한 공감하기
1970s 새로운 냉장고 디자인
힘이 약한 노인들도 쉽게 여는 디자인하자 > 그런 사람들을 위한 디자인은 안 해
공감하기 : 3년간 80대 노인이 되어 살아가기 시작
문제발견 : 매순간이 큰일로 다가오는 불편함과 공포
아이디어 : 유니버셜 디자인 시작
왜 설문조사나 인터뷰를 안했나요? 노인들을 깊이있게 이해하지 못하면 잘못된 디자인이 나올 수 있어서
공감하기란?
- 그 사람이 되어보는 것
- 관심을 갖고 관찰하는 것
- 대화해 보는 것
- 그 사람이 되어 체험해 보는 것
잘 관찰한다는 것은?
- 목적이 있는 관찰
- 감성적으로 이해한 관찰
> 디자인씽킹 활용하기
3. 착각, 추측으로 아이디어를 만든다면?
기발하다고 생각했던 아이디어가 왜 실패할까요?
스타트업이 실패하는 이유? 시장 니즈가 없는 제품
- 자신의 아이디어와 너무 깊은 사랑에 빠지지 않기
- 프로토타입으로 빠르게 실패하고 시도하기
- Market fit 확인하기
다른 사람이 나를 위해 무엇을 만들어 줬으면 좋겠는가?로 생각하기
4. 좋은 문제 정의가 좋은 솔루션을 도출한다던데
가뭄으로 농작물이
- 공감으로 나온 문제정의 : 물이 부족하다는 것이 문제 > 헬기로 물 가져오기
- 공감하지 않은 문제정의 : 장기간 비가 안 오는 것이 문제 > 솔루션 : 기우제 지내기 ??
깊이 있게 공감하는 것이 좋은 문제를 발견하는 첫 시작입니다.
해결할 수 있고 검증할 수 있는 것을 문제로 정의
특강2
포트폴리오 세션(2) - 박주연 튜터님
뼈대를 처음 잡을 때 알면 좋은 팁
- 후가공은 나중에 할 수 있기에 먼저 재료를 선별
- 스토리라인을 구성하는 재료들을 텍스트로 먼저 정리
- 텍스트들을 템플릿에 얹히면서 논리적 연결성을 보완
- 일단 부담감 내려놓고 스타트 끊기
가장 중요한 것은 문제해결능력, 필요없는 것은 빼기
포트폴리오 보는 것 = 책 훑는 과정
가독성 높이는 장표 구성 팁
- 타이틀만 봐도 주요 내용을 알 수 있도록
- 타이틀과 하단 내용이 상호보완적(일관성)으로 구성
- 한 장표 내에 너무 많은 정보 담지 않기
포트폴리오 구성 팁
1. 반드시 들어가야 하는 내용
: 문제정의 - 가설 - 솔루션 - 결과
2. 한 프로젝트에 장표가 너무 많아지지 않도록 하기
10장 이내로
* 가독성을 높여주는 치트키는 정보 구조화
#Presentation or Portfolio Design/Layout/Slides
#Infographic, Information Design
3. 각 장표에 들어갈 글 다듬기
내 프로젝트의 강/약점을 파악하여 넣을지 말지 결정하는데 도움이 됨
논리적으로 부족할 부분/나중에 강조해야 할 부분 알 수 있음
헤드 타이틀 위주로 장표에 러프하게 얹어보기
설명을 더하면서 점진적으로 디테일 올리기
평소에 포트폴리오 재료 정리하기
- 메타 인지 향상
- 커뮤니케이션에서 어떤 부분이 핵심인지 파악
- 사전에 개선점 파악하여 후속 작업시 효과적으로 보완 가능
JD분석
- 관심 회사 리스트업, 주기적으로 체크해보기
- 회사에서 중요하게 생각하는 가치가 들어있음
- 기본 뼈대 만들고 JD에서 중요하게 언급된 역량 추가로 어필하기
'내일배움캠프 > 본캠프' 카테고리의 다른 글
| [내일배움캠프_UX/UI] 10주차 목요일 TIL (0) | 2024.08.01 |
|---|---|
| [내일배움캠프_UX/UI] 10주차 수요일 TIL (0) | 2024.07.31 |
| [내일배움캠프_UX/UI] 10주차 월요일 TIL (0) | 2024.07.29 |
| [내일배움캠프_UX/UI] 9주차 금요일 WIL (0) | 2024.07.26 |
| [내일배움캠프_UX/UI] 9주차 목요일 TIL (1) | 2024.07.25 |
