컴포넌트의 이해

이번 시간부터 본격적으로 와이어프레임을 그려보겠습니다. 저희가 이번 강의를 통해서 만들어 볼 어플리케이션 디자인은 커피 주문 어플리케이션입니다. 마소커피라는 커피 전문점에서 커피, 음료, 빵 등을 자유롭게 주문할 수 있는 커피 주문 어플리케이션을 함께 만들어 볼 예정입니다. 이렇게 주제가 결정되고 나서 주요 기능들을 작성해 보았는데요 먼저 로그인할 때 SNS 로그인을 염두에 두라는 기획이 나왔습니다 그리고 바코드를 좀 더 빠르게 탐색할 수 있으면 좋겠다는 이야기가 나왔고 상품은 꼭 이미지와 함께 노출되었으면 한다고 했습니다 그리고 하단 내비게이션에는 홈, 마소페이, 주문, 선물, 마이페이지 이렇게 5가지 메뉴를 담아달라는 요청이 있었고 상품 상세 페이지에서 영양정보 그리고 알러지 정보를 확인할 수 있어야 한다는 기획이 나왔습니다. 이 기획을 토대로 제가 와이어프레임을 한번 스케치해보았습니다. 이 상태로 바로 디자인에 들어가도 되고 구성원들에게 공유해도 되지만 저는 좀 더 정돈된 형태로 와이어프레임을 공유할 필요성을 느껴 피그마로 새로 그려보기 위해 피그마로 가지고 왔습니다. 피그마로 그리기 위해 스케치된 와이어프레임을 살펴보니 몇 가지 패턴이 일정하게 반복되는 것을 확인할 수 있었습니다. 먼저 이미지 패턴이 와이어프레임 전반에 걸쳐서 분포되어 있었습니다. 그리고 텍스트 패턴 역시 와이어프레임 전반적으로 확인할 수 있었고요. 어플리케이션이다 보니 아이콘 역시 와이어프레임 전반에 걸쳐서 패턴화되어 분포되어 있었습니다. 마지막으로 카드 UI나 버튼, 인풋과 같이 사각형 모양의 박스 패턴이 전체적으로 와이어프레임에 분포되어 있었습니다. 이렇게 패턴을 분석하고 나니 몇 가지 요소만으로 와이어프레임을 완성해 볼 수 있겠다는 생각이 들었습니다. 하단에 좀 더 보기 편하게 구분을 지어 보았는데요. 이미지 영역, 아이콘 영역, 텍스트 영역, 박스 영역 이렇게 4가지 패턴을 잘 조합하면 와이어프레임을 빠르게 그릴 수 있겠다는 생각이 들었습니다. 그럼 이걸 그때그때마다 패턴을 그리는 것이 아니라 하나의 패턴을 만들어두고 복사해서 사용하면 좀 더 빠르게 그릴 수 있지 않을까 라는 생각이 들었는데요 피그마에는 이렇게 복사본을 빠르고 편리하게 관리할 수 있는 기능이 있습니다 바로 컴포넌트와 인스턴스라는 기능인데요 이 기능에 대해서 한번 자세하게 살펴보도록 하겠습니다 컴포넌트와 인스턴스는 무엇인지 그리고 어떤 특징들을 가지고 있는지 살펴보도록 하겠습니다. 컴포넌트와 인스턴스는 간단하게 말하면 마스터본과 복사본들입니다. 중심이 되는 컴포넌트를 기준으로 복제본 인스턴스들을 만들어서 반복되고 일관된 디자인을 효율적으로 관리하는 기능입니다. 원본의 속성을 복제본도 자동적으로 상속받게 됩니다 여기서 원본은 컴포넌트를 말하는 건데요 원본 컴포넌트의 속성, 컬러, 크기, 스트로크, 심지어 텍스트 등 다양한 요소들의 성격을 복제본인 인스턴스도 자동으로 받고 상속받게 됩니다 예시 이미지에서 이 컴포넌트의 정보를 바꾸면 이렇게 인스턴스에도 바꾼 정보가 자동으로 상속된다는 뜻입니다 피그마 화면에서 예시를 통해 조금 더 자세하게 살펴보겠습니다 메인 컴포넌트와 예시 인스턴스들이 있습니다 겉보기에는 컴포넌트와 인스턴스를 구분하기 어려워 보이지만 레이어 패널을 살펴보면 두 가지 형태의 아이콘이 다릅니다 메인 컴포넌트 같은 경우 사각형 4개가 마름모꼴을 이루고 있는 레이어 아이콘을 가지고 있고 인스턴스는 큰 마름모 하나가 비어있는 형태의 레이어 아이콘을 가지고 있습니다 이렇게 아이콘의 구분을 통해서 어떤 게 컴포넌트고 어떤 게 인스턴스인지 빠르게 확인할 수 있습니다 그럼 인스턴스들이 진짜 컴포넌트의 속성을 상속받는지 한번 제가 컴포넌트를 바꿔보겠습니다 컴포넌트의 바탕 컬러를 진한 빨간색으로 바꿨더니 인스턴스들의 배경색 역시 진한 빨간색으로 같이 바뀌는 것을 확인할 수 있습니다 그럼 컴포넌트의 글자 컬러를 흰색으로 바꾸었더니 전부 바뀌는 것을 확인할 수 있었고 컬러 말고 다른 속성도 바꿔보겠습니다 제가 컴포넌트의 텍스트를 안녕하세요 라는 텍스트로 바꿨더니 인스턴스도 상속받았습니다 이렇게 컬러, 텍스트, 크기까지 컴포넌트의 다양한 속성을 인스턴스들이 상속받는 것을 확인했습니다 그럼 인스턴스는 무조건 컴포넌트의 변경에 의해서만 바꿀 수 있느냐 그건 아닙니다 인스턴스 자체만으로도 이렇게 컬러 값을 바꿔서 사용할 수 있고 텍스트를 바꿀 수도 있습니다 하지만 이렇게 바꿨을 때 한 가지 문제가 발생합니다 제가 컴포넌트를 다시 수정해보겠습니다 컴포넌트의 배경색을 녹색 계통으로 바꿔보겠습니다 바꿨더니 먼저 변화시킨 인스턴스는 컴포넌트의 속성을 상속받지 않고 있습니다 아 인스턴스는 혼자 개별적으로 변화를 주었을 경우 컴포넌트의 속성을 상속받지 않는구나 이렇게 확인할 수 있습니다 자 텍스트 컬러를 제가 진한 파란색으로 바꿨습니다 아까 변하지 않았던 인스턴스의 컬러가 바뀌는 것을 확인할 수 있었습니다 이는 저희는 컬러를 바꾸지 않았기 때문입니다 바탕화면의 컬러를 바꿨기 때문에 컴포넌트의 바탕화면 컬러, 필 값이 바뀌어도 바뀌지 않고 텍스트를 바꿨기 때문에 텍스트를 수정해도 바뀌지 않지만 텍스트의 컬러를 바꾸지 않았기 때문에 텍스트 컬러는 그대로 상속받습니다 이렇게 인스턴스의 개별 개별 개별 속성마다 각각 바꿀 수 있고 이는 바꾼 부분 외에 나머지는 그대로 적용되는구나 이렇게 확인할 수 있습니다 제가 인스턴스에 스트로크를 먼저 넣어보겠습니다 이렇게 검은색 3픽셀짜리 스트로크를 넣었습니다 그리고 컴포넌트에는 붉은색 스트로크를 넣겠습니다 붉은색 3픽셀 스트로크를 넣었습니다 스트로크의 넓이를 바꿔도 인스턴스는 먼저 스트로크를 적용했기 때문에 속성이 상속받지 않습니다 그럼 이러한 인스턴스는 다시 컴포넌트로 되돌릴 수는 없는 걸까요? 방법이 있습니다 먼저 컴포넌트의 속성을 상속받지 않는 인스턴스를 선택하고 옆에 디자인 패널에서 컴포넌트 마크 옆에 더보기란을 보면 인스턴스의 속성을 전부 되돌릴 수 있습니다 Reset All Changes를 통해서 컴포넌트 그대로를 다시 돌릴 수도 있고 일부 속성만 컴포넌트를 다시 상속할 수 있게 할 수도 있습니다. 저희가 바꿨던 Stroke 그리고 Fill 두 가지 옵션이 나오는 것을 확인할 수 있는데요. 저는 바탕색을 다시 컴포넌트와 동일하게 상속받고 싶기 때문에 Reset Fill을 눌러서 다시 상속받게 해보겠습니다. 이 상태에서 컴포넌트의 Fill 컬러를 다시 바꿔보겠습니다. 바꿨더니 인스턴스가 컴포넌트의 Fill 컬러를 제대로 상속받고 있는 것을 확인할 수 있습니다. 자 근데 제가 인스턴스를 어느 정도 바꾸고 나니 이 형태가 너무 맘에 들어서 더는 컴포넌트의 영향을 받지 않았으면 좋겠습니다. 그럼 이제 이 인스턴스를 독립적인 개체로 만들 수 있는데요. 마찬가지로 더보기에서 Detach Instance 기능을 통해 컴포넌트와 연결된 인스턴스를 풀어줄 수 있습니다 디태치하고 나니 기존의 인스턴스 모양의 아이콘이 바뀌는 것을 확인할 수 있습니다 일반 프레임이 되었는데요 이제 이 인스턴스는 이 컴포넌트와는 전혀 상관없는 독립된 객체가 되었습니다 이렇게 어느 정도 디자인을 하고 나서 특정 인스턴스가 더 이상 컴포넌트와 연결되지 않았으면 좋겠을 때 Detach Instance 기능을 통해서 독립적인 객체로 만들어 줄 수 있습니다 컴포넌트와 인스턴스의 속성에 대해서 최종적으로 정리를 해보도록 하겠습니다. 먼저 마스터 컴포넌트의 복사본인 인스턴스들은 마스터 컴포넌트의 속성을 상속받는구나를 확인했습니다. 그리고 인스턴스를 혼자 바꿀 경우 더 이상 컴포넌트의 속성을 상속받지 않는 것도 확인했습니다. 이렇게 상속받지 않는 인스턴스의 속성을 다시 컴포넌트의 속성을 상속받게 하기로 바꾸고 싶을 때는 더보기에서 리셋 기능을 통해 바꿀 수 있었는데요 리셋은 올체인지로 다시 전체를 컴포넌트로 상속받게 바꾸거나 아니면 특정 바꿨던 특정 부분 부분들을 각각 골라서 상속받게 바꿀 수도 있었습니다 이렇게 일부를 바꾼 이 인스턴스가 더 이상 컴포넌트와 연결되어 있지 않은 독립적인 객체로 활용하고 싶을 경우 더보기에서 Detach 기능을 통해 더 이상 컴포넌트와는 상관없는 완벽한 독립 객체로 바꿔서 사용할 수도 있었습니다. 이렇게 컴포넌트와 인스턴스의 개념, 그리고 속성에 대해서 알아보았습니다.