본문 바로가기

DeVsign

(25)
CA CON 86 – Airbnb Design System 후기 https://www.cabooks.co.kr/con-86 사내에서 디자인 시스템을 도입하기 위해 디자인, 개발팀이 노력하고 있다. 아직은 디자인시스템이라 명명할 수 없고 다져지지도 않은 상태지만 체계적이고 명료한 가이드가 제공된다면 좋을 것이라는 건 모두의 최종 goal인 듯하다. 그런 의미에서 평소 굉장히 섬세하게 짜여있다고 생각했던 Airbnb 디자인 시스템에 관한 이야기는 꼭 한 번 들어보고 싶었다. 이번 컨퍼런스는 에어비앤비 디자인시스템 팀을 총괄하는 한유진 디자이너가 스피커를 맡았다. 총 세 번의 세션으로 나누어 진행이 되었는데, 단어 하나 놓치고 싶지 않을 정도로 유익했다. 나에게 맞는 상황들이 많았기 때문에 더욱 공감되었던 것 같다. 디자인 시스템 이야기 뿐만 아니라 디자이너로서 어떻게 살..
워드프레스 HTTP error 500문제 해결 게으름으로 며칠간 미루게 되었던 HTTP error 500 을 해결했다. ============================== 페이지가 작동하지 않습니다. 현재 www.congjang.com에서 요청을 처리할 수 없습니다. HTTP ERROR 500 ============================== 세상마상 이 에러의 정체는? 404에러도 아닌 500이라니, 그래서 내 사이트는 반 비정상이었다. 태그 / 카테고리 / 메뉴를 클릭하면 페이지가 잘 나오는데, 날짜/글제목/댓글을 누르면 페이지가 뜨지 않고 저런 에러메시지가 나타났다. 링크도 잘 안 걸린 개인 홈이라니, 나만 보고 있어서 참으로 다행이긴 하지만 스스로 답답했다. 아무리 원인을 찾아 보아도 방법이 나와 있지 않았다. 에러 코드 번호만 보고..
Framer 도전기 #번외편 Framer X Beta 와의 만남 대기번호 1751번. 초대장을 손꼽아 기다려 왔는데, 드디어 Your Framer X Beta invite라는 제목의 메일을 받았다. 왔네왔어. 다운로드를 받습니다. 일단 지금 난 너무 떨리므로, 어떤 것도 제대로 해 볼 수 없을 것이다. 그보다는 Framer와 언어부터 다르기 때문에 건드릴 수 없다는 것을 알고 있다. 대략적인 리뷰를 해 보도록 하겠다. 기분탓인가 다운로드 속도는 왜 이리도 느린 것인가. 빨리빨리. 설치 빨리빨리. 첫화면을 접한 소감 외관이 몹시 심플하다. 베타 버전에서 가장 중요한 네 가지 메뉴만을 보여주고 있다. 정식 버전의 메인화면은 어떨지 기대가 된다. video를 누르면 지금까지 예고해 왔던 소개 영상들을 볼 수 있다. 그다음 Docs. Docs는 Framer를 공부할 때도 가..
Framer 도전기 #8 stateCycle()로 Toggle Switch버튼 만들기 이번에는 간단하게 toggle switch button을 만들어보았다. #Layer 먼저 레이어는 토글버튼의 bg와 핸들링 할 수 있는 스위치 버튼의 두 가지다. 이때 버튼의 크기는 고정 좌표로 하지 않고 계산하는 방식을 택했다. 스위치 버튼의 크기에 따라서 toggleBG 의 사이즈도 조절되도록 짜 보았다. toggleBG의 가로사이즈는 switchBtn의 사이즈의 두배에 패딩값의 두 배를 더한 값이다. 그리고 switchBtn의 maxX를 toggleBG width값의 2분의 1로 설정하면, 토글 스위칭의 on/off위치는 toggleBG의 2분의 1기준에서 좌,우로 이동하게 설정하기 편하다. #States 이번에도 역시 stateCycle()을 이용한다. default와 다른 한 개의 state가 ..
Framer 도전기 #7 stateCycle()로 두더지 잡기 도전기 6편을 포스팅하면서 머릿속을 스쳐간 ‘두더지 잡기 게임’을 간단하게 만들어 보았다. 이번에 유용하게 쓴 코드를 세 가지 추려 본다면 이것이다. Utils.randomNumber()Utils.delay 숫자, ->Layer.stateCycle() #LAYER 레이어는 가로로 3개를 먼저 반복시켜주고, 3개 묶음을 다시 세로로 3회 반복시켜 총 9개의 홀에서 두더지가 튀어나오도록 했다. realHole은 마스크 처리될 부분을 설정한 것이고, Hole은 눈에 보이는 구멍을 설정한 것이다. 다음으로 두더지의 얼굴을 만들어 보았다. 두더지의 생김새가 매우 간단하기 때문에 프레이머의 코드 탭에서 얼굴을 표현해보기로 했다. 얼굴에는 약간의 하이라이트를 주고 눈썹, 눈, 입 레이어를 추가해 반복시켜주었다. 이때..
Framer 도전기 #6 Medium의 박수치기 버튼 만들기 카운트 올리는 코드를 완성하고, 미디엄 박수 버튼에 응용해 보기로 했다. 미디엄의 박수치기 버튼은 일반적으로 사용하는 좋아요 버튼(좋아요/ 좋아요 취소의 두 가지 케이스 토글 스위칭)과는 달리, 내가 마음에 드는 대로 박수치는 횟수를 더해줄 수 있다는 것이 특징이다. 아주 마음에 드는 포스트에는 열 번이고 스무 번이고 박수를 쳐 주는데, 메타포의 의미와도 잘 부합하는 것이 상당히 매력적인 기능이라 생각한다. #Layer 일단 프레이머 디자인 탭에서는 손 모양을 만들어준다. 미디엄과 같은 모양은 아니지만, 대략 박수를 치는 의미에 접근만 가능할 정도로 만들어 주었다. hands로 이름을 지었다.화면은 일반 canvas로 사용하고, 애니메이션 영역을 캔버스 전체로 지정해준다. 버튼을 가운데로 정렬시켜주고 카..
Framer 도전기 #5 클릭했을 때 숫자 카운트가 증가하는 버튼 만들기 이번에는 Framer로 아주 간단한 버튼 클릭 이벤트를 만들어보았다. 버튼을 클릭하면 카운트가 올라가는 것이다. medium의 박수 버튼을 신명나게 누른 것이 동기가 되었는데, 일단 간단한 코드부터 명확히 한 다음 실제로 박수치기 버튼을 만들어 보려 한다. Layer, State, Event중에 State는 필요하지 않고 나머지 두 가지에 대해서 세팅했다. #Layer 너무 간단하기 때문에 글을 쓰는 것 조차 민망하지만, 원하는 결과가 나왔기 때문에 기념으로 글을 남긴다.일단 레이어는 두 가지만 설정하면 되었다. 버튼과 버튼 안에 들어가는 숫자. 먼저 변수 count를 0으로 설정한다. 굳이 먼저 설정한 이유는 마음이 급해서 였는데, 지금 생각해보니 맨 앞에 두길 잘 한 것 같다. 변수나 배열 등은 맨 ..
Framer 도전기 #4 Lottie를 Framer에 적용하기 전편에 이어서, 이번에는 lottie animation을 활용하여 Framer에 적용해 보겠다. 아래 목업의 애니메이션은 회사 프로젝트 중 어그러진 작업물이라 부분적으로 올려 본다. 음성 명령과 사운드검색을 장면 전환 없이 한 화면에서 동작해볼 수 있게 프로토타이핑 한 것이다. 그럼 시작. 첫번째로 Illustrator에서 오브젝트를 제작한 후 After Effect에서 애니메이션을 제작, BodyMovin 플러그인을 이용하여 json data파일을 뽑아낸다. 하나는 음성을 듣는 중이라는 애니메이션, 또하나는 음표의 잔상이 남는 애니메이션이다. 두 개의 json date 파일은 작업하고 있는 Framer프로젝트의 images폴더 안에 넣어 둔다. 프레이머의 디자인 탭에는 음성 명령(말풍선 메타포, ico..
Framer 도전기 #번외편 - Lottie로 animation 만들기 프레이머 자체에서도 모션 구현이 가능하지만 더욱 정교하고 엣지 있는 애니메이션을 만들어 넣어보는 것도 괜찮을 것이다. 이번에는 Lottie Animation에 대해서 글을 써 보려 한다. Lottie 란? Lottie란 오픈소스 모바일 라이브러리로, json data파일을 만들어낼 수 있도록 도와주는 플랫폼이다. 독일 영화 감독이자 실루엣 애니메이션의 선구자인 로띠 라이네거(Lotte Reiniger)의 이름을 따서 지어졌다고 한다. 가장 잘 알려 진 그녀의 영화로는 가장 오래된 장편 영화인 ‘아흐메드 왕자의 모험’이 있는데, 이 영화는 월트 디즈니의 장편 백설 공주와 일곱 난쟁이를 10년 넘게 앞선다고 한다. 앱이나 웹에서 아래와 같이 애니메이션을 이용한 피드백이 많아졌다. 트위터에서 좋아요를 눌렀을 ..
Framer 도전기 #3 Tab Bar 의 활성/비활성 상태 인지하기 이 화면에서 나는 화면의 stack 구조를 어떻게 짜야 할 지가 가장 힘들었던 것 같다. 먼저 각 메뉴를 눌렀을 때 뜰 다섯개의 화면이 필요한데, 팝업을 제외한 나머지 화면은 하단 tab bar보다 아래 뎁스에 위치해야 하므로 가장 위에는 tab bar가, 그 아래에는 각 메뉴의 화면들을 놓으면 될 거라 생각했다. 그러면 flow밖에 tab bar를 빼 놓고, flow안에는 화면 네 개를 놓고, 가운데 화면은 tab bar위로 어떻게 쌓냐능????????그래서 생각한 것이, 세번째 버튼을 눌렀을 때는 탭바가 아래로 사라진 후 팝업이 스윽 위로 뜨면 되지 않을까? 였다. 그렇게 하면 세번째 화면이 flow 아래 있더라도 눈속임이 가능할 것 같으므로.먼저 Tabs의 state를 셋팅하고, 기본 상태는 화면 ..
Framer도전기 #2 Tab Bar 구현하기 취미생활로 끝인 줄만 알았는데, 어느새 회사에서 프레이머로 목업을 제작중인 나를 발견 후덜덜. 거기에 더하여 이 작업에 집중할 수 있도록 다른 업무가 배제되었다.(꿀) 6주 클래스 이후로 본격적인 앱 프로토타입을 만들어낸다는 게 쉽지 않지만, 날마다 차근차근 구현에 성공함으로써 성취감을 느끼고 있다. 그중 가장 뿌듯했던 것은, 몇 번의 도전 끝에 Tab Bar 활성탭/비활성탭의 구조를 구현했다는 것이다. 프레이머가 출시된 지 최소 4년은 넘은 만큼 탭바에 대한 오픈소스는 곳곳에서 찾을 수 있었다. 그러나 소스를 받아서 흉내를 내 보아도 응용이 되지 않았다. 어느 곳에서 틀린 건지 구분하는 건 능력 밖의 일이었다. 그래서 따라해본 소스는 전부 삭제하고 탭바 영역만 따로 떼어 내가 배운 지식을 토대로 처음부..
Framer도전기 #1 Utils.modulate로 텍스트 두께 조절하기 디자이너가 프레이머를 사용하기 위해서 가장 필요한 것은 '개념 이해'라고 생각한다. 지난 수업의 2주차 정도 까지는 플래시 액션 스크립트나 html 코딩의 경험이 도움이 되어 크게 어려움이 없었는데, 배열과 함수? 뭐였더라, 아무튼 '통'에 담는 얘기가 나오기 시작하면서 멘붕은 시작되었다. 왜 담는 거야 도대체? 처음에 쉽게 코드를 짤 수 있었던 이유는 그동안에 해 왔던 것들을 기반으로 개념을 확실히 이해하고 있기 때문일 것이다. 그 뒤로는 처음 접해보는 '언어'가 주는 장벽이 시작되는 것이다. 반복적으로 작업해보면 개념이 잡힐 날이 올 거라 생각하며 하나 하나 차근차근 공부를 해 보려 한다. 첫번째로 구현해 본 화면은, 슬라이더를 움직임에 따라 텍스트의 두께가 달라지는 인터랙션이다. 전자책의 설정 화면..