Framer를 통해 팀페이지 만들어보기

안녕하세요 윱입니당 🐈‍⬛

오늘은 쏭교수님의 Framer 워크숍에서 배운 내용을 토대로 팀 소개 페이지를 제작해본 후기에 대해서 소개해드리고자 합니당

쏭교수님의 framer 워크숍 내용이 궁금하다면 👉 여기를 클릭

완성된 비요의 팀페이지가 궁금하다면 👉 여기를 클릭

유익한 Framer 워크숍

쏭교수님께서 팀원들을 위해 Framer 워크숍을 준비해주셨는데요,

새로운 도구를 접하고 배우는 과정이 낯설게만 느껴져서 잘 접하지 않았던 저에게는 새로운 시도였다고 할 수 있을 것 같아요. 다행히 쏭교수님께서 처음 접하는 사람도 쉽고 빠르게 접근할 수 있도록 너무 잘 설명을 해주셔서 큰 허들 없이 빠르게 배워볼 수 있었어요 쏭교수님 쵝오💞

Framer라는 툴에 대해서 이해해보고, 각자 생각해본 아이디어를 통해 실습까지 해보면서 간편하게 웹사이트를 만들어볼 수도 있었던 귀한 시간이었습니다!

Framer 워크숍을 통해 저는 아래의 인사이트를 얻을 수 있었어요.

🎯 쏭교수님의 Framer 워크숍을 통해 얻은 인사이트
1. 세상에는 업무의 질을 높여주는 좋은 툴(tool)이 정말 많다 !
2. 배우고자 하는 마음이 있다면 날 도와줄 수 있는 사람은 정말 많다 !
3. 자그마한 아이디어 + 고도화 하고자 하는 의지 + 참고하기 좋은 레퍼런스 
   = 상상치 못한 좋은 결과물을 만들 수 있는 기회가 주어진다

새로운 툴을 배워보면서 '나도 내 힘으로 내 머릿속 상상을 실제로 구현해서 세상에 내놓을 수 있는 힘이 있다 !' 라는 엄청난 인사이트를 얻게 되었습니당 ㅎㅎ

워크숍 이후에 추가적으로 더 고도화 하고 싶은 인원은 1대1 정밀 코칭을 통해서 실제 웹사이트를 만들어보기로 결정했었는데요.

아무래도 다같이 하는 활동을 좀 더 선호하기도 하고 저 혼자만의 웹사이트를 만들려고 하니 뭔가 동기부여가 이전보다 잘 되지 않는 기분이 들더라구요 🥹

어떻게 하면 쏭교수님의 Framer 워크숍을 잘 마무리하면서도 제 의지가 꺾이지 않고 끝까지 완주할 수 있을까?🤔 에 대해서 곰곰이 생각해보다가 이러한 결론을 도출하게 됩니다.

1. 내가 주체가 되어 진행하지만 공동체에 기여할 수 있는 무언가를 만들어보자
2. Framer로 만들어볼 수 있는 새로운 or 만들려고 했지만 후순위로 밀렸던 웹페이지는 무엇이 있을까?
3. 어떤 웹사이트를 만들면 뿌듯하면서도 여러 사람들에게 자신 있게 알릴 수 있을까?

→ 팀페이지를 프레이머를 통해서 리뉴얼 해보자 !!🐋🐋

당시 노션으로 간단하게 꾸려져 있던 팀페이지에 대해 리뉴얼에 대한 목소리가 가끔씩 등장하곤 했었는데요, 이번 기회에 Framer를 통해 좀 더 풍성하고 견고하게 리뉴얼을 해보면 좋을 것 같다고 생각했습니다!

팀페이지를 만들게 된다면 제 의지도 쉽게 꺾이지 않을 것이라고 판단했고, 저 뿐만 아니라 쏭교수님 그리고 다른 팀원들도 제작 과정에 조금씩 참여할 수도 있을 것 같다고 생각했어요.

무엇보다 이쁘게 팀페이지를 리뉴얼해서 세상에 알리고자 하는 마음이 왕창 들어서 들뜬 마음으로 시작할 수 있었답니다!

페이지 구상 해보기

우선 쏭교수님은 제작할 페이지의 주제(팀페이지)가 정해졌다면 머릿속에 어떤 식으로 구상하고 있는지를 엉성하더라도 그림으로 한번 표현해서 구상해보라고 말씀하셨어요.

이러한 작업을 와이어프레임을 만드는 과정이라고 설명해주셨고, 어떻게 구상할지를 큰 틀로 표현해보면서 좀 더 명확하고 체계적으로 작업할 수 있도록 도와줄 수 있다고 합니다.

그래서 우선 제가 편한 방식(손으로 쓰고 그리기)으로 한번 와이어프레임을 잡아보았습니다.

팀페이지는 비요라는 팀을 간단하게 알리면서도 어떠한 생각으로 일하는지를 명확하게 보여줄 수 있어야 한다고 인지하고 페이지를 구상해보았는데요, 아래의 내용들을 꼭 첫 페이지에 넣어보고자 하였어요.

☑️ 비요 팀페이지 홈 화면에 포함되어야 할 내용
- 비요(beyo)의 뜻이 담긴 타이틀 (2줄 이내로 간략하게)
- 비요(beyo)가 생각하고 일하는 방법 *핵심가치*
- 비요(beyo)를 설명할 수 있는 콘텐츠들(히스토리, 팀컬처, 팀블로그...)
- 비요(beyo) 팀원들을 표현할 수 있는 요소 or 공간

포함될 내용을 정리해보고 해당 내용을 바탕으로 와이어프레임 구성을 진행하였고, 쏭교수님께 검사를 맡은 후 다음 과제도 받아보았답니당

다음 과제 : Framer → 상단 메뉴 insert → 좌측 메뉴 중 section 활용해서 와이어프레임 초안 옮겨보기!

Framer를 통해 와이어프레임 구성하기

쏭교수님 말씀대로 손으로 그린 와이어프레임을 framer로 옮기는 작업을 진행했어요

다양한 구성 요소들을 직접 추가하고 이미지를 배치하고 아이콘을 띄우고 등등.. 완전 아무것도 없는 백지 상태에서 무언가를 추가해야 한다는 것은 꽤나 부담감이 크게 느껴질 수 있는데요.

Framer에서는 다양한 템플릿과 이미 구성되어 있는 section 템플릿을 활용해서 쉽고 빠르게 페이지를 구성할 수 있는 도구들을 많이 지원하고 있어요!

section 도구를 활용해서 아래와 같이 와이어프레임을 옮겨보았는데요, 역시나 그림을 화면으로 옮기면서 구상에 대한 생각을 다시 정리해보고 수정해볼 수 있었어요.

구성한 틀에 맞게 내용을 채워 넣고 효과 주기

얼추 원하는 형태로 section을 구성하고 더미로 있는 템플릿에 비요의 내용에 맞게 채워나갔어요.

확실히 미리 section을 통해서 구조화를 해둔 뒤 내용을 채워 넣는 것이 훨씬 간편했던 것 같아요. 어려웠던 점은 너무 많은 아카이빙된 사진들 중에서 어떤 사진을 쓸지 선택해야 하는 순간들이... 가장 어려웠던 것 같습니당 😂 일상사진이 너무 많은 비요뜨

그리고 이미지 크기를 조정하거나 요소 별 Frame / Stack / Grid 와 같은 부분들 설정하는 게 어려웠던 부분이었는데요.. 요 부분은 요소들에 하나 하나 모두 적용해보면서 가장 적합한 것 or 맘에 드는 것을 찾아가면서 진행했던 것 같아요😂

그래도 좌측 layer 부분을 참고하면서 요소들 선택과 적용된 container를 확인하면서 하나씩 진행해보았습니다.

그렇게 템플릿에 이미지와 텍스트를 채워 넣은 초안은 아래와 같이 구성되었어요.

내용을 채워 넣은 이후에는 페이지가 너무 밋밋하지 않게 요소마다 효과(effect)를 넣어보고 싶었는데요.

모르는 부분은 쏭교수님께 물어보면서 하나 하나씩 배워보거나 아니면 effect 모두 다 한번씩 눌러보면서 미리보기로 확인하는 방법을 사용했어요

1. effect > scroll animation

가장 먼저 적용해본 효과는 scroll animation이었는데요, 처음에는 용어를 잘 몰라서.. 두둥실 떠오르는 효과(?)로만 생각하고 관련 효과를 찾아보았던 것 같아요 ㅋㅋㅋㅋ 그대로 쏭교수님께 SOS..

2. Ticker

페이지 내 핵심가치 일러스트 와 팀원 캐릭터 사진들은 자동으로 슬라이드처럼 흐르는 효과를 주어서 지루하지 않고 통통 튀는 듯한 느낌을 주고 싶었는데요 그리고 좀 멋지잖아여

이 부분은 Ticker 라는 요소를 추가해서 원하는 느낌대로 애니메이션이 진행될 수 있도록 적용할 수 있었습니다.

그렇게 페이지의 요소들에 여러가지 효과들을 적용하고 마지막으로 내용들을 수정한 후 페이지의 모습은 아래처럼 완성되었습니다!

효과를 넣은 이후 Desktop 화면 기준으로 적용되어 있는 요소들의 크기를 tablet / phone 화면에도 알맞게 보이도록 크기 조절을 진행하였는데요

뭔가 연동되어서 조절할 수 있는 방법이 있었겠지만.. 잘 알지 못했기 때문에 하나하나 수작업으로 크기를 조정해주었습니다😂😂

Gallery를 추가해보아요

홈 화면을 만들고 난 후 개인적으로 조금 아쉬운 부분들이 몇 개 있었는데요

🤔 개인적으로 아쉬운 부분들..
- 비요의 팀 분위기를 보여주는 요소가 조금 부족하다..!
  (정적이고 깔끔한 분위기는 확인할 수 있지만 활기차고 에너제틱한 부분은 없음..)
- 초기 팀페이지 컨셉을 잡을 때 키치한 요소들을 좀 넣고 싶었지만 통일감을 위해 모두 취소했다...
- 우리 찍은 사진 왕많은데 좀 더 잘 쓰고 싶다 ㅜㅜ

그래서 비요의 활기차고 영 에너지를 뿜뿜 표출할 수 있는 갤러리 페이지를 추가적으로 만들어야겠다고 생각했습니다.

갤러리 페이지는 홈 화면 페이지가 아닌 새로운 페이지를 개설한 이후 홈 화면의 navigation bar > gallery에 이어지도록 설정하여 접근할 수 있도록 설정하였는데요,

navigation bar에 있는 gallery 버튼을 눌러 해당 페이지까지 들어올 열정이라면 비요에 대해서 깊숙이 느껴보고 싶을 것이라는 가정을 세우고 비요의 감성이 잔뜩 묻어날 수 있도록 구성해보았습니당🍀

갤러리 속 섹션을 나누어 각각의 컨셉을 잡고 컨셉에 맞는 사진들을 골라서 스크랩한 것 같은 효과를 낼 수 있게 라인을 따고 종이 느낌이 나도록 작업을 진행해주었습니다. 사실 이게 가장 오래걸렸어요..

한창 일러스트레이터를 활용하는 것에 재미가 들려 있었던지라 즐겁게 금방 금방 요소들을 만들 수 있었답니당😎😎

3. effect > hover

제작한 요소들을 갤러리에 삽입한 다음, 포인트가 될 수 있는 알파벳들과 사진들에도 hover effect를 통해 PC로 확인하시는 분들을 위한 미니 재미 요소도 포함 시켜 보았습니다.

해당 effect를 사용하면 마우스 포인트를 올려두었을 때 강조되는 듯한 효과를 줄 수 있답니다!

4. Slideshow

그리고 갤러리 맨 밑 부분에는 비요만의 이스타에그가 숨겨져 있는데요(!)

비요 자타공인 사진작가님 쫑님의 엄청난 사진들을 꼭 전시하고 싶었기 때문에..! slideshow 기능을 활용해서 오잌오잌 전시전도 만들어보았습니다

마지막으로 tablet / phone 환경에서도 알맞게 보일 수 있도록 이미지들의 위치를 조정하고 고정해주면 galley도 완성입니다!

쏭교수님은 친절해

팀페이지를 마무리할 쯤 navigation bar에서 알 수 없는 오류가 발생해서 한참을 해멨는데요.

• navigation bar 의 product를 클릭하면 bar 아래로 list가 떠야 함

• 홈 화면은 잘 적용되었는데 gallery에서 정상적으로 작동하지 않음

요거는 정말 방법을 알 수 없어서 결국 쏭교수님께 도움을 요청해서 해결할 수 있었습니당..

Framer로 팀페이지 만들어보기 성공!

이렇게 비요의 팀페이지를 Framer를 통해 제작해보았는데요!

아직 framer에 완벽히 적응하지 못하고 서투른 실력이었지만 페이지를 제작하고 이것 저것 다양한 시도들을 해보면서 framer에 있는 다양한 기능들도 더욱 알아보고 framer 다루는 실력도 쭉쭉 키울 수 있었던 소중한 경험이었습니다!!

그리고 무엇보다 왕친절 쏭교수님이 없었다면 전 팀페이지를 만들지 못했을것이에요.. 이 영광을 쏭교수님께 돌립니다 후후

저는 그럼 또 다른 이야기로 찾아오도록 하겠습니당 안뇽~~ 🐈‍⬛

완성된 팀페이지가 궁금하다면 👉 여기를 클릭