▣ 목차 샤오미 스마트 밴드(Xiaomi Smart Band) 4 샤오미미밴드 3,4 호환 스포츠 펀칭 스트랩 착용소감 ◈샤오미 스마트 밴드(Xiaomi Smart Band) 4 2019년 샤오미에서 공개한, 손목에 차는 저사양 웨어러블 디바이스 스마트밴드 Mi Band의 4번째 제품. 심박수(심박수치 표시), 상태(걸음, 거리, 칼로리 등 수치표시), 운동(야외달리기, 트레드밀, 싸이클링, 걷기, 자유훈련, 실내수영 등 모드선택), 날씨(스마트폰 앱 연동으로 정보표시), 알림(그동안 왔던 알림 내용 열람), 더보기(방해금지, 알람설정, 음악콘트롤, 스톱워치, 타이머, 무음 토글, 밴드화면 선택, 기기찾기, 밝기, 화면장금, 자동꺼짐, 재시작, 공장초기화, 법적 정도 등)의 메뉴로 구성돼 있다. 안드로이드 4.4 (킷캣) 이상. iOS 9 이상의 아이폰에서 사용가능. 샤오미 공식앱 MiFit으로 연계했었으나, 후속 모델들 세대 차이가 커진 뒤 리타이어, 앱 이름이 MiFitness로 바뀐 후 더이상 지원되지 않는다. 여전히 사용하는 사용자를 위해 써드 앱인 ZeppLife 에서 모든 기능과 연계를 지원하며, 공식 웹이나 QR에서도 젭라이프를 안내 랜딩하기도 함 (2022년말 기준). ◈샤오미미밴드 3,4 호환 스포츠 펀칭 스트랩 부모님이 몇 년 전 지인분에게 샤오미 미밴드를 선물받으셨습니다. 하지만 사용한 지 얼마 안 돼 이런 저런 이유로 미밴드는 방치, 현재까지 제가 보관하고 있었습니다. 저 자신도 스마트밴드로 비록 구형이긴 하지만 핏빗차지를 쓰고 있어서 말입니다. 기계에도 아무 이상이 없고 성능에도 별 불만이 없는 지라, 굳이 미밴드로 넘어갈 필요성은 못 느꼈는데요. 호기심은 아무리해도 억누를 수 없었습니다. 부모님이 미밴드를 안 쓰시게 됐을 무렵에도, 호기심에 가슴이 간질간질했지만 그때에...
▣ 목차
블로그를 시작하면서 집어넣고 싶었던 것 중 하나가 바로 목차입니다. 목차가 있으면 본문의 내용을 파악하기 쉽기도 하지만, 원하는 본문을 찾아가기도 쉽습니다. 특히 블로그처럼 세로로 좁고 가느다란 화면을 스크롤해야 하는 환경에서는, 목차의 제목을 클릭하면 바로 본문으로 이동하는 목차가 유용할것 같았습니다.
1) 내부링크 버튼 이용하기
전 블로그스팟의 새글 작성 보기 에디터로 글을 씁니다. 새글 작성하기 화면에서 보면, 도구함 한가운데에 클립 형태의 아이콘이 있습니다. 이 아이콘이 내부링크를 만들어주는 아이콘입니다.
목차
(1번) 소제목 1
(2번) 소제목 1
이게 제 본문의 형태입니다.
위쪽에 있는 (1번) 소제목 1이 목차, 아래쪽에 있는 (2번) 소제목 1이 실제로 본문에 작성될 소제목입니다. 위쪽의 (1번) 소제목 1을 눌렀을 때, 저 아래 본문에 있을 실제 (2번) 소제목으로 스크롤해 내려가게 하는 겁니다.
여기서 (1번) 소제목 1을 드래그한 뒤에 내부링크 버튼을 눌러줍니다.
그럼 위에는 "표시할 텍스트", 아래에는 " 링크 붙여넣기 또는 검색"이라고 두 개의 빈칸이 뜹니다.
두 빈칸 중 "표시할 텍스트"에는 이미 에디터 화면에 써 놓은 "소제목1"이라고 적혀 있습니다. 이제 아래쪽 "링크 붙여넣기 또는 검색" 칸을 채워넣으면 됩니다. "링크 붙여넣기 또는 검색"칸에는 #과 함께 원하는 숫자, 문자, 글자 등을 써넣어줍니다. 제 경우에는 그냥 편하게 01이라고 숫자를 넣어줬습니다.
"표시할 텍스트"= 소제목 1
" 링크 붙여넣기 또는 검색" = #01
여기까지 집어넣었으면, 목차를 눌렀을 때 실질적으로 도착할 본문의 소제목도 손을 봐줘야 합니다. 이 부분은 HTML 화면으로 넘어가야 합니다. 에디터 화면을 HTML 보기로 바꿔줍니다.
HTML 화면이 뜨면, 나열된 코드 중에서 본문 쪽 소제목의 태그를 찾아주세요.
제 것이 경우에는 이런 식으로 되어 있습니다. 참고로 <span style~>로 시작하는 두 개의 태그는 폰트와 폰트크기 내용입니다.
<p><span style="font-size: large;"><span style="font-family: IBM Plex Sans KR;">▣ 목차</span></span></p>
→ 여긴 목차 태그
<p><span style="font-size: large;"><span style="font-family: IBM Plex Sans KR;">소제목1</span></span></p><p><br /></p>
→ 요건 (1번) 소제목 태그
<p><span style="font-size: large;"><span style="font-family: IBM Plex Sans KR;">소제목 1<br /></span></span></p><p>
→ 요건 (2번) 소제목 태그
우리가 찾아야 할 건 (2번) 소제목 태그입니다.
(2)번 소제목의 태그를 찾았다면, 가장 앞에 있는 <p> 태그 안에 다음과 같은 내용을 넣어줍니다.
id = "o1"
아까 내부링크 버튼을 눌러서 내부링크를 만들었을 때, " 링크 붙여넣기 또는 검색" 칸에 #01이라고 넣어주었지요. 그것에 호응하는 내용입니다. 그 내용을 표현하는 전문용어가 있는 것 같습니다만, 전 문외한이니 대충 관계성만 얘기하고 넘어가겠습니다.
즉, " 링크 붙여넣기 또는 검색" = #01
이렇게 써 넣었다면, 실제로 이동할 본문 소제목의 HTML 태그는 <p id="01> 이라고 써 줘야 한다는 겁니다. 여기서 #01이라는 표기는 자신이 원하는 대로 바꿀 수 있습니다. 어떤 분은 "#여기로"라고 쓰셨던데, 그에 호응하는 HTML 태그는 <p id = "여기로">가 되는 겁니다.
템플릿을 저장하지 않고 본문을 작성할 때마다 내부링크 버튼으로 목차를 만들고 싶다면, 요런 식으로 하면 됩니다. 말로만 설명해서 글이 길고 손이 많이 가는 편이지만, 익숙해지면 알아서 착착 하게 되더군요. 비단 목차만이 아니라, 같은 페이지 안에서 내용을 바로바로 이동하게 하는 데에도 도움이 될 것 같습니다.
(2) HTML를 수정하기
내부링크
버튼을 이용해 목차 이동을 할 수 있게 된 것까지는 좋았습니다만, 저 자신도 은근히 성가셔지더군요. 그래서 몇 번의 단계를
거쳐, 아예 HTML를 수정한 뒤에 그 코드를 "설정" - "글 템플릿"에 저정해 두었습니다. 그렇게 해 두자, 새 글을 작성할
때마다 내부링크를 통해 목차와 소제목을 이동할 수 있는 본문서식이 자동으로 표시되게 되었습니다.
HTML을 수정하는 방법은 어렵지 않습니다.
새글 작성보기에서 "내부링크 (클립모양) 버튼"을 눌러서 처리하던 작업을, 태그 하나 집어넣어주는 것으로 대신하는 것입니다. 링크를 만들 목차 소제목 (1번 소제목)의 HTML 태그란에 다음과 같은 내용을 넣어주면 됩니다.
(a href="#01"소제목 /a).
(실제로는 ()가 아니라 <>를 사용해 주세요.)
그런 뒤, 본문의 소제목인 (2번) 소제목의 <p> 태그에 id="(원하는 내용)"이라는 내용을 넣어주면 됩니다. 이 부분은 내부링크 버튼을 눌러서 목차이동을 만들었을 때와 동일합니다.
제 목차의 경우에는 <p id ="o1">이라는 태그로 되어 있습니다. href = #뒤에 넣을 내용은 뭐가 됐든 id 뒤의 내용과 일치하기만 하면 됩니다.
<p><span
style="font-size: large;"><span style="font-family: IBM Plex Sans
KR;"><a
href="#01">소제목1</a></span></span></p><p><br
/></p>
→목차의 (1)번 소제목 태그
<p
id="01"><span style="font-size: large;"><span
style="font-family: IBM Plex Sans KR;">소제목 1<br
/></span></span></p><p></p><p></p>
→ 본문의 (2)번 소제목 태그
지금까지는 목차에서 본문 소제목으로 이동하는 일방통행 방법만 알고 있었습니다.
사실 이 방법도 완전하지는 않은 것이, 본문을 읽다가 다시 목차로 돌아가고 싶을 때, 무한 스크롤을 해야 하더군요. 그런 참에 같은 방법을 이용해 소제목에서 목차로 돌아가는 방법을 알았습니다.
방법은 목차 > 소제목 링크 이동을 위해 적은 내용을 반대로 집어넣어주면 됩니다.
목차 > 소제목 이동 때에는 목차 소제목에 <a href ~>를 넣어주고, 본문 소제목에 < p id~>라고 넣어주었습니다. 소제목에서 목차로 이동할 때에는 반대로 본문 소제목에 <a href ~>를 추가하고, 목차 소제목에 < p id~>를 추가해주면 됩니다.
따라서 목차 ↔ 소제목간을 쌍방으로 이동할 때에는 HTML 코드가 다음과 같이 됩니다.
<p id = "con"><span style="font-size: large;"><span style="font-family: IBM Plex Sans KR;">▣ 목차</span></span></p>
→ 목차
<p><span style="font-size: large;"><span style="font-family: IBM Plex Sans KR;"><a href="#01">소제목1</a></span></span></p><p><br /></p>
→ 목차 소제목
<p id="01"><span style="font-size: large;"><span style="font-family: IBM Plex Sans KR;"><a href="#con">소제목 1</a><br /></span></span></p><p></p><p></p>
→ 본문 소제목
→ 파란색 태그는 목차에서 소제목으로 이동하는 태그, 갈색 태그는 소제목에서 목차로 이동하기 위한 태그입니다.
본래 말하는 스타일이 서론이 긴 편입니다. 서론을 늘어놓다가 정작 내가 하려던 말을 잊어버리는 일도 드물게 발생할 정도이지요. 그 버릇은 블로그를 시작한 뒤에도 그대로 유지가 되었습니다. 글을 길게 쓰면 체류시간이 길어져서 좋다고 하고, 뭣보다 애드센스 승인을 받으려면 글자 수가 많아야 한다고 들어서 말입니다.
그런데 말이 긴 것이 글을 읽는 사람에게는 불편했던 모양입니다. 티스토리를 쓸 때에 한 번 지적을 받은 적이 있었습니다. 그 당시에는 그냥 취향이거나 하고 넘어갔는데, 이런. 티스토리 글을 백업해서 다시 읽어보니, 말이 너무, 길다. 쓸데없는 소리가 참 많더군요.
그래서 블로그스팟으로 이사와 처음부터 다시 시작할 때에는, 링크를 통해 이동할 수 있는 목록을 만들었습니다. 되도록 서론을 짧게 쓰려고 글 쓰는 스타일을 바꾸기도 했습니다만, 의식의 흐름대로 쓰는 글들은 또 그렇게가 안 돼서 말이지요. 스킵(?)이라고 할 수 있게 점프 버튼을 만들어봤습니다. 문외한이 만든 것치고는 잘 나온 것 같아 만족스럽습니다.