가로스크롤(제스처)을 이용한 리디자인

보통 웹 개발할 때 신경쓰지 않고 아무렇게나 만드는게 페이지네이션이다. 대충 굴러다니는 라이브러리 갖다 써도 아무도 뭐라하지 않는다. 그런데 정말 그 웹사이트를 자주 쓰는 사람들에겐, 페이지네이션은 경험에 지속적이고 반복적인 영향을 미치게 된다.

표준도 없고 아무도 개선의 여지는 없어도, 적어도 내가 만드는 웹사이트의 사용자들은 좀 편하게 쓰게하고 싶어서, 기존의 페이지네이션에서 혼돈되는 기호들을 없앤 미니멀한 페이지네이션을 제안한 적이 있었다.

하지만 해당 개선된 방법도 다른것과 마찬가지의 문제는 있다. 내가 현재 1페이지에 있는데, 갑자기 50페이지로 가고 싶을 때 중간 페이지를 여러 번 거쳐서 도달해야한다(각 페이지가 …


CSS에는 투명도(opacity)라는 속성이 있다. 단순한 속성이지만, 잘 활용하면 적은 코드로 많은 사용자 친화적 효과들을 구현할 수 있다.

투명도의 장점

  • 최근의 필수 대응 중 하나인 다크모드에서 별도로 코드를 수정할 필요가 없다. 투명도를 이용한 스타일은 라이트모드와 다크모드에서 한 번에 유효하다.
  • 전체적인 톤 앤 매너를 유지하기 위하여 세분화된 컬러 값의 수를 줄일 수 있다. 이를테면 주요색과 파생되는 다양한 밝기 값이 있을 때, 투명도를 활용하면 단순히 밝기 변화를 위한 색은 덜 써도 된다.
  • 시각적 피드백을 위한 CSS 코드의 수가 줄어든다. 완벽한 작업을 위한 것은 아니지만, 투명도만으로도 떼울 수 있는 상황이 많다.

투명도의 활용

버튼의 활성 피드백

버튼은 …


svelte는 react나 vue와 다르게, 컴파일 단계에서 반응형 컴포넌트들을 순수 자바스크립트로 변환을 해준다. 따라서 기본적인 동작에 대한 코드 뭉치가 극도로 작아서 번들코드가 가볍게 생성되는 것이 장점이다(사실 더 매력적인 것은 개발시 컴포넌트의 보일러 플레이트가 거의 없다시피 한 것이다).

이 svelte를 이용하여 간단하게 Toast Notification 코드를 만들어보도록 하자. Toast는 간단해서 단일 컴포넌트로 내부 상태값을 활용하여 완성이 가능하다. 만들어보려는 컴포넌트의 모습은 아래와 같다.

데모 페이지

트랜지션 효과가 있는 알림을 만들어보자

프로젝트 생성

보통 svelte 프로젝트 시작 예시는 degit이라는 도구를 이용해서, rollup으로 세팅 …


맥 모하비 업그레이드 이후부터 OS단에서 적극적으로 다크모드를 지원하기 시작하였다. 사실 윈도우즈도 접근성은 좀 떨어지고 잘 알려지지 않았지만, 환경설정에서 지원을하고 있고, 안드로이드 등에서 야간모드 등 다크모드 비슷한 게 있긴 했었다.

보통의 OS 단에서의 변화가 나의 웹페이지에 별로 영향을 안 주는 것이 맞지만, 모바일 시대로 인해서 반응형이, 아이폰 레티나로 인해서 고해상도 이미지 처리를 해야 했던 것처럼.. 이 다크모드라는 환경 변화(?)로 인해서 우리도 이에 대응해야 할 필요성이 생겼다.

왜냐하면 사용자가 다크모드를 사용하고 있을 때, 새하얀 앱을 접하게 되면 눈갱이 되기도하고 앱이 최신이 아닌 느낌이 들기도 …


반응형 개발을 할 때에 일반적으로 스크린의 사이즈를 기반으로 한다. 하지만 실제로 개발을 하다보면 가로폭 사이즈 이외에도 고려해야할 점들이 많이 있다는 것을 깨닫게 된다. 반응형 사이트를 개발하면서 나름대로 사용하는 초보적인 수준의 팁들을 정리해볼까 한다.

윈도우 폭

반응형 사이트를 만들 때에 그리드디자인은 거의 필연적으로 취하게 된다. 따라서 그리드&반응형 라이브러리를 찾게 되는데, 나는 몇 년 전부터 지금까지 꽂꽂하게 부트스트랩을 고수하고 있다. 다른 라이브러리들도 그렇겠지만 부트스트랩도 기본적으로 폰, 타블렛, 데스크탑을 제공하는데, 여기에서 폰의 범위가 지나치게 넓다. 따라서 한 손안에 쥐어지는 일반적인 폰의 크기를 위해서 …


예전에는 시각적으로 표현되었던 ‘방문했던 페이지'가 이제는 우리의 뇌에 의존하여 골라내야한다.

인터넷에서의 전통적으로 페이지 이동의 역할을 해주는 태그는 a 라는 앵커태그가 있다. 그리고 이 앵커태그는 아무런 스타일링을 하지 않으면 파란색으로 보여지고, 한 번 방문했던 기록이 있으면 보라색으로 표시를 해준다. 시각적으로는 엄청 올드해보이지만 어차피 내꺼도 아닌 사이트에서 대충 이용하기에는 엄청나게 편리하다. 내가 무엇을 봤고 안 봤는지 머리를 잠깐 빌리지 않아도 그냥 보면 알 수 있다.

기본값 디자인 같은 크레이그리스트 https://sfbay.craigslist.org/search/roo

색깔을 조금 바꾸어주는 것도 쉽다. 단지 css 에서 a:linka:visited 라는 가상의 셀렉터에 color 속성만 바꾸어주면 된다.

그런데 왜 이런 기똥찬 기능을 최근의 웹디자이너들은 활용하지 않게 되었는가?(여기 미디 …


너무도 흔하게 쓰이지만 표준이 없어 항상 헷갈리는 페이지네이션 UI를 리디자인 해보자.

[Updated] 이 방법보다 더 개선된 방식을 새롭게 포스팅하였다. 개선된 방식에 관한 글은 아래 링크를 참고
- https://medium.com/@maxzidell/c4252df8dca7

이 포스팅에서 제안하고 싶은 것은 바로 웹사이트의 페이지네이션에 관한 방법이다. 페이지네이션은 인터넷의 초창기부터 꾸준히 있어왔지만 아직까지 그 표준이라 할 만한 방식이 없는 것 같다. 그래서 맨날 모든 곳의 모든 페이지네이션이 쓸 때마다 헷갈린다.. 나는 매우 화가 나 있다.

전통적인 방법의 문제

가장 일반적인 구글의 페이지네이션


타일을 위한 6번의 메이저/마이너 프로토타입

타일이라는 자동디자인 툴을 만드는데에 있어서 가장 중요한 점은 자동으로 뽑아 낼 수 있는 디자인의 퀄리티이러한 사용자 경험이 과연 (돈 낼 만큼)가치가 있느냐였다. 그래서 최초의 와이어프레임이 구상되자마자 실제로 손으로 만져보기 위해서 프로토타입부터 시작하였다.

타일 서비스를 위해서 총 5개의 프로토타입을 만들었으며 정확히 말하면 현재의 타일(16년 11월)은 6번째 프로토타입이라 할 수 있다. 우리들은 항상 (성질이 급해서)동작하는 코드를 먼저 만들어내고 나중에 문서화를 한다. 문서화하기 전에 다치면 큰일남..!

프로토타입 1

최초의 프로토타입, 좌측엔 결과물, 우측엔 데이터 조작을 위한 창이 있다.

먼저 타일의 큰 그림을 공유하기 위해서 방향을 설정할 수 있는 최초의 프로토타입이 필요하였다. 체계 없이 …


자동 디자인툴 타일은 현재까지 몇개월 간의 알파버전 테스트를 통해서 ‘알아서 해주는 디자인이 가능한가? 타깃 사용자(시장)의 니즈에 부합하는가가?’의 두 가지 의문에 대해서 테스트를 마쳤다.

처음에는 우리들도 빠른 결과를 위해서 어느정도 예쁜 디자인들을 마련해놓고 내용을 채워넣는 기존의 수많은 템플릿 서비스 혹은 캔바(canva.com)식 접근을 해볼까도 고민하긴 했었다. 하지만 이런식이 넘나 맘에 들지 않았던 이유는 이 방식 내에서 아무리 새로운 것을 도입해도 사실 기존의 서비스와 큰 차별점을 만들 수 없다는 한계점과 이런 방식이 과연 사용자의 문제점들을 해결해주는 최선의 접근인가 하는 의문이 들어서이다.

즉문즉답이 가능하려면 핵심원리를 이해하지 않으면 불가능하다. 어떤 분야의 핵심을 모르고 어설프게 알고 있는 사람이 있다면 대화를 해도 자신이 잘 아는 부분으로만 이야기를 몰게 되어있다. 하지만 핵심원리를 빠 …


미티어가 react를 지원하기는 하지만, 근본적으로는 아직까지는 blaze를 중심으로 많이 설계가 되어있고, 실제로 미티어에서 쉽게 로그인을 다는 방법은 blaze로 설계된 기본 accounts-ui를 땜빵식으로 리액트로 랩핑해서 쓰는 방법이 있다(작성 현재 meteor 1.3).

일반적인 모던웹처럼 Sign in이 상단의 헤더에 있는 경우에는 아주 간단하게 처리가 가능하다. 다른 패키지들도 있기 있는데 여러가지 테스트해본 결과 항상 그렇들 뭐가 하나 삑사리(?) 나서 잘 진행되지 않는다. 그냥 공식 문서에 있는 랩핑 방법을 추천한다. https://www.meteor.com/tutorials/react/adding-u …

홍구

약간의 기술을 이용하여, 편리한 서비스와 기능을 만드는데 관심이 많음

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store