신입이 신입 가르치기 01
우리 우선 피그마 회원가입부터 해볼까요
나는 이제 막 2년 차가 된 신입 디자이너이다. 나도 배울 게 아직 산더미처럼 쌓여있는데 누군가를 가르치는 일이 잦다.
누군가에게 설명해 줄 때는 나도 최소한 80% 이상은 알고 있어야 한다고 생각하기 때문에 더 공부했고, 잘 아는 분들께 여쭤본 뒤에 답변을 해드렸었다. 그런 과정들을 기록해 두면 추후에 내가 다시 보고 추억할 수도, 누군가에게 도움이 될 수도 있다 생각하기에 그 과정들을 공유해보려고 한다!
#01 Figma가 뭔데요?
우선 내가 입사한 다음 제일 먼저 한 것은 업무 툴 변경이었다. 현재 작은 에이전시에서 근무하고 있는데 많은 시안들을 빠르게 쳐내야 하는 상황임에도 불구하고 포토샵/일러스트만 사용하고 있어서 입사하고 굉장히 기함했던 기억이 있다.
내가 먼저 쓰는 모습을 보여주고 피그마로 넘어오게끔 유혹해야겠다는 생각에 뭐가 잘 안된다는 직원 말에도 "어! 이거 피그마로 하면 쉬워요!" 하고 다른 직원의 일을 내가 가져와서 하는 모습도 보여주고...(물론 마음대로 가져온 게 아니라 합의 하에 진행했다) 포토샵으로는 10분 이상 걸렸을 작업을 피그마에서 2분 만에 뚝딱해서 전달해 드리면서 피그마 어필을 엄청나게 했었다. 그 결과(?)는 다행히 피그마에 관심을 보이셨고 아예 처음이라 어떻게 해야 되는지 모른다고 하셔서 간단한 사용법과 이게 왜 좋은지에 대해 열강의를 해드렸다.
누군가를 가르치는 것을 좋아하는 나(아는 척하는 거 제일 재밌어!)여서 약간 우쭐한 상태로 처음 회사에 적응하지 않았나 싶다. 매일매일 다른 직원이 "예린 씨~ 이거 어떻게 하는 거예요?" 하는 걸 해결하는 거에 재미를 느꼈었다. 여차저차해서 입사한 뒤 2달도 안되어서 업무 툴을 포토샵에서 피그마로 바꾸는 것을 성공하였다!
아, 그래서 피그마가 뭐냐면!
https://www.figma.com/design/
공식 홈페이지를 찬찬히 살펴보시면 될 것 같습니다! 비록 어도비에 인수돼서 앞으로 어떻게 변할지는 모르는 일이지만... 현재에선 ui를 빠르게 그려낼 수 있는 최고의 툴이라고 생각한다.
그 옆에 자리 잡은 피그잼까지...#02 Figma에서 Frame과 Group의 차이점
나는 프레임의 존재를 몰라 모든 것을 그룹으로만 그룹핑하던 시절이 있었다.(아찔) 다른 분들의 파일에도 항상 프레임 없이 그룹만 왕창 있었는데 아마 포토샵을 쓰던 습관이 있어서, 차이점을 몰라서, 나처럼 프레임의 존재를 몰라서 일 거라 생각하고 이걸 먼저 설명드리면 좋을 것 같다 생각했다.
상: 프레임 / 하: 그룹제일 먼저 눈에 들어온 것은 프레임은 frame1, 2 등으로 자동으로 네이밍이 되어서 백그라운드(좌우 패널창을 제외한 only 디자인 영역)상에서도 레이어명을 확인할 수 있는데 그룹은 하지 못한다는 점이다. 아무리 그룹 레이어의 이름을 보기 좋게 설정해도 레이어 패널을 보지 않는다면 알 수가 없어 화면 단위를 작업할 땐 알아보기 매우 힘들 수 있다.
그리고 제일 중요하다 생각하는 사이즈 변경 이슈! 프레임과 그룹 모두 Constraints 기능을 제공하지만 그룹에선 제대로 작동을 하지 않는다는 것... 프레임에 Constraints를 원하는 형태로 설정한 뒤 프레임 레이어를 잡고 무브 툴로 사이즈를 변경한다면 내부 요소들도 각각 내가 설정한 대로 고정되거나 변경될 것이다. 하지만 그룹의 경우는 내부 요소들의 Constraints도 각각 설정할 수 없고, 위치도 변경되고, 크기도 변경된다. (특히 텍스트 레이어들은 갑자기 텍스트 박스 형태로 변경이 됨)
프레임에 Constraints를 센터, 센터로 맞춰둔 뒤 인스펙을 확인해 본다면
left: calc(50% - xxxpx/2);
top: calc(50% - xxxpx/2 - 3894px);
이런 코드가 추가된 것을 확인할 수 있지만, 동일하게 설정을 해뒀음에도 그룹 레이어는 코드가 추가되어있지 않다! 이외에도 내부 요소들이 소수점으로도 변환이 된다는 점, 오토 레이아웃을 적용할 수 없다는 점(그룹이 풀리면서 적용은 가능하지만 그룹을 유지한 채로는 불가능하니까요!) 등 이유로 현재는 그룹을 거의 사용하지 않는다. 그룹이 나쁘다는 게 아니라, 내가 필요한 기능이 아니기 때문에 프레임을 사용하고 있다.
#03 레이어 정리 해야 돼요?
결론만 말씀드리면 네... 해야 됩니다. 본인이 기획부터 디자인, 개발까지 전부 다~ 한다면 안 하셔도 상관없겠지만 회사에서 디자이너로 디자인 작업만 한다면 다른 팀원들이 알아보기 쉽게끔 레이어 정리를 해줘야 합니다. 디자인 시스템을 구축하는 정도의 스케일이 아니라면 네이밍 컨벤션도 중요하지만 그보단 우선 구조가 어떻게 짜여있는지 바로 확인할 수 있도록 정리가 우선이라 생각합니다!
레이어 정리 절망 편예시로 그냥 만들어본 웹 레이아웃인데 어떤 생김새인지는 알겠다만, 하나도 정리되지 않고 그저 프레임 1 안에 왕창 다 때려 박아둔 레이어들이다. 이렇게 개발자한테 전달하면 이제 싸움 신청하는 것과 동일하다고 보면 되지 않을까... 옥상이나 소각장으로 부르는 것만 싸움 신청이 아니다(!)
와! 무한으로 즐겨요 명륜진사프레임!레이어 이름까진 따로 지정하진 않았지만 그래도 덩어리끼리 묶어준 상태입니다. 그냥 헤더 한 개에도 많은 프레임이 들어가 있다는 걸 볼 수 있다. 최소한 이 정도까진 해서 넘겨줍시다 우리... 근데 이렇게만 했을 때 수정이 생긴다거나 소통해야 될 일이 생기면 일일이 캡처해서 여기 부분이요~라고 해도 번거롭고 이상하고, 프레임 7(...) 있잖아요~라고 한다면 ??: 프레임 7이 뭔데? 같은 상황이 생길 것이다. 물론 알잘딱 알아듣는 사람도 있겠지만 알아듣기 쉽게 설명을 잘하는 사람이 되는 게 좋지 않을까!
일부러 컴포넌트는 사용하지 않았다! 규칙도 그냥 임의로 설정했다실제 작업과 유사하게끔 설정해 봤는데 훨씬 직관적인 것을 확인할 수 있다.(한 번에 패널창까지 캡처하느라 작아져서 모바일로 보시는 분들은 안 보이실 것 같긴 하다...) 헤더 높이값 변경해 주세요~, 슬라이드 인디케이터 위치값은 ~로 변경 해주세요 등 커뮤니케이션하기에도 수월하고, 내가 수정할 때에도 찾기 쉬워진다. 이런 것들이 하나하나 쌓여서 일잘러가 되는 거라 초반부터 습관을 들이는 게 정말x99 좋다고 생각한다!
첫 글이 너무 짧은 것 같지만 회사에서도 몇 분 이내로 술술 읽을 수 있는 부담스럽지 않은 시리즈를 만들고 싶기 때문에 짧게 작성할 예정이다. 가르치기라는 표현은 사람마다 조금은 센 워딩이라 느낄 수도 있다고 생각하는데 큰 의미는 없고 이목을 끌기 위한 제목이다. 이후 2편도 작성해서 올게요!
