figma

개발자입장에서는 많이 사용하진 않지만 디자이너와 협업시 디자이너의 입장을 이해하기 편하게 되기때문에 배우는 것이 좋다.

예제5

주로 프레임으로 틀을 만들고 시작한다.

fill은 백그라운드 컬러같은 개념

effects로 다양한 효과를 넣어 줄 수 있다.

확대하면 픽셀?처럼 볼 수 있는데 이걸로 미세조절을 할 수 있다.

예제 6

compotent

피그마는 내가 만든 애를 복사해서 인스턴스로 사용이 가능하다.
그런 기능을 지원해준다.

요소를 클릭하여 메뉴바 가운데 컴포넌트 생성을 눌러주면 된다.

사용할때는 alt키를 이용해서 왼쪽 사이드바의 asset탭에서 빼오면 된다.

예제 7

오토 레이아웃

프레인, 색깔, 텍스트 이렇게 많은 요소들이 하나에 들어갈때 글자가 추가되면 이것들은 그대로 있는다.

글자가 추가될때 프레임과 백그라운드색이 다 추가되게 하는 기능이 오토 레이아웃이다.

왼쪽 사이드 바에 있는 요소들을 다 지정하고 오른쪽 마우스 add auto layout을 해주면 된다.

또 오토레이아웃이 걸려있는 요소끼리는 화살표키로 서로의 위치도 바꿀수 있다.

예제8

constraints

해상도가 바껴도 그에 맞게 디자인이 유지되게 하는 기능이다.

여기서 시간은 해상도가 바껴도 계속 위쪽과 왼쪽에 붙어야한다.

방법
요소를 선택해주고 오른쪽 바에 constraints영역에서 붙이고 싶은 방향을 선택해주면된다.

예제 9

grid

가상의 격자가 있다고 생각하고 거기에 디자인을 하는 기법이다.

예제 10

plugin

플러그인은 캔버스에서 오른쪽 마우스, plugin으로 들어가 필요한 것을 다운 받아 사용하면 된다.

사진을 불러오고 싶다거나, 랜덤 아바타 정보등을 불러오기도 가능하다.

필요한 기능을 구글에 검색하여 사용하는 방법도 있다.

예제 11

style

매크로 같은 개념으로 스타일을 미리 만들어 놓고 이걸 다음에도 사용하고 싶을 때 버튼 하나로 매크로 스타일을 적용할 수 있는 기능이다.

스타일을 정한후 오른쪽 사이드바의 text자리에 점 4개를 클릭하여 이름을 저장해주고 저장해주면 된다.

사용하려면 요소클릭후 점4개하고 적용해주면된다.

예제14

wireFrame

처음 디잔인을 만들 때 틀을 만들기 좋은 기능이다.

여기서 이미 만들어진 요소를 복사해서 나만의 디자인을 만들 수 있다.

또 신기한 기능으로는 버튼을 눌렀을때 어떤 화면이 나오게 구현해야하는 지 설명하기 쉽게 하는 기능으로 prototype이 있다.
오른쪽 사이드 바에 prototype을 누르고 interactoin의 +를 누르면 어떤 이벤트가 있을시 어떤 화면이 보여지는지를 정할수 있고, 정하면 다음과 같이 화살표가 화면에 나온다.

오른쪽 위의 재생 버튼을 누르면 아래와 같이 실제 모바일 환경에서 어떻게 되는지를 볼수 있다. 홈버튼과 햄버거 버튼을 누르면 우리가 정해놓은 경로로 이동도 한다.

예제17

css코드 추출하기

요소에 마우스 우클릭후 그림과 같이 들어가면 css코드가 복사된다.

이걸 css에서 사용하면 끝

이런식으로 복사가 된다.

bootstrap

css프레임워크이다.

디자인을 어려워 하는 사람들에게 도움이 된다.

클래스에 css적용

부트스트랩의 컨테이너 클래스는 앞에 공간이 있다.(자동으로 중앙 정렬을 해준다.)위와같이 클래스 값을 contariner로 해주면된다.

이 뿐만 아니라 여러 속성을 자동으로 가지는 클래스들을 가지고 있다. 그래서 이런것들만 찾아서 적용을 하면된다. 원래는 마진이라던지 포지션이라던지 css속성을 일일이 넣어줘야 했는데 bootstrap을 사용하면 그런 수고를 덜 수 있다.

중복적용

 <div class="container text-center">

그림과 같이 container 값과 text-center값을 동시에 여러개 넣을 수 있다. 이렇게 되면 해당 태그에 여러 디자인이 적용된다.

결과

글자도 요소도 모두 가운데로 온것을 볼 수 있다.

grid

grid

최대 12칸짜리 grid를 제공한다.
만약 3개를 지정한다면 4칸짜리 박스 3개를 만드는 것이다.

    <div class="container text-center">
        <div class="row">
            <div class="col">컬럼</div>
            <div class="col">컬럼</div>
            <div class="col">컬럼</div>
        </div>
    </div> 

row로 행을 주었고 col로 열을 주었다. 1행 3열이 되었고 한 열단 4칸을 가지는 것이다. 4칸은 눈에 보이지는 않지만 존재한다.

결과

즉 bootstrap은 12칸안에 요소들을 적절히 배분해서 넣는 것이다. 나중에는 숫자를 주어 요소가 몇칸을 차지할 것인지 정해줄 수도 있다고 한다.

grid 비균등배치

이전의 것은 각 열이 다 균등하게 칸을 차지했다. 그럼 각 칸을 다르게 차지하고 싶게 하면 어떻게 하면 될까?

 <div class="container text-center">
        <div class="row">
            <div class="col-1">컬럼</div>
            <div class="col-2">컬럼</div>
            <div class="col-4">컬럼</div>
            <div class="col-5">컬럼</div>
        </div>
    </div>

class = "col"에 "=숫자"를 주어 각 요소가 가질 칸을 정해준다. 총12칸이 되어야한다.

행은 class에 row값을 주어야 하고 col을 이 안에 넣어주면된다.

결과

1열이 1칸 2열이 2칸 3열이 4칸 4열이 5칸을 차지한 것을 확인 할 수 있다.

만약 12칸을 다 채우지 못한다면 어떻게 될까?

 <div class="container text-center">
        <div class="row">
            <div class="col-8">컬럼</div>
            <div class="col-1">컬럼</div>
        </div>
    </div>

9칸만 지정해주었다.

결과

끝에 3칸의 빈칸이 생긴것을 확인 할 수 있다.

grid 정렬

여백이 있으면 한쪽으로 치우친다 그래서 이것을 우리가 원하는 대로 정렬을 해보자.

 <div class="container text-center">
      <!-- 그리드정렬 -->
      <div class="row justify-content-center">
        <div class="col-4">col</div>
        <div class="col-4">col</div>
      </div>
    </div>

row의 속성 옆에 중복속성을 주어서 "justify-content-center"속성을 주면 가운데로 정렬이 된다.

왼쪽은 center 대신 start, 오른쪽은 end를 넣어주면 된다.

느낀점

오늘은 figma와 bootstrap을 조금 배웠다. figam는 사실 디자이너의 영역이지만 디자이너와 협엽을 할 시 디자이너의 입장을 이해하기위해 조금은 아는 것이 좋다고 한다.

bootstrap는 css의 디자인을 html의 속성으로만으로도 할 수 있게 해준다. 게다가 어렵지도 않고 오히려 더 간단하고 명확하다고 생각된다. 그래서 아마 이 기능을 많이 사용할거 같다. 그리고 많은 속성이 있는데 이러한것들을 다 외우는 것은 거의 불가능하니 내가 원하는 기능을 잘 묘사해서 구글링이나 챗gpt에 검색하는 법을 잘 아는것이 중요하다고 생각한다.