Website: κ°€μ΄λ“œ: 리더 섀정에 λ·°μ–΄ 탐색 μΆ”κ°€

에 λ§Œλ“  2021λ…„ 01μ›” 13일  Β·  10μ½”λ©˜νŠΈ  Β·  좜처: tachiyomiorg/website

앱은 λ·°μ–΄ νƒμƒ‰μ—μ„œ 탐색이 μž‘λ™ν•˜λŠ” 방식을 보여주지 μ•ŠμŠ΅λ‹ˆλ‹€.

μΆ”κ°€ν•  사항:

  • ν‘œμ œ
  • κ°„λ‹¨ν•œ μ„€λͺ…
  • νƒ­ μ˜μ—­μ„ μ‹œκ°ν™”ν•˜κΈ° μœ„ν•΄ μƒ‰μƒμœΌλ‘œ 각 탐색 μœ ν˜•μ„ λ³΄μ—¬μ£ΌλŠ” 이미지가 ν¬ν•¨λœ μΊλŸ¬μ…€(λ§Œν™” νŽ˜μ΄μ§€λ₯Ό 배경으둜)

λ°˜μ „ νƒ­ν•‘ μ„Ήμ…˜μ˜ 단어λ₯Ό λ°”κΏ”μ•Ό ν•©λ‹ˆλ‹€.


각각의 μž‘λ™ 방식에 λŒ€ν•œ μ°Έκ³  사항 :

κΈ°λ³Έκ°’ : λͺ¨λ“  읽기 λͺ¨λ“œμ—μ„œ 이전과 λ™μΌν•˜κ²Œ μž‘λ™

호좜기 κΈ°λ³Έκ°’ :

Visualization of default state without any inversion
+---+---+---+
| L | M | R |   R: Move Right
+---+---+---+
| L | M | R |   M: Menu
+---+---+---+
| L | M | R |   L: Move Left
+---+---+---+

Webtoon Default : Lλ‚΄λΉ„κ²Œμ΄μ…˜κ³Ό λ™μΌν•œ νƒ­μ˜μ—­μ„ κ°€μ§‘λ‹ˆλ‹€.

κ°€μž₯자리 :

Visualization of default state without any inversion
+---+---+---+
| N | M | N |   P: Previous
+---+---+---+
| N | M | N |   M: Menu
+---+---+---+
| N | P | N |   N: Next
+---+---+---+

ν‚¨λ“€λ¦¬μ‹œ :

Visualization of default state without any inversion
+---+---+---+
| M | M | M |   P: Previous
+---+---+---+
| P | N | N |   M: Menu
+---+---+---+
| P | N | N |   N: Next
+---+---+---+

μ—˜ :

Visualization of default state without any inversion
+---+---+---+
| P | P | P |   P: Previous
+---+---+---+
| P | M | N |   M: Menu
+---+---+---+
| N | N | N |   N: Next
+---+---+---+

νŽΈμ§‘: νšŒμ „ λͺ©λ§ˆ 뢀뢄을 μ’€ 더 λͺ…ν™•ν•˜κ²Œ μ„€λͺ…

Help Wanted Guides

κ°€μž₯ μœ μš©ν•œ λŒ“κΈ€

λ§Œν™”μ˜ 사진(첫 νŽ˜μ΄μ§€μ— μžˆλŠ” 것과 같은)κ³Ό μ‹œκ°ν™”ν•  μ˜€λ²„λ ˆμ΄ 색상이 μžˆμŠ΅λ‹ˆκΉŒ?

λͺ¨λ“  10 λŒ“κΈ€

λ§Œν™”μ˜ 사진(첫 νŽ˜μ΄μ§€μ— μžˆλŠ” 것과 같은)κ³Ό μ‹œκ°ν™”ν•  μ˜€λ²„λ ˆμ΄ 색상이 μžˆμŠ΅λ‹ˆκΉŒ?

쑰금 μ‚΄νŽ΄λ³΄λ‹ˆ μ›Ήνˆ° λͺ¨λ“œ(κΈ°λ³Έκ°’κ³Ό L)μ—μ„œ 두 개의 λ™μΌν•œ 탐색 κΈ°λŠ₯을 가지고 μžˆλŠ” 반면 ||| ν˜ΈμΆœκΈ°μ—μ„œ μ‚¬μš©ν•  수 μžˆλŠ” λͺ¨μ–‘μ˜ 탐색. λ…Όμ˜ν•˜κΈ°μ— μ μ ˆν•œ μž₯μ†ŒλŠ” μ•„λ‹ˆμ§€λ§Œ 적어도 μ•ˆμ •λ  λ•ŒκΉŒμ§€ 보λ₯˜ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

λˆ„κ°€ 그것을 ν•  것인지 μ˜€λ²„λ ˆμ΄μ— κ΄€ν•΄μ„œλŠ” (λ‚΄κ°€ 그것에 λŒ€ν•΄ 잘λͺ»ν–ˆκΈ° λ•Œλ¬Έμ— νŽΈμ§‘λ¨):

+---+---+---+
|   |   |   | 1/3
+---+---+---+
|   |   |   | 1/3
+---+---+---+
|   |   |   | 1/3
+---+---+---+
|1/3|1/3|1/3|

쑰금 μ‚΄νŽ΄λ³΄λ‹ˆ μ›Ήνˆ° λͺ¨λ“œ(κΈ°λ³Έκ°’κ³Ό L)μ—μ„œ 두 개의 λ™μΌν•œ 탐색 κΈ°λŠ₯을 가지고 μžˆλŠ” 반면 ||| ν˜ΈμΆœκΈ°μ—μ„œ μ‚¬μš©ν•  수 μžˆλŠ” λͺ¨μ–‘μ˜ 탐색. λ…Όμ˜ν•˜κΈ°μ— μ μ ˆν•œ μž₯μ†ŒλŠ” μ•„λ‹ˆμ§€λ§Œ 적어도 μ•ˆμ •λ  λ•ŒκΉŒμ§€ 보λ₯˜ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

κΈ°λ³Έ(Webtoon) 및 L 탐색은 μΊλŸ¬μ…€μ—μ„œ ν•¨κ»˜ μžˆμ„ 수 μžˆμŠ΅λ‹ˆλ‹€.

κΈ°λ³Έ(νŽ˜μ΄μ €)의 경우 λ‹€μŒκ³Ό 이전 λŒ€μ‹  였λ₯Έμͺ½κ³Ό μ™Όμͺ½μœΌλ‘œ 이동함을 λ‚˜νƒ€λ‚΄κΈ° μœ„ν•΄ λ‹€λ₯Έ 색상을 μ‚¬μš©ν•  κ²ƒμž…λ‹ˆλ‹€.

예, λ‹€μŒ μ•ˆμ • λ¦΄λ¦¬μŠ€κΉŒμ§€ λ³‘ν•©λ˜μ§€ μ•Šμ„ κ²ƒμž…λ‹ˆλ‹€.

λ‹€λ₯Έ 탐색 μœ ν˜•μ΄ μ–΄λ–»κ²Œ μž‘λ™ν•˜λŠ”μ§€ λ¬»λŠ” μ‚¬λžŒμ΄ μžˆλ‹€λ©΄ μ—¬κΈ° https://github.com/tachiyomiorg/website/issues/503#issue -785346504에 μ—°κ²°ν•˜μ„Έμš”. λ©”λͺ¨λŠ” μž‘λ™ 방식을 λ‹€μ†Œ μ„€λͺ…ν•΄μ•Ό ν•©λ‹ˆλ‹€.

각 탐색 λͺ¨λ“œλ₯Ό μ‹œκ°ν™”ν•˜κΈ° μœ„ν•΄ λͺ‡ 가지 이미지λ₯Ό λ§Œλ“€μ—ˆμŠ΅λ‹ˆλ‹€. λˆ„κ΅°κ°€ 의견이 있으면 κ°μ‚¬ν•˜κ² μŠ΅λ‹ˆλ‹€.

| 호좜기 | μ—˜ |
|---|---|
|pager_default |l |
| 이것은 RIGHT와 LEFTλ₯Ό μ‚¬μš©ν•˜μ—¬ λ‹€λ₯Έ λˆ„κ΅¬λ„ 가지고 μžˆμ§€ μ•Šμ€ νƒμƒ‰ν•©λ‹ˆλ‹€. λ‹€λ₯Έ 색상을 μ‚¬μš©ν•˜μ—¬ μ‹œκ°ν™”ν•  수 μžˆμŠ΅λ‹ˆλ‹€. ||

| ν‚¨λ“€λ¦¬μ‹œ | 에지 |
|---|---|
|kindlish |edge |

Krita ν”„λ‘œμ νŠΈ 파일: navigation_kirta.zip

λ‚˜λŠ” κ³„νšμ΄ 색상에 λŒ€ν•œ 전섀을 κ°€μ§ˆ 것이라고 κ°€μ •ν•©λ‹ˆκΉŒ? μ–Έλœ»λ³΄κΈ°μ—λŠ” 그듀이 μ˜λ―Έν•˜λŠ” λ°”λ₯Ό μ΄ν•΄ν•˜κΈ° μ–΄λ ΅μŠ΅λ‹ˆλ‹€.

λ°˜μ „ λͺ¨λ“œκ°€ λ‹€λ₯Έ λ ˆμ΄μ•„μ›ƒμ— μ–΄λ–»κ²Œ 영ν–₯을 λ―ΈμΉ˜λŠ”μ§€ λͺ…ν™•ν•˜μ§€ μ•ŠκΈ° λ•Œλ¬Έμ— μ΄μƒμ μœΌλ‘œλŠ” 4개의 λ ˆμ΄μ•„μ›ƒ * 4개의 λ°˜μ „ λͺ¨λ“œ = 16개의 이미지가 μžˆλ‹€κ³  μƒκ°ν•©λ‹ˆλ‹€. 그리고 μ§€κΈˆ 생각해보면 읽기 λͺ¨λ“œλ„ 이것에 영ν–₯을 λ―ΈμΉ©λ‹ˆλ‹€(RTL λŒ€ LTR). 그럼 이미지가 32κ°œμΈκ°€μš”? λ„ˆλ¬΄ λ§Žμ€ 것 κ°™μŠ΅λ‹ˆλ‹€. μ‹€μ œλ‘œ ν•„μš”ν•œμ§€ μ§€κΈˆμ€ ν™•μ‹€ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.

그듀이 ν‹± ν•œ 것을 기반으둜 ν΄λΌμ΄μ–ΈνŠΈ μΈ‘μ—μ„œ μ˜€λ²„λ ˆμ΄λ₯Ό μƒμ„±ν•˜λŠ” 방법이 μžˆμŠ΅λ‹ˆκΉŒ?

λ‚˜λŠ” κ³„νšμ΄ 색상에 λŒ€ν•œ 전섀을 κ°€μ§ˆ 것이라고 κ°€μ •ν•©λ‹ˆκΉŒ? μ–Έλœ»λ³΄κΈ°μ—λŠ” 그듀이 μ˜λ―Έν•˜λŠ” λ°”λ₯Ό μ΄ν•΄ν•˜κΈ° μ–΄λ ΅μŠ΅λ‹ˆλ‹€.

예, λ²”λ‘€κ°€ 이미지에 ν†΅ν•©λ˜κ±°λ‚˜ μ•„λž˜μ— 일반 ν…μŠ€νŠΈλ‘œ μΆ”κ°€λ©λ‹ˆλ‹€.

λ°˜μ „ λͺ¨λ“œκ°€ λ‹€λ₯Έ λ ˆμ΄μ•„μ›ƒμ— μ–΄λ–»κ²Œ 영ν–₯을 λ―ΈμΉ˜λŠ”μ§€ λͺ…ν™•ν•˜μ§€ μ•ŠκΈ° λ•Œλ¬Έμ— μ΄μƒμ μœΌλ‘œλŠ” 4개의 λ ˆμ΄μ•„μ›ƒ * 4개의 λ°˜μ „ λͺ¨λ“œ = 16개의 이미지가 μžˆλ‹€κ³  μƒκ°ν•©λ‹ˆλ‹€. 그리고 μ§€κΈˆ 생각해보면 읽기 λͺ¨λ“œλ„ 이것에 영ν–₯을 λ―ΈμΉ©λ‹ˆλ‹€(RTL λŒ€ LTR). 그럼 이미지가 32κ°œμΈκ°€μš”? λ„ˆλ¬΄ λ§Žμ€ 것 κ°™μŠ΅λ‹ˆλ‹€. μ‹€μ œλ‘œ ν•„μš”ν•œμ§€ μ§€κΈˆμ€ ν™•μ‹€ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.

이미지가 κΈ°λ³Έ μƒνƒœλ§Œ ν‘œμ‹œλ˜λ„λ‘ ν•˜λŠ” 것이 이미지 μ˜€λ²„ν”Œλ‘œκ°€ μ—†κ³  더 쒋을 것이라고 μƒκ°ν•©λ‹ˆλ‹€. 그런 λ‹€μŒ μ‚¬μš©μžκ°€ 상상할 수 μžˆλ„λ‘ λ°˜μ „μ„ λ‚¨κ²¨μ£Όμ„Έμš”. κ·ΈλŸ¬λ‚˜ λͺ¨λ“  μ‚¬μš©μžκ°€ λ°˜μ „ λͺ¨λ“œκ°€ μ μš©λ˜λŠ” 방식을 μ΄ν•΄ν•˜λŠ” 것은 μ•„λ‹™λ‹ˆλ‹€. 그리고 RTL 및 LTR의 경우 호좜기(λ˜λŠ” 였λ₯Έμͺ½μ—μ„œ μ™Όμͺ½μœΌλ‘œ)의 영ν–₯을 λ°›λŠ” 탐색 λͺ¨λ“œκ°€ ν•˜λ‚˜λ§Œ 있으며 λ‹€λ₯Έ 색상과 λ‹€λ₯Έ 점을 μ„€λͺ…ν•˜κΈ° μœ„ν•΄ λ‹€λ₯Έ 색상이 더 λ‚˜μ„ 수 μžˆμŠ΅λ‹ˆλ‹€.

그듀이 ν‹± ν•œ 것을 기반으둜 ν΄λΌμ΄μ–ΈνŠΈ μΈ‘μ—μ„œ μ˜€λ²„λ ˆμ΄λ₯Ό μƒμ„±ν•˜λŠ” 방법이 μžˆμŠ΅λ‹ˆκΉŒ?

이것은 탐색 클래슀의 Rect μΈμŠ€ν„΄μŠ€λ₯Ό μ‚¬μš©ν•˜μ—¬ 앱에 μΆ”κ°€ν•  수 μžˆμ§€λ§Œ μΆ”κ°€ν•˜κΈ°κ°€ 맀우 λ³΅μž‘ν•  수 μžˆμŠ΅λ‹ˆλ‹€. λΉ„μŠ·ν•œ 것이 μ›Ήμ‚¬μ΄νŠΈμ— 좔가될 수 μžˆμ§€λ§Œ 그것은 λ˜ν•œ λ³΅μž‘ν•  κ²ƒμž…λ‹ˆλ‹€.

ν”„λž‘μŠ€ κ΅­κΈ°λ₯Ό λ‚˜νƒ€λ‚΄λŠ” smh πŸ¦€

Discord의 curche λŠ” 읽기 λͺ¨λ“œλ₯Ό μ‹œκ°ν™”ν•˜κΈ° μœ„ν•΄ 일뢀 이미지λ₯Ό λ§Œλ“€μ—ˆμŠ΅λ‹ˆλ‹€. 이제 λ¬Έμ œλŠ” ν…μŠ€νŠΈμ™€ ν•¨κ»˜ λ²”λ‘€ λ˜λŠ” 약을 μ‚¬μš©ν•  κ²ƒμž…λ‹ˆλ‹€. λ‚˜λŠ” Tachi μƒ‰κΉ”μ˜ μ•½μ΄λ‚˜ μ „μ„€ 쀑 ν•˜λ‚˜λ₯Ό 말할 κ²ƒμž…λ‹ˆλ‹€.

| Moon+ λ³€ν˜• | Tachi μƒ‰μƒμ˜ Moon+ λ³€ν˜• | μ „μ„€κ³Ό ν•¨κ»˜ |
|---|---|---|
|image |Edge_Nav_Light2 |image |

Figma ν”„λ‘œμ νŠΈ 보기 링크
https://www.fiigma.com/file/PxHyXAuDebeTSj5IYaRcFR/tachi-reader-nav?node-id=0%3A1

내보낸 PNG
ReaderNavGuideImages.zip

이 νŽ˜μ΄μ§€κ°€ 도움이 λ˜μ—ˆλ‚˜μš”?
0 / 5 - 0 λ“±κΈ‰