[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 10일차 - Udemy 사용자 경험 사용성 및 UX를 위한 최고의 가이드 후기 | CSS 과제

계정봇·2023년 6월 15일

IT개발캠프 React 개발자부트캠프 리액트 리액트캠프 부트캠프 스나이퍼팩토리 웅진씽크빅 유데미 인싸이드아웃 프로젝트캠프

스나이퍼팩토리

목록 보기

6/15

먼저 강의를 다 들은 인증샷

강의 후기

유데미에서 UX관련 강의를 들어보았다.

개인 혹은 팀 프로젝트를 하면서UX와 같은 부분은 어떻게 해야할까?
어떻게 개선할 수 있을까? 고민을 많이 하곤 했었다.
강의를 들으면서 어떻게 접근 할 수 있을지 감을 잡을 수 있었다.

물론 지금까지 개발하면서 혹은 여러가지 사람들의 말을 들어오면서 알고 있었던 부분도 있었지만 강의로 새롭게 안 부분도 있었다.

먼저 사용자들은 전문가가 아니며 개발한 것에 대해 마스터 하고 싶어하는 사람들은 별로 많지 않다는 것이었다.
어떻게 보면 당연하다.
당장 나조차도 어떤 툴을 사용할 때 필요한 것만 충족 된다면 그 이후의 것들은 잘 신경쓰지 않기 때문이다.

그렇다면 그 사람들을 만족시키고 다시 찾아오게 하려면 어떻게 해야하는가?
그런 내용들을 보고 나니 어떻게 해야할지 알 수 있었다.

과제

피그마에 제시된 대로 CSS를 꾸밀것 + 반응형으로 작성할 것

과제 결과

데스크톱

모바일

과제 코드

header {
  display: flex;
  width: 100%;
  height: 50px;
  justify-content: center;
  align-items: center;
}

#headerContainer {
  max-width: 1200px;
  display: flex;
  height: 100%;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}

#title {
  color: #0e7159;
  font-weight: bold;
}

#questionButton {
  border: none;
  background-color: transparent;
  font-weight: bold;
  width: 90px;
  height: 30px;
}

#startButton {
  border-radius: 4px;
  background-color: #0e7159;
  border: none;
  color: white;
  font-weight: bold;
  width: 90px;
  height: 30px;
}

#titleText {
  font-weight: bold;
}

section {
  display: flex;
  flex-direction: column;
  width: 100%;

  align-items: center;

  margin-bottom: 150px;
}

h1 {
  color: #0e7159;
}
.사진영역 {
  width: 100%;
  max-width: 1200px;
}
#pictureContainer {
  display: flex;
  width: 100%;
  justify-content: space-around;
}

#pictureTitle {
  width: 200px;
  font-family: "Spoqa Han Sans Neo";
  font-style: normal;
  font-weight: 700;
  font-size: 15px;
  line-height: 25px;
  display: flex;
  align-items: center;
  letter-spacing: -0.785656px;

  color: #333d4b;
}

#pictureContent {
  width: 293px;
  font-family: "Spoqa Han Sans Neo";
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  display: flex;
  align-items: center;
  letter-spacing: -0.598595px;

  color: #6b7684;
}

#linkContainer {
  display: flex;
  width: 100%;
  justify-content: center;
}

#aLink {
  text-decoration: none;
  color: #0e7159;
  margin-top: 30px;
  font-weight: bold;
}

.hashtag {
  font-weight: bold;
  color: #0e7159;
}

#hashtagContainer {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  max-width: 1000px;
}

#hashtagWrapper {
  width: 300px;
  padding: 15px;
}

#hashtagTitle {
  font-weight: bold;
  margin-bottom: 15px;
  font-size: larger;
}

#hashtagContent {
  font-family: "Spoqa Han Sans Neo";
  color: #6b7684;
  width: 297px;
}

.휴대폰구역 {
  display: flex;
  justify-content: between;
  width: 100%;
  max-width: 1000px;
}

#phoneContent {
  color: #6b7684;
  width: 350px;
}

#phoneTitle {
  color: black;
  width: 300px;
}

.reportWrapper {
  background: #f2f2f2;
  width: 270px;
  margin-right: 30px;
  padding: 10px;
  border-radius: 16px;
}

.reportContainer {
  display: flex;
}

#reportTitle {
  width: 150px;
}

#reportContent {
  color: #6b7684;
}

.reportButton {
  background-color: #0e7159;
  border: none;
  width: 100%;
  height: 40px;
  border-radius: 4px;
  margin-top: 15px;
  color: white;
  font-size: 14px;
  font-weight: bold;
}

.reviewWrapper {
  display: flex;
  padding: 5px;
}

.reviewContainer {
  background-color: #f2f3f4;
  margin-right: 10px;
  margin-left: 10px;
  border-radius: 16px;
  padding: 35px;
}

.reviewProfile {
  display: flex;
  margin-bottom: 20px;
}

#footerSection {
  background: #0e7159;
  width: 100%;
  height: 450px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-weight: bolder;
  font-size: larger;
  margin-bottom: 0px;
}

#footerSection h1 {
  color: white;
}

#footerSection button {
  width: 150px;
  background-color: white;
  color: #0e7159;
  height: 45px;
  border: none;
  border-radius: 8px;
}

footer {
  display: flex;
  width: 100%;
  justify-content: center;
}

#footerWrapper {
  max-width: 1200px;
  width: 100%;
}

@media (max-width: 1024px) {
  #questionButton {
    display: none;
  }

  #pictureContainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: around;
  }
  .사진영역 {
    max-width: 800px;
    display: flex;
    justify-content: center;
    flex-direction: column;
  }

  #pictureWrapper {
    flex-basis: calc(33.33% - 20px);
  }

  .휴대폰구역 {
    display: flex;
    flex-direction: column-reverse;
    width: 100%;
    justify-content: center;
  }

  .두번째휴대폰 {
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: center;
  }

  .휴대폰이미지 {
    display: none;
  }

  .reportContainer {
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
  }
}

@media (max-width: 768px) {
  .첫번째후기 {
    display: none;
  }
  .두번째후기 {
    display: none;
  }
}