เคยสงสัยไหมว่าแอปพลิเคชันและเว็บไซต์ที่ปรากฏในซีรีส์เรื่องดังอย่าง “สงครามส่งด่วน” ไม่ว่าจะเป็น Thunder, Easy, Mally และอื่น ๆ ทำไมถึงดูสมจริงราวกับมีอยู่จริง? วันนี้เราจะพาไปไขความลับเบื้องหลังโปรเจกต์สุดพิเศษ ที่เปลี่ยนกราฟิกบนจอให้กลายเป็นเว็บแอปที่ทุกคนสามารถเข้าไปลองเล่นได้จริง ๆ
จากความ “รู้สึกแปลก ๆ” สู่การอาสาสร้างแอปจริง
เรื่องราวนี้เริ่มต้นจากคุณ “ปั๊บ” ซึ่งเป็น Frontend Developer ของโปรเจกต์ ที่เล่าว่าปกติแล้วหน้าจอแอปหรือเว็บในหนัง/ซีรีส์มักจะถูกสร้างขึ้นโดยทีมอาร์ตในขั้นตอน Post-production ซึ่งบางครั้งก็ให้ความรู้สึก “Uncanny” หรือแปลก ๆ อยู่บ้าง อาจเป็นเพราะ Layout, Padding, หรือ Font ที่ดูไม่เป็นธรรมชาติเหมือนแอปที่นักพัฒนาสร้างขึ้นจริง ๆ
ด้วยเหตุนี้ คุณปั๊บจึงอาสาที่จะลงมือเขียนแอปพลิเคชันและเว็บไซต์ที่ใช้ในเรื่องขึ้นมาจริง ๆ เพื่อความสมจริงสูงสุด โดยได้รับไฟเขียวจาก “พี่ไก่ นพพล” ที่บอกว่า “ปั๊บปล่อยให้คนลองเล่นเลย!”
ความท้าทายในการพัฒนา: เลือกเทคโนโลยีและดีไซน์ตัวตนของแต่ละแอป
โจทย์แรกที่ต้องตัดสินใจคือ “จะเขียนด้วยอะไร?” แม้ในเรื่องส่วนใหญ่จะเป็นแอปบนมือถือ แต่เพื่อความรวดเร็วและลดความซับซ้อนในการพัฒนา คุณปั๊บจึงเลือกสร้างเป็น Progressive Web App (PWA) ด้วย Svelte ซึ่งเป็นเครื่องมือที่เขาถนัด ทำให้เว็บสามารถทำงานได้ใกล้เคียงแอปจริง ๆ เช่น การซ่อนแถบ Navigation Bar ได้
กระบวนการทำงานจะเริ่มขึ้นเมื่อใกล้ถึงวันถ่ายทำ ทีมาร์ตจะส่ง CI (Corporate Identity) ของแต่ละบริษัทมาให้ เช่น โลโก้, โทนสี, ฟอนต์ จากนั้นคุณปั๊บจะนำมาตีความและออกแบบหน้าตาแอปให้มีคาแรกเตอร์แตกต่างกันไป:
- SR Express: แอปเวอร์ชันแรกที่ทีมสันติทำแบบรีบ ๆ เพื่อไปเสนอนักลงทุน หน้าตาจึงดูไม่เรียบร้อยนัก เหมือนแอปที่สร้างโดยทีม dev ล้วน ๆ ไม่มีดีไซเนอร์
- Easy Express: แอปของบริษัทที่มีทุนหนา ภาพลักษณ์จึงดูสวยงาม น่าเชื่อถือ และมีความเป็นองค์กรสูง
- Thunder Express: แอปที่พัฒนาต่อจาก SR ซึ่งจะดูดีขึ้น และมี Reference ที่ชัดเจนจากแอปในโลกความจริง
เบื้องหลังเทคนิค “Hacky Way” เพื่อความสมจริงขั้นสุด
สิ่งที่ทำให้เว็บแอปเหล่านี้ดูสมจริงคือการใช้เทคนิคพิเศษ (ที่คุณปั๊บเรียกว่า “Hacky Way”) เพื่อเลียนแบบพฤติกรรมของ Native App แท้ ๆ
- การ Scroll ที่ไม่เด้ง: เว็บเบราว์เซอร์บนมือถือมักจะมีเอฟเฟกต์ “เด้ง” เมื่อเลื่อนไปจนสุดหน้าจอ ซึ่งต่างจากแอปส่วนใหญ่ คุณปั๊บจึงใช้เทคนิคเพื่อทำให้เว็บไม่เด้ง แต่ในขณะเดียวกันก็พบว่าแอปต้นแบบของ Thunder และ Mally กลับใช้ Webview ค่อนข้างเยอะ ซึ่งทำให้ “เด้ง” ได้เหมือนกัน! ดังนั้น แอปของ Thunder จึงถูกทำให้เด้งได้มากกว่า Easy เพื่อความสมจริง
- การจัดการขอบจอบน-ล่าง (Notch & Safe Area): เพื่อให้แอปดูเต็มจอเหมือนแอปสมัยใหม่บน iPhone ที่ไม่มีปุ่มโฮม คุณปั๊บได้ใช้ Margin ติดลบเพื่อให้พื้นหลังของแอปไหลขึ้นไปถึงขอบบนและลงมาถึงขอบล่างสุด ทำให้ไม่เหลือแถบสีขาวทิ้งไว้
ความท้าทายของแต่ละโปรเจกต์
- Mally: เป็นแอปที่ซับซ้อนที่สุดเพราะเป็นแพลตฟอร์มอีคอมเมิร์ซ ทีมงานต้องสร้างสินค้าจำลองขึ้นมานับร้อยชิ้น ตั้งแต่พรม ต้นไม้ ไปจนถึงจักรยาน ซึ่งมีเพียงไม่กี่ชิ้นที่สามารถกดเข้าไปดูรายละเอียดและทำรายการต่อได้จนถึงหน้าเลือกบริษัทขนส่ง
- iData (เครื่องสแกนของไรเดอร์): เป็นโปรเจกต์ที่สนุกที่สุด คุณปั๊บได้เครื่องจริงมาเป็น Reference และโชคดีที่เครื่องซึ่งเป็น Android เวอร์ชันเก่ามากกลับรองรับ PWA พอดี จุดเด่นคือ “ลายน้ำ” ชื่อไรเดอร์บนจอ ที่มีปุ่มลับซ่อนไว้ให้ทีมงานเปลี่ยนชื่อหน้ากองถ่ายได้เลย
- Dashboard และหน้าเว็บอื่น ๆ: มีการสร้าง Dashboard ของทั้ง Thunder และ Easy โดยใช้ Library สำหรับสร้างกราฟคนละตัวกันเพื่อให้ดูแตกต่าง นอกจากนี้ยังมีการสร้าง หน้า Play Store ปลอม สำหรับฉากเปิดตัวแอป Thunder และ Webmail ที่ปั่นเสร็จในบ่ายวันที่ถ่ายทำเลยทีเดียว
สิ่งที่แตกต่างจากการเขียนเว็บจริง
คุณปั๊บยอมรับว่าโค้ดที่เขียนในโปรเจกต์นี้อาจจะ “ชุ่ย” ไปบ้าง เพราะต้องทำแข่งกับเวลาและมี Requirement ที่เฉพาะเจาะจงมาก เช่น:
- ไม่ Responsive: เว็บถูกออกแบบมาให้สวยที่สุดบนหน้าจอที่จะใช้ถ่ายทำเท่านั้น จออื่น ๆ อาจจะแสดงผลเพี้ยนไป
- ปุ่มส่วนใหญ่กดไม่ได้: กว่า 80% ของปุ่มถูกสร้างมาเพื่อความสวยงาม หรือมีฟังก์ชันลับซ่อนอยู่ เช่น กดเพื่อเปลี่ยนตัวเลข หรือเปลี่ยนหน้าจอตามบท
ทั้งหมดนี้คือเบื้องหลังความทุ่มเทเพื่อสร้างประสบการณ์ที่สมจริงที่สุดให้กับผู้ชมซีรีส์ “สงครามส่งด่วน” และวันนี้ทุกคนก็สามารถเข้าไปสัมผัสและลองเล่นเว็บแอปเหล่านี้ได้ด้วยตัวเองแล้ว!