[클라우딩 어플리케이션 엔지니어링 TIL] 240129 - 고양이 사진첩 만들기 해설 강의, 피그마 들어가기

Intro

---

주말에 열심히 놀고..!! 다시 집중해서 공부를 시작해보자!!

최근에 새로운 취미가 생겨버려서 개발에 약간 소홀했던 것 같다. 😭

지금 당장 중요한 게 무엇인지 인지하고 흩어져 있는 정신을 한 곳으로 집중하는 노력이 필요할 것 같다.

 

 

 

오늘 학습한 내용

---

고양이 사진첩 만들기 해설 강의 _ 1

Nodes
 - 현재 탐색 중인 경로에 속한 파일 / 디렉토리를 렌더링합니다. 렌더링 된 Node 클릭 시 node의 type에 따라 다음과 같은 일이 일어나야 합니다.

• Node.js 코드 일부

$nodes.innerHTML = `
  ${
    isRoot
      ? ''
      : `
        <div class="Node">
          <img src="https://cat-photos-dev-serverlessdeploymentbucket-fdpz0swy5qxq.s3.ap-northeast-2.amazonaws.com/public/images/prev.png" />
        </div>
    `
    }
  ${nodes.map(
    (node) => `
    <div class="Node">
    <img src="${
      node.type === 'DIRECTORY'
        ? 'https://cat-photos-dev-serverlessdeploymentbucket-fdpz0swy5qxq.s3.ap-northeast-2.amazonaws.com/public/images/directory.png'
        : 'https://cat-photos-dev-serverlessdeploymentbucket-fdpz0swy5qxq.s3.ap-northeast-2.amazonaws.com/public/images/file.png'
    }" />
      ${node.name}
    </div>
  `
  )}
`;

 

innerHTML에 삼항연산자로 한번에 구현한 점이 인상 깊었다. 코드가 훨씬 짧아졌다.

 

 

 

 

---

Figma를 활용한 UI 제작하기

피그마 소개

• UI 디자인 툴 중 가장 인기있는 툴
• 벡터 기반 UI 툴 (포토샵은 비트맵 기반)
• 벡터는 화면을 확대해도 화질이 깨지지 않는 장점이 있다.

 

< 디자인 기초: 컬러, 폰트 >

 

색상이란?

: 색 자체가 가지고 있는 고유의 특성

색상을 환으로 분리 ➡️ 10, 20, 40 색상환 등으로 분류할 수 있다.

Munsell 20 색상환 (출처: 위키백과)

 

앱을 제작할 때 목적에 맞게 색상의 특성을 감안해서 개발하는 것이 좋다.

예를 들어, 은행이나 금융 관련된 어플로는 안정감을 주는 색상인 초록이나 파랑을 많이 사용한다.

 

• 대비
  • 보색 대비: 색상환에서 정반대의 색상 사용
  • 유사 대비: 조화롭고 차분한 느낌 (보색 대비보다 실패 확률이 낮다.)
• 60-30-10 ratio
  • main color 60%, secondary color 30%, accent color 10%
  • accent color가 10%인게 중요하다.
• 계층 구조 표현
  • 제목은 굵은 폰트를 사용하거나 폰트 크기를 더 크게 표현하고 본문은 좀 더 밝은 폰트를 사용하는 등의 계층 구조를 표현하는 것이 좋다.
• 접근성

 

폰트

• 세리프
  • 삐침이 있다.
  • 가로 획이 가늘다.
  • 붓으로 쓴 것 같은 느낌이 든다.
• 산세리프
  • 모서리에 삐침이 없다.
  • 가로 획과 세로 획의 굵기가 거의 비슷하다.

 

 

마무리

---

오늘은 지난주 금요일에 풀었던 고양이 사진첩 만들기 과제의 해설 강의도 조금 들었다. 나는 클래스로 풀었는데 강사님은 함수형으로 구현하셔서 또 새로웠다. 그리고 어떤 컴포넌트가 필요한지 미리 생각하고 state로 넘겨 줄 데이터를 미리 설계하는 게 정말 어려운 것 같다. 계속 연습하다보면 눈에 보이겠지..? 나머지도 내일 다 듣고 내 코드랑 비교해가며 공부해야지! 피그마 강의도 열심히 들어야겠다.!!