diff --git a/internal/server/shelf.go b/internal/server/shelf.go
index 51baa38..88eab21 100644
--- a/internal/server/shelf.go
+++ b/internal/server/shelf.go
@@ -21,24 +21,30 @@ func (s *Server) Shelf(w http.ResponseWriter, r *http.Request) {
 	// TODO: test data
 	catalog := []types.Book{
 		{
-			Yes24Id:     "124807552",
+			PlatformID:  types.PlatformYes24,
+			ID:          "124807552",
 			Title:       "메멘과 모리",
 			Author:      "요시타케 신스케",
 			Description: "'사람은 무엇을 위해 살아가는가?', '살아가는 의미와 목적이 필요한가?'에 대한 정답 없는 고민으로 괴로운 당신에게 요시타케 신스케가 전하는 세 가지 이야기.",
 		},
 		{
-			Yes24Id:     "58552371",
+			PlatformID:  types.PlatformYes24,
+			ID:          "58552371",
 			Title:       "세계를 건너 너에게 갈게",
 			Author:      "이꽃님",
 			Description: "'나에게. 아빠가 쓰라고 해서 쓰는 거야.' 첫 문장으로 시작한 편지가 '세계를 건너 너에게 갈게.'라는 마지막 문장에 닿기까지, 두 사람의 진심이 하나의 진실을 향해 가는 동안 쌓아올린 감동은 많은 독자들에게 울음을 울게 만들었다.",
 		},
 	}
+	catalogView := make([]types.BookView, 2)
+	for _, book := range catalog {
+		catalogView = append(catalogView, book.View())
+	}
 
 	// TODO: test data
 	items := []types.ShelfItem{
 		{
 			Type: types.ShelfItemBook,
-			Book: &catalog[0],
+			Book: &catalogView[0],
 		},
 		{
 			Type: types.ShelfItemSpacer,
@@ -48,7 +54,7 @@ func (s *Server) Shelf(w http.ResponseWriter, r *http.Request) {
 		},
 		{
 			Type: types.ShelfItemBook,
-			Book: &catalog[1],
+			Book: &catalogView[1],
 		},
 		{
 			Type: types.ShelfItemSpacer,
@@ -58,7 +64,7 @@ func (s *Server) Shelf(w http.ResponseWriter, r *http.Request) {
 	shelf.ShelfPage(shelf.ShelfPageParams{
 		User:          user,
 		ProfileHandle: handle,
-		Catalog:       catalog,
+		Catalog:       catalogView,
 		Items:         items,
 	}).Render(r.Context(), w)
 }
diff --git a/internal/types/book.go b/internal/types/book.go
index d4e4295..a3e3da3 100644
--- a/internal/types/book.go
+++ b/internal/types/book.go
@@ -1,8 +1,53 @@
 package types
 
+import (
+	"fmt"
+)
+
+const (
+	PlatformYes24 string = "yes24"
+)
+
 type Book struct {
-	Yes24Id     string `json:"yes24Id"`
+	ID          string `json:"id"`
+	PlatformID  string `json:"platformId"`
 	Title       string `json:"title"`
 	Author      string `json:"author"`
 	Description string `json:"description"`
 }
+
+func (book Book) SpineImageURL() string {
+	switch book.PlatformID {
+	case PlatformYes24:
+		return fmt.Sprintf("https://image.yes24.com/goods/%s/SIDE/XL", book.ID)
+	}
+	return ""
+}
+
+func (book Book) CoverImageURL() string {
+	switch book.PlatformID {
+	case PlatformYes24:
+		return fmt.Sprintf("https://image.yes24.com/goods/%s/XL", book.ID)
+	}
+	return ""
+}
+
+// Used when the book struct is needed to be serialized for JS / templ
+// interactions.
+type BookView struct {
+	Title       string `json:"title"`
+	Author      string `json:"author"`
+	Description string `json:"description"`
+	SpineURL    string `json:"spineUrl"`
+	CoverURL    string `json:"coverUrl"`
+}
+
+func (book Book) View() BookView {
+	return BookView{
+		Title:       book.Title,
+		Author:      book.Author,
+		Description: book.Description,
+		SpineURL:    book.SpineImageURL(),
+		CoverURL:    book.CoverImageURL(),
+	}
+}
diff --git a/internal/types/shelf.go b/internal/types/shelf.go
index 2807e3c..658d3d6 100644
--- a/internal/types/shelf.go
+++ b/internal/types/shelf.go
@@ -9,5 +9,5 @@ const (
 
 type ShelfItem struct {
 	Type ShelfItemType `json:"type"`
-	Book *Book         `json:"book,omitempty"`
+	Book *BookView     `json:"book,omitempty"`
 }
diff --git a/internal/views/shelf/shelf.go b/internal/views/shelf/shelf.go
index 7248617..a953667 100644
--- a/internal/views/shelf/shelf.go
+++ b/internal/views/shelf/shelf.go
@@ -8,6 +8,6 @@ import (
 type ShelfPageParams struct {
 	User          *oauth.AccountUser
 	ProfileHandle string
-	Catalog       []types.Book
+	Catalog       []types.BookView
 	Items         []types.ShelfItem
 }
diff --git a/internal/views/shelf/shelf.js b/internal/views/shelf/shelf.js
index 3bfa097..37e0931 100644
--- a/internal/views/shelf/shelf.js
+++ b/internal/views/shelf/shelf.js
@@ -1,9 +1,10 @@
 /**
  * @typedef {object} Book
- * @property {string} yes24Id
  * @property {string} title
  * @property {string} author
  * @property {string} description
+ * @property {string} spineUrl
+ * @property {string} coverUrl
  */
 
 /**
diff --git a/internal/views/shelf/shelf.templ b/internal/views/shelf/shelf.templ
index fba401b..3b64880 100644
--- a/internal/views/shelf/shelf.templ
+++ b/internal/views/shelf/shelf.templ
@@ -45,7 +45,7 @@ templ ShelfPage(params ShelfPageParams) {
 										@click.stop="items.splice(slot.index, 1)"
 									>
 										<img
-											:src="`https://image.yes24.com/goods/${slot.item.book.yes24Id}/SIDE/XL`"
+											:src="slot.item.book.spineUrl"
 											:alt="slot.item.book.title"
 											draggable="false"
 										/>
@@ -60,7 +60,7 @@ templ ShelfPage(params ShelfPageParams) {
 											<p x-text="slot.item.book.description"></p>
 										</div>
 										<img
-											:src="`https://image.yes24.com/goods/${slot.item.book.yes24Id}/XL`"
+											:src="slot.item.book.coverUrl"
 											:alt="slot.item.book.title"
 											draggable="false"
 										/>