일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- LABBIT
- 그로스해커
- 위어드섹터
- 디자이너
- JavaScript
- 컴포넌트
- 마케팅
- 프론트엔드
- 피그마
- 개발일지
- 데이터너겟
- UTM
- 개발스터디
- 그로스마케터
- 그로스해킹
- GA4
- Weirdsector
- 구글애널리틱스4
- 개발공부
- growthhacking
- 인터뷰
- 개발자인터뷰
- 프론트엔드개발자
- 구글애널리틱스
- UX
- 개발자
- 구글애즈
- 데이터분석
- Datanugget
- figma
- Today
- Total
목록전체 글 (84)
위어드섹터 공식 블로그
프로젝트를 진행하면서 버튼에 마우스를 올리면, 최상단에 있는 버튼이 오른쪽 → 왼쪽으로 이동하면서 아래에 있는 버튼이 보이도록 구현해야 했습니다. 무슨 말인지 잘 이해가 안 가시죠? 아래 동영상으로 확인해주세요ㅎㅎ :) 1. 시도했던 방법 처음에 저는 아래와 같이 스타일을 주었습니다. a. 회색 버튼 위에 노란색 버튼을 position: absolute를 주어 회색 버튼 위에 배치합니다. b. 노란색 버튼에 마우스가 hover하거나, focus가 가면 노란색 버튼의 left 값을 -101% 를 주어 왼쪽으로 이동하도록 합니다 자연스럽게 이동되도록 transition 효과도 주었습니다:) 이렇게 했더니 노란색 버튼이 왼쪽으로 이동하면서 마우스가 노란색 버튼에 hover 되지 않고, 회색 버튼에 hover ..
최근 진행한 프로젝트 중 React Native를 이용한 App 제작에서 OS 영역을 맡게 되었습니다. 안드로이드와 iOS 개발을 동시 진행하면서 안드로이드에서는 잘 구현되는 기능이 iOS에서는 작동이 안 되는 경우가 생겨 수시로 기능 및 스타일을 확인해야 하는 경우가 생겼습니다. Xcode로 통해 개발을 진행하고 있었지만 불현듯 스마트폰에 연결 후 실시간 연동이 가능했으면 좋겠다 라는 생각을 가지게 되었고, 확인이 가능한 기능이 존재해 개발 진행에 많은 도움이 되어 이번 게시물로 통해 공유하려고 합니다. iOS 개발 특성상 맥 기기와 애플 개발자 계정을 가지고 있어야만 가능합니다. 우선 Xcode를 사용하여 아이폰으로 실시간 연동 및 TestFlight로 통해 Test App 업로드, AppStore에..
데이터 너겟 서비스의 UI화면을 디자인하던 도중 버튼에 인터랙션을 넣는 방법을 알아보았습니다. 그전에 XD에서 인터랙션을 넣어야 하는 이유는 무엇일까요? 디자이너가 머릿속에서 상상하는 인터랙션을 개발자 또는 퍼블리셔에게 설명하는 것은 생각보다 어렵습니다. ‘슈-욱 하게 올라오다가 빡!하고 버튼이 눌리는 느낌’이라고 설명하면 스스로의 설명에 현타가 오기도 하고 원하는 방향대로 개발자가 이해하지 못하는 경우도 많습니다. 이런 이유로 원하는 인터렉션이 있을 때는 최대한 구현을 해서 개발자에게 전달하는 게 좋습니다. 다른 툴에 비해 어도비 XD같은 경우에는 애프터이펙트나 플래시 등을 배우지 않고도 손쉽게 인터랙션을 넣을 수 있어 어도비 XD의 인터렉션을 넣는 방법을 찾아보았습니다. 제가 이번에 서비스 화면에 넣..
리액트 네이티브 기반의 프로젝트를 진행하던 중, 버튼을 화면의 제일 하단으로 배치하고 나머지 영역은 콘텐츠로 채우는 디자인을 퍼블리싱하게 되었습니다. , 태그를 최상단에 작성했을때, 이 태그와 최하단 버튼에 아래와 같이 flex : 1 을 주면 원하는 대로 스타일이 적용되었습니다. test: { flex:1, } 그런데, 태그를 최상단에 작성 후, 위와 같이 스타일을 주었으나 적용되지 않았습니다. 알고나면 쉬운 해결 방법이지만 무엇이 문제인지 모를 때는 답답한 상황입니다..! 이번 글에는 태그를 최상단에 작성했을 때, 최하단으로 버튼을 정렬하는 방법을 공유하려 합니다. 먼저, 제가 디자인 받은 시안은 아래와 같습니다. 텍스트 콘텐츠 영역이 태그로 되어있습니다. [ 시도했던 해결 방안 ] 위 문제를 겪고 ..