Moon의 개발 일기

새로운 Position Sticky

position: sticky 는 정말 유용한 기능으로 고정 픽스 네비게이션 등을 구현할 때 아주 편리합니다.
다음과 같은 코드에 다음과 같이 적용만해주면 바로 적용이 되는데요.

다음과 같은 코드는 스크롤을 내릴 때 nav 엘리먼트가 상단에 고정되어 따라다니게 해줍니다.
참 좋은 기능이죠. 그러나 아주 치명적인 단점이 있습니다.

IE 에서 지원하지 않는 기능입니다.

브라우저 지원 현황

이게 얼마나 치명적인 느낌인지 모르시는 분들을 위해..

위 사진은 2018년 한 해를 기준으로 한국에서 데스크톱의 경우 각 브라우저의 점유율을 나타내주는 지표입니다.
위 지표를 보러가시려면 이 곳을 클릭하세요.
IE는 점유율이 지속적으로 낮아지고 있지만 아직까지도 전체 사용량의 약 20%를 차지할만큼의 비율을 보여주고 있습니다.
다시 말하자면, 어떤 서비스를 런칭할 때 20%의 비율은 절대 무시할 수 없는 큰 비율입니다.
따라서 반드시 고려해야하는 상황이죠.

브라우저 지원 현황은 무난한 편입니다. 대신 위에서 언급한 것 처럼 IE 가 전혀 지원을 하지 않는 상황이네요.

Polyfill 구현

그렇다면 이 문제를 해결하는 방법은 아예 없는 걸까요? 그렇지는 않습니다.

1) 기존의 스펙 변경

이게 무슨 해결책이냐 할 수도 있지만 어떤면에선 가장 빠르고 확실한 해결책입니다.
문제가 되는건 IE 뿐인데, 이 브라우저만 제외하면 모든 브라우저에선 동작하죠.
position: sticky 는 지원하는 브라우저에서는 동작하지만 지원하지 않는 브라우저에서는 동작하지 않습니다.
만약에 현재 운영중인 어플리케이션을 이용하는 사용자의 IE 비율이 많이 낮거나 무시할정도가 된다면, 재협의를 통해 다시 스펙을 변경하는 것도 좋은 방법이라고 생각합니다.

2) StickyBits 라이브러리 사용하기

position: sticky 를 구현할 수 있도록 도와주는 라이브러리가 존재합니다. StickyBits 라고 부르는 라이브러리인데, 제법 유명한 라이브러리인 것 같습니다.
라이브러리 답게 여러가지 추가 기능이 붙어있으며 이슈 제기에도 제법 빠르게 답변해주는 편입니다.
그러나 저는 이 라이브러리를 사용하지 않았습니다.

3) 직접 구현하기

2번을 사용을 하지 않았던 이유는 사실 제가 사용했을 땐 IE 에서 여전히 동작하지 않았습니다.
왜 그런지는 코드 내부를 들여다보지 않아서 모르겠지만요.
해당 깃허브에 PR 을 보내 코드 수정을 요청하는 것도 하나의 방법입니다만,
코드 안정성 검사를 받아야하기 때문에 시간이 걸리죠.

사실 귀찮습니다.

우선 마크업이 다음과 같이 있다고 가정합시다.

여기에 적용할 코드는 다음과 같습니다. position: fixed; top: 0;
자바스크립트를 사용해 현재 스크롤의 위치에 따라 네비게이션을 고정하는 방식입니다.

네비게이션의 top 값을 가지고와서 window.pageYOffset 과 비교하면서 position: fixed 의 여부를 결정하는 로직이 메소드 안에 들어있습니다. 그런데 이런 방식은 문제점이 있습니다.

Position: fixed 방식의 문제점

이러한 방식은 문제점이 있습니다.
아래의 코드를 첨부하겠습니다.

See the Pen QPLzWy by Munkyu Yang (@moonformeli) on CodePen.

스크롤을 내리다보면 뭔가 이상합니다. 네비게이션이 상단에 고정이되서 붙어 다니긴하는데, 고정이 될 때
다른 글이 팍! 하고 위로 올라가는게 느껴지시나요?

position: fixed 로 요소가 더 이상 그 공간에 종속되지 않으면서 생기는 사이드 이펙트입니다.
그럼 네비게이션 부분만큼이 빠지니까 당연히 그 아래의 컨텐츠들이 위로 올라가는거죠.

이 부분을 고정해줄 무언가가 필요합니다.

사이드 이펙트 해결

position: fixed 로 빠진 부분을 어떻게 채울 수 있을까요.
해결 방법은 똑같은 요소를 만들어서 대신 넣는다 입니다.

cloneNode 의 옵션값을 true 로 넣어주면 자식 요소들까지 복제가 됩니다. cloneNode API 보러가기
자식들까지 복제하는 이유는 자식 요소가 없으면 요소를 복제한다해도 height 값이 0 이기 때문입니다.

네비게이션을 고정할 때 복제한 요소를 넣어주고, 고정을 해제할 때 복제한 요소를 제거하는 방식으로하면 IE 에서도 부드럽게 구현됩니다.

구현 결과는 다음과 같습니다.

See the Pen rbBodd by Munkyu Yang (@moonformeli) on CodePen.

부드럽게 동작하네요!

codepen 은 IE 에서 동작하지 않습니다. 테스트를 원하신다면 아래의 코드를 복사해서 직접 테스트하시기 바랍니다

아래는 각 작업환경에 맞는 버전별 폴리필입니다. 필요하신 부분을 참고하시면 될 것 같네요.

ES6

ES5 + jQuery

HTML + CSS

참고가 되셨으면 좋겠습니다!

주말엔 아귀찜을 먹으러 평촌 학원가 근처에 있는 아귀찜 가게에 다녀왔습니다!

연평도 차림상이라는 가게인데 한 번 다녀온 후기를 간단하게 남겨볼까 해요.

그나저나 티스토리 에디터가 새롭게 출시되었는데 솔직히 아직까진 많이 불편하네요.. 돌려줘..!

밑에는 지도입니다. 지도가 보이지 않으시는 분들은 구글 맵 지도를 클릭해서 확인해보세요.

가게는 지하철역에서 조금 떨어져있어 지하철로 가기엔 조금 번거롭습니다.

주변에 버스가 많으니 평촌 학원가를 지나가는 버스를 타고 가면 쉽게 도착하실 수 있어요.

주차장은 제공하지 않는 듯 보였습니다. 가게 앞의 공간이 넓지는 않았어요.

가게에서 판매하고 있는 메뉴들입니다!!

저희는 4명이서 방문했고 아구찜 대 자를 시켰어요. 4명정도면 대 자면 충분하다고 하시더라구요.

테이블은 끈적거리지도 않고 무난했어요.

벽 한 켠에는 이렇게 많은 유명인사들이 다녀간 흔적이 남아있습니다.

티비에도 방영된 집이라고 해서 그런지 많은 사람들이 다녀간 것 같았어요. 신기신기 ㅎ

주문한 아구찜이 나왔습니다~ 배가 너무 고파서 다른 밑반찬들 먹느라 사진을 못찍었네요. 

아구찜 대 자는 생각보다 많이 담겨져있었고 특히 콩나물이 수북~하게 담겨져 있었어요.

저렇게 한 젓가락 떠서 먹으니 맛있더라구요! 근데.. 저한텐 정말 많이 매웠어요.

사장님이 덜 맵게 해주셨다고 했는데도 저는 물을 엄청 마실 정도로 많이 매웠어요!

매운거 잘 못 드시는 분들은 꼭 맵지 않은 맛으로 주문하세요!

중간에 밥이랑 같이 먹으려고 어린이 메뉴에서 하얀 볶음밥을 주문했어요.

생각보다 상당히 꼬들꼬들하고 달콤 고소해서 굉장히 맛있었어요!

아귀찜을 제외하고 따로 팔아도 될 정도로 저는 상당히 맛있게 먹었답니다.

김치와 같이 곁들여서 먹어도 맛있어요! 

처음엔 굉장히 매웠는데, 그릇에 좀 덜어서 제법 식힌 후에 먹으니까 뜨겁지도 않고, 매운 맛도 많이 사라졌어요.

아귀찜은 조금 식혀서 먹는것도 굉장히 맛있네요 :)

다 먹을 수 있을까 싶었는데 결국 다 먹었네요.. ㅋㅋ

생각보다 양도 엄청 많고 배불러서 괜찮았습니다!

같이 간 일행 중에 외국인 친구도 있었는데, 그 친구도 같이 잘 먹고 나왔습니다!

다음에 기회가 되면 다시 한 번 방문해볼 생각이에요 ㅎㅎ 다들 한 번씩 가보시는 것도 좋을 듯 합니다! XD

오늘은 삼성역 주변에 있는 맛집을 소개해볼까합니다. 평소에 일식을 좋아하는 분들은 한 번쯤 방문하셔도 괜찮을 것 같아서 가져왔습니다!

영업시간(연중무휴) - AM 11:30 ~ PM 22:00

예약문의 - 02-553-7870

팩스 - 02-553-7869

주소 - 서울특별시 강남구 대치동 949-1 번지 / 삼성역 3번출구에서 250m 오른편

가게 정면에서 바라본 모습입니다. 가게 간판은 깔끔하게 걸려있는 편이지만 벽면과 간판 배경이 줄무늬처럼 되어있어서 실제로 보면 길 건너편이나 조금 떨어져서 봤을 땐 잘 안보일 수도 있어요!

가게 입구엔 메뉴판이 비치되어 있어서 적당히 둘러볼 수도 있습니다. 

가게에 들어가면 가장 먼저 정면으로는 여러 종류의 사케를 모아놓은 전시장 같은 것이 보입니다. 가게에서 취급하는 사케뿐만이 아니라 여러 가지 다양한 종류를 모아놔서 구경할 재미는 있는 것 같아요. 가게 안으로 조금 더 들어가면 각 룸들이 보입니다. 저희는 예약한 곳이 2층에 위치해 있어 2층으로 올라갔는데, 다른 방에서 이미 식사중인 다른 손님들이 있더라구요. 신발을 벗고 들어가면 후에 화장실을 가거나 잠깐 나갔다오기 편하게 입구에 슬리퍼가 있고, 신발은 점원 분들이 가지런하게 정리를 해주셨어요. :)

식사를 하기 전에 찍었어야했는데.. 깜빡하고 나올 때 급하게 찍었네요. 룸 내부는 저렇게 여러 명이 앉아서 식사를 할 수 있게 되어있고, 기본적으로 좌식이지만 의자에 앉아서 식사를 할 수 있게 밑으로 공간이 뚫려 있습니다! 저는 양반다리를 하고 식사를 하는 게 많이 불편한데, 이런 면에선 그래도 편했네요.

생활의 달인에도 나왔네요 ㅎ

런치 메뉴와 디너 메뉴입니다. 저는 점심 회식으로 스시 정식을 시켰어요. 가게의 분위기 때문인지 다른 메뉴의 가격이 낮지는 않은 편입니다. 그래서 개인 단위로 오기엔 가격이 조금 부담 될 것 같아요. 대신 팀 회식으로 오면 괜찮을 것 같네요!

메뉴는 룸 안에 들어가면 테이블 옆에 비치되어 있습니다.

스시유 사시미 코스라고 있는데 이 메뉴들은 뭔가 좀 더 스페셜한 코스 요리같은 느낌으로 보면 될 것 같아요!

사케나 와인 종류도 제법 있으니 여기는 취향에 따라 고르시면 되겠죠 :)

드디어! 식전에 나오는 에피타이저의 모습입니다. 구성은 간장과 드레싱이 듬뿍 들어간 샐러드, 단무지 등 스시와 곁들여서 먹을 수 있는 것들과 푸딩처럼 생긴 부드러운 계란찜 같은 게 나왔는데요. 저 푸딩같은 게 정확히 뭔지는 모르겠지만 맛은 제법 부드럽고 괜찮았어요. 딱 식전에 먹기 좋았습니다.

안에 새우까지 센스있게 들어있네요 :) 맛있었습니다.

그 다음으로 나온 에피타이저는 삼치조림과 새우입니다. 새우와 같이 있는건 브로콜리랑 전복 같이 보였는데 정확히는 모르겠어요. 새우는 부드럽고 삼치조림은 간이 살짝만 되어있는 느낌이었습니다. 간장에 살짝 찍어서 먹으니 괜찮았어요. 

개인적으로 맘에 들었던 점은, 위에 사진을 보시면 수저가 왼쪽에 놓여져있는데 사실 처음엔 오른쪽에 놓여져 있었어요. 저는 왼손잡이라서 왼쪽으로 위치를 바꿨는데, 음식을 놔주시는 직원분이 제가 왼손잡이인 것을 캐치하시고 삼치조림을 오른쪽에 놓아주셨네요. 다른 오른손잡이 분들 테이블을 보면 삼치조림이 왼쪽에 놓여져있더라구요. 이런 세심한 배려에 기분이 조금 좋았습니다 :D

드디어 스시까지 나온 모습입니다! 제법 테이블이 넉넉해보이네요. 접시를 놓다가 스시 몇개가 위치가 흐트려졌네요.. 김말이, 계란말이, 오징어 등등 대체로 많이 익숙한 스시들이 나왔습니다!

가운데 스시는 아마도 참치 스시인 것 같아요. 스시의 종류를 잘 몰라서 먹는데만 집중해버렸네요.. 가운데 스시는 그럭저럭 괜찮았습니다! 김말이 스시는 저한테는 조금 별로였어요. 생각보다 많이 퍽퍽하고 살짝 질긴 느낌이라서 물이나 국물을 중간에 좀 먹었던 기억이 있네요. 그리고 마지막 오른쪽 스시는.. 고등어 스시가 아닐까하는데, 생각보다 엄청 비렸어요. 생선 사이에 칼자국이 난 곳에 어떤 양념을해서 그런지는 모르겠지만 기대했던 것보단 많이 비려서 조금 먹는데 힘들었네요; 집에 돌아와서 검색해보니, 고등어를 초로 절인 시메사바 라고 부르는 초밥의 종류가 아닐까하는데 이 초밥은 특유의 향과 맛이 있다고하네요. 그래서 그렇게 느꼈던 걸지도 모르겠습니다!

그리고 초밥을 먹다보니 뭔가 계속 이상한 맛이 끝에 조금씩 감도는 느낌이 들길래 뭐지 뭐지했었는데, 한 번은 코끝이 찡-하게 울리는 거에요. 그래서 혹시나해서 초밥을 들어보니까.. 와사비가 안에 들어가있네요. 소량이지만 향과 맛을 느낄정도는 들어있었어요. 저는 와사비를 좋아하지 않아서 스시 먹을때도 와사비를 먹지는 않거든요. 이 부분은 조금 아쉬웠습니다.

그치만 스시 대부분은 맛이 좋았어요. 일반 스시뷔페에서 먹는 스시보다는 훨씬 더 고급스러웠습니다.

여기는 점원분들이 어떻게 다 아시고, 에피타이저나 스시를 다 먹을 때 쯤이면 문 열고 들어오셔서 다음 메뉴를 가져다 주시더라구요. 오랜 시간 많은 손님들에게 서비스를 제공하다보면 타이밍을 다 아시나봅니다.

스시를 다 먹고나면 우동이 나오는데요. 이 우동은 적당히 뜨겁고 따뜻해서 부담없이 편하게 바로 먹을 수 있었어요.

우동 다음엔 마지막으로 장식할 디저트로 홍시가 나오는데, 얼린 홍시를 상온에서 살짝 녹여서 가져온 것이 아닐까하는 생각이 들 정도로 굉장히 차가웠어요. 물도 따뜻한 보리차가 나오기도하고 우동을 바로 직전에 먹어서 밸런스를 맞추기 위해서 차가운 홍시가 나오는게 아닌가 싶기도하네요. 맛은 제법 달콤했습니다!

가격은 36,000원이었지만 구성이나 맛, 서비스를 생각해보면 제법 싸게 먹은 것 같아요. 바쁜 일상에 가끔 하루정도는 와서 점심으로 식사해도 괜찮다고 생각합니다. 대신, 예약이 많은 것 같으니 미리 예약을하고 가시는걸 추천드려요.